Qt5 QML ListView内容缩放

Question

I am trying to implement an image viewer (sort of):

• model/view approach
• using both c++ and qml
• the images are just a ListView filled up with Image (delegate) items

Here is a piece of code:

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

The images are loaded correctly, I need to be able to zoom them.

In order to zoom I just modify the scale property of the Image delegate.

• Images not scaled ( scale = 1 ) CORRECT:

• Images unzoomed ( scale = 1/1.5 ) WRONG! images spacing (?) is being incremented:

• Images zoomed ( scale = 1.5 ) WRONG! images overlap:

As you can see, zoom minus increments the spacing (I'm quite not sure it is really the spacing) between the images, and zoom plus overlaps the images.

Furthermore, it would be nice to have the horizontal scrollbar for the ScrollView when zooming in, but I cannot achieve this.

Can anyone help me?

Thanks

---

EDIT:

Following the solution proposed by grillvott the images are zoomed in/out correctly, but the whole ListView is getting smaller/bigger with them:

The result should be instead something like this (gimp mode ON):

Any idea?

Answer 1

I don't think that scale will take any boundaries into consideration. You could encapsulate the image and use fillMode to make sure the image scales accordingly:

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