Właściwy sposób wdrożenia powiększenia/skalowania w Qt Quick (QML) Flickowanie

Question

Używam Qt 5.2 beta, Qt Quick 2.1.

Mam problem z wyprzedzeniem z komponentem Flickable.

Oto przykład kodu minimalne robocze:

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; } 
    } 
} 

Kiedy robię skalowanie, spodziewam się, że wszystkie elementy potomne pozostaną widoczne jak to było wcześniej, a powierzchnia wewnętrzna stać się większe.

Zamiast tego elementy potomne wyprowadzają się poza Flickowana zawartość.

Czy ktoś może zaproponować normalny sposób uniknięcia tego problemu bez konieczności ręcznego przeliczania wszystkich przesunięć?

Dzięki.

Answer 1

mam to działa zgodnie z oczekiwaniami, w ten sposób, ale IMO to sposobem jest trochę trudne:

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; 
     } 
    } 
} 

Czy ktoś może zaproponować coś lepszego?

UPD. Nie zamykałem tego pytania przez 1 rok, ale wciąż nie otrzymałem lepszego rozwiązania lub lepszego sposobu robienia rzeczy.