在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。我沒有關閉這個問題1年，但仍然沒有得到任何更好的解決方案或更好的方式來做事。