qml中的编排

时间:2018-08-25 01:05:10

标签: qt animation qml

是否可以在qml中使用choreography动画(以可重复使用的方式)? 例如从第1页到第2页的StackView过渡。

我尝试了以下代码,但是ParentChange无法正常工作。这段代码只是改变了红色矩形的位置。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

StackView {
    id: stack
    anchors.fill: parent

    initialItem: Page {
        id: page1
        Label {
            text: qsTr("First page")
            anchors.centerIn: parent
        }

        Rectangle {
            id: rect
            width: 50
            height: 50
            x: 600
            y: 100
            color: "red"

            states: [
                State {
                    when: stack.depth > 1
                    ParentChange { target: rect; parent: stack.currentItem; x: 100; y: 100; }
                }
            ]

            transitions: Transition {
                ParentAnimation {
                    NumberAnimation { properties: "x,y"; duration: 1000 }
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: stack.push(page2)
        }
    }

    Component {
        id: page2
        Page {
            background: Rectangle { color: "yellow"; anchors.fill: parent }
            Label {
                text: qsTr("Second page")
                anchors.centerIn: parent
            }
        }
    }
}

Rectangle {
    id: back
    color: "blue"
    width: 50
    height: 50
    radius: 25

    MouseArea {
        anchors.fill: parent
        onClicked: stack.pop()
    }
}
}

,但用法不限于StackView。它可以在许多其他情况下使用。 (就像上面的链接一样)

0 个答案:

没有答案