Правильный способ реализации масштабирования / масштабирования в Qt Quick (QML) Flickable

Я использую 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 содержимого.

кто-нибудь может предложить нормальный способ избежать этой проблемы без необходимости ручного пересчета всех зачетов?

спасибо.

7
qml qt5 qtquick2 scale zoom

1 ответов

Я получил его работу, как ожидалось, таким образом, но ИМО этот путь немного сложнее:

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 года, но все равно не получил лучшего решения или лучшего способа делать вещи.

2