QML FlickArea 中心内容

Question

我正在尝试在 QML 的 Flickable 中创建一个 PDF 查看器。为此，我使用 Poppler 库将我的 PDFPages 渲染为图像。当我缩放时，我重新缩放图像的大小，导致内容的高度和宽度发生变化。

我的问题是，当我缩小到图像宽度小于 Flickable 宽度的点时，图像被推到左边。同样，如果我翻转方向并且图像的高度变得小于 FlickArea 高度，则图像被锁定在顶部。有没有什么好的方法可以让图片在FlickAreawindow中居中？

为了简化此示例，我将 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;
        }
    }
}

QML FlickArea 中心内容

QML FlickArea center content

qt

qml

flickable