首页 文章

在Qt Quick（QML）Flickable中实现缩放/缩放的正确方法

提问于
浏览 次
8

我正在使用Qt 5.2 beta，Qt Quick 2.1 .

我有Flickable组件直接问题 .

这是最小的工作代码示例：

import QtQuick 2.1
import QtQuick.Controls 1.0

ApplicationWindow {
    width: 300
    height: 200

    Rectangle {
        anchors.fill: parent
        color: "green"

        Flickable {
            id: flickArea
            anchors {fill: parent; margins: 10; }
            contentWidth: rect.width;
            contentHeight: rect.height
            Rectangle {
                id: rect
                x: 0; y: 0;
                width: 200; height: 300;
                color: "lightgrey"

                Rectangle {
                    anchors { fill: parent; margins: 10; }
                    color: "red"
                }
            }
        }
    }
    Button {
        anchors.bottom: parent.bottom;
        anchors.horizontalCenter: parent.horizontalCenter;
        text: "Scale flickArea"
        onClicked: { flickArea.scale += 0.2; }
    }
}

当我进行缩放时，我希望所有子元素都保持可见，因为它在之前和内部区域变得更大 .

但相反，子元素移出Flickable内容 .

有人可以提出一种正常的方法来避免这个问题，而无需手动重新计算所有偏移量吗？

谢谢 .

zoom scale qml qt5 qtquick2

1 回答

  • 3

    我按照这种方式按预期工作，但IMO这种方式有点棘手：

    import QtQuick 2.1
import QtQuick.Controls 1.0

ApplicationWindow {
    width: 300
    height: 200

    Rectangle {
        anchors.fill: parent
        color: "green"

        Flickable {
            id: flickArea
            anchors {fill: parent; margins: 10; }
            contentWidth: rect.width*rect.scale
            contentHeight: rect.height*rect.scale
            Rectangle {
                id: rect
                transformOrigin: Item.TopLeft
                x: 0; y: 0;
                width: 200; height: 300;
                color: "lightgrey"

                Rectangle {
                    id: inner
                    anchors { fill: parent; margins: 10; }
                    color: "red"
                }
            }
        }
    }
    Button {
        anchors.bottom: parent.bottom;
        anchors.horizontalCenter: parent.horizontalCenter;
        text: "Scale flickArea"
        onClicked: {
            rect.scale += 0.2;
        }
    }
}

    有人能提出更好的建议吗？

    UPD. 我没有关闭这个问题1年，但仍然没有得到任何更好的解决方案或更好的做事方式 .

    回复于

相关问题