Qt5 QML ListView contents zoom

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:

No zoom (scale = 1)

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

Zoom minus (scale = 1/1.5)

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

Zoom plus (scale = 1.5)

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:

enter image description here

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

enter image description here

Any idea?

Help me to understand you, how should the images look in the zoom in/out cases? Just as the same size than at scale 1? — Sommerwild
well, they should be smaller/bigger as you can see in screenshots, but they shoud stay adherent one to each other as they are with scale = 1. Of course they MUST not overlap :| — Giancarlo

grillvott grillvott · Accepted Answer · 2015-06-24T11:57:41

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

Qt5 QML ListView contents zoom

1 Answers