Qt5 QML ListView 内容缩放

Question

我正在尝试实现图像查看器（某种程度上）：

model/view接近
同时使用 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
            }
        }
    }
}

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

为了缩放，我只修改了 Image 委托的 scale 属性。

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

图像未缩放 (scale = 1/1.5) 错误！图片间距 (?) 正在增加：

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

如您所见，zoom minus 增加图像之间的间距（我不太确定它真的是间距），zoom plus 与图像重叠。

此外，放大时ScrollView有水平滚动条就好了，但我做不到。

谁能帮帮我？

谢谢

编辑：

在 proposed by grillvott 之后，图像被正确缩放 in/out，但整个 ListView 正在 smaller/bigger 中：

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

有什么想法吗？

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
    }
}

Qt5 QML ListView 内容缩放

Qt5 QML ListView contents zoom

qt

listview

image

scrollview

qml