QML FlickArea 中心内容

Posted 2023-02-16

【中文标题】QML FlickArea 中心内容

【英文标题】：QML FlickArea center content

【发布时间】：2020-01-21 21:53:46

【问题描述】：

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

我的问题是，当我缩小到图像宽度小于 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)
                
            
        
    

【参考方案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;
        
    

【讨论】：

完美运行。感谢您的建议