Qt5 QML ListView内容放大

Question

我正在尝试实现图像查看器（排序）：

• 模型/视图方法
• 同时使用c ++和qml
• 图片只是ListView填充了Image（代表）项目

这是一段代码：

property double zoomFactor: 1.5;
property double imgScale: 1;

CustomToolBar
{
    id: toolBar
    onZoomInSignal:
    {
        imgScale = imgScale*zoomFactor;
    }
    onZoomOutSignal:
    {
        imgScale = imgScale/zoomFactor;

    }
    onZoomFitSignal:
    {
        imgScale = 1;
    }
}

Rectangle
{
    id: bgRect

    Layout.fillWidth: true
    Layout.fillHeight: true

    color: "Grey"

    anchors.margins: 10

    ScrollView
    {
        id: scrollView
        anchors.fill: parent

        ListView
        {
            id: listView

            anchors.fill: parent
            clip: true

            spacing: 10

            model: listItemModel

            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right

            anchors.margins: 10

            boundsBehavior: Flickable.StopAtBounds

            delegate: Image
            {
                id: item_id

                anchors.horizontalCenter: parent.horizontalCenter
                source: item_img_path + "/" + Math.random()

                scale: imgScale
            }
        }
    }
}

正确加载图像，我需要能够缩放它们。

为了缩放，我只需修改scale代理的Image属性。

• 图片未缩放（scale = 1）正确：

• 图像unzoomed（scale = 1/1.5）错误！图像间距（？）正在递增：

• 图片放大（scale = 1.5）错误！图像重叠：

正如您所看到的， zoom minus 会增加图像之间的间距（我不太确定它实际上是间距）， zoom plus 重叠图像。

此外，在放大时为ScrollView设置水平滚动条会很不错，但我无法做到这一点。

任何人都可以帮助我吗？

由于

编辑：

按照solution提出的grillvott，图片会正确放大/缩小，但整个ListView随着它们变得越来越小：

结果应该是这样的（gimp模式ON）：

有什么想法吗？

Answer 1

我认为scale不会考虑任何边界。您可以封装图像并使用fillMode确保图像相应缩放：

delegate: Item {
    anchors.horizontalCenter: parent.horizontalCenter
    width: img.sourceSize.width * imgScale
    height: img.sourceSize.height * imgScale
    Image {
        id: img
        anchors.fill: parent
        source: item_img_path + "/" + Math.random()
        fillMode: Image.Stretch
    }
}