Qtクイック（QML）Flickableでズーム/スケールを実装する適切な方法

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年間クローズしませんでしたが、それでも何か良い解決法や良い方法を得られませんでした。