Korrekter Weg zum Implementieren von Zoom/Skalierung in Qt Quick (QML) Flickbar

Question

Ich benutze Qt 5.2 Beta, Qt Quick 2.1.

Ich habe geradeaus Problem mit Flickable Komponente.

ist hier minimal Arbeitscodebeispiel:

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

Wenn ich Skalierung mache, erwarte ich, dass alle untergeordneten Elemente sichtbar bleiben wird, wie es vor und Innenbereich war größer zu werden.

Stattdessen werden die untergeordneten Elemente aus dem Inhalt "Flickable" entfernt.

Kann jemand einen normalen Weg vorschlagen, um dieses Problem zu vermeiden, ohne dass alle Offsets manuell neu berechnet werden müssen?

Danke.

Answer 1

Ich habe es arbeiten, wie auf diese Weise erwartet, aber IMO diese Art und Weise ist wenig kompliziert:

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

jemand etwas besser schlagen können?

UPD. Ich habe diese Frage seit einem Jahr nicht mehr geschlossen, aber immer noch keine bessere Lösung oder einen besseren Weg gefunden.