Содержание центра QML FlickArea

Question

Я пытаюсь сделать просмотрщик PDF внутри Flickable в QML. Для этого я использую библиотеку Poppler для рендеринга моих PDF-страниц в изображения. При масштабировании я масштабирую размер изображения, что приводит к изменению высоты и ширины содержимого.

Мой вопрос: когда я уменьшаю масштаб до точки, где ширина изображения меньше ширины Flickable, изображение сдвигается влево. Точно так же, если я переверну ориентацию и высота изображения станет меньше высоты FlickArea, изображение будет зафиксировано сверху. Есть ли хороший способ центрировать изображение в окне FlickArea?

В целях упрощения этого примера я заменил свое PDF-изображение прямоугольником.

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

Answer 1

Попробуйте что-то вроде этого:

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