Modo corretto per implementare zoom/scala in Qt Quick (QML) Flickable

Question

Sto usando Qt 5.2 beta, Qt Quick 2.1.

Ho un problema diretto con il componente Flickable.

Ecco minimo esempio di codice di lavoro:

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

Quando sto facendo ridimensionamento, mi aspetto che tutti gli elementi figlio rimarranno visibili come era prima e la zona interna di diventare più grande.

Invece, gli elementi figlio si spostano dal contenuto Flickable.

Qualcuno può proporre un modo normale per evitare questo problema senza la necessità di ricalcolare manualmente tutti gli offset?

Grazie.

Answer 1

ho preso funzionare come previsto in questo modo, ma IMO in questo modo è po 'difficile:

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

qualcuno in grado di proporre qualcosa di meglio?

UPD. Non ho chiuso questa domanda per 1 anno, ma non ho ancora trovato una soluzione migliore o un modo migliore di fare le cose.