QML FlickArea center content

Question

I am attempting to make a PDF viewer inside of a Flickable in QML. To do this I use the Poppler library to render my PDFPages to images. When I zoom, I re-scale the size of the image, causing the content Height and Width to change.

My question is, when I zoom out to the point where the image width is less than the Flickable width, the image is shoved to the left. Similarly, if I flip the orientation and the height of the image becomes less than the FlickArea height, the image is locked to the top. Is there any good way to center the image in the FlickArea window?

For the purposes of making this example simpler I replaced my PDF image with a Rectangle.

//Flickable qml snippet
    Flickable
    {
        id: flickArea
        anchors.fill: parent
        anchors.centerIn: parent
        focus: true
        contentWidth: testRect.width
        contentHeight: testRect.height
        clip: true

        Rectangle
        {
            id: testRect
            color: "red"
            width: 2550 * zoom
            height: 3300 * zoom
            property double zoom: 1.0;
        }
    }

//zoom button snippet
    Item
    {
        id: zoomContainer

        width: 80
        height: zoomColumn.childrenRect.height
        z: 2
        anchors
        {
            right: parent.right
            bottom: parent.bottom
            rightMargin: 10
            bottomMargin: 10
        }

        Column
        {
            id: zoomColumn

            width: parent.width
            spacing: 5
            anchors
            {
                right: parent.right
            }

            Button
            {
                id: zoomInButton

                height: 75
                width: parent.width
                text: '+'
                onClicked: {
                    testRect.zoom += 0.1
                    console.log(testRect.zoom)
                }
            }
            Button
            {
                id: zoomOutButton

                height: 75
                width: parent.width
                text: '-'

                onClicked: {
                    testRect.zoom -= 0.1
                    console.log(testRect.zoom)
                }
            }
        }
    }

Andrii Andrii · Accepted Answer · 2020-01-22T07:10:24

Try something like this:

Flickable
{
    id: flickArea
    anchors.fill: parent
    // anchors.centerIn: parent // redundant code
    focus: true
    contentWidth: wrapper.width
    contentHeight: wrapper.height
    clip: true

    Item 
    {
        id: wrapper
        width: Math.max(flickArea.width, testRect.width)
        height: Math.max(flickArea.height, testRect.height)

        Rectangle
        {
            id: testRect
            color: "red"
            anchors.centerIn: parent // centered in wrapper
            width: 2550 * zoom
            height: 3300 * zoom
            property double zoom: 1.0;
        }
    }
}

QML FlickArea center content

1 Answers