zooming - 在Qt Quick(QML)中实现缩放/缩放的正确方法

Question

我正在使用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内容中移出。

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

谢谢。

Answer 1

这样可以使它按预期工作，但是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。 我已经一年没有解决这个问题了，但是仍然没有任何更好的解决方案或更好的做事方法。