Cách thích hợp để thực hiện phóng to/thu nhỏ trong Qt Quick (QML) Flickable

Question

Tôi đang sử dụng Qt 5.2 beta, Qt Quick 2.1.

Tôi gặp sự cố ngay lập tức với thành phần Flickable.

Dưới đây là tối thiểu mã làm việc Ví dụ:

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

Khi tôi đang làm mở rộng quy mô, tôi hy vọng rằng tất cả các yếu tố con sẽ vẫn hiển thị như trước và khu vực bên trong trở nên lớn hơn.

Nhưng thay vào đó, các phần tử con di chuyển ra khỏi nội dung có thể vuốt được.

Ai đó có thể đề xuất một cách bình thường để tránh vấn đề này mà không cần phải tính toán lại tất cả các bù trừ thủ công?

Cảm ơn.

Answer 1

tôi đã cho nó hoạt động như mong đợi theo cách này, nhưng IMO cách này là một chút khó khăn:

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

Ai đó có thể đề nghị một cái gì đó tốt hơn?

UPD. Tôi đã không đóng câu hỏi này trong 1 năm, nhưng vẫn không nhận được bất kỳ giải pháp tốt hơn hoặc cách tốt hơn để làm việc.