QML教程3 - 状态与过渡

在本章中，我们通过引入状态和过渡，使这个示例更加动态。

我们希望点击文本时，文本移动到屏幕底部，旋转并变成红色。

以下是QML代码

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

演练

states: State {
    name: "down"; when: mouseArea.pressed == true
    PropertyChanges {
        helloText {
            y: 160
            rotation: 180
            color: "red"
        }
    }
}

首先，我们为我们的文本类型创建一个新的按下状态。当被按下时，将激活此状态，释放时将其禁用。

按下状态包括从我们的隐含的默认状态（在QML中最初定义的项目）到一组属性更改。具体来说，我们将文本的y属性设置为160，旋转设置为180，颜色设置为红色。

transitions: Transition {
    from: ""; to: "down"; reversible: true
    ParallelAnimation {
        NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
        ColorAnimation { duration: 500 }
    }
}

因为我们不希望文本立即出现在底部，而是希望它平滑地移动，所以我们在这两个状态之间添加了一个过渡。

来自和发展到定义了过渡将在其中运行的状态。在这种情况下，我们希望从默认状态到我们的按下状态进行过渡。

因为我们希望当从按下状态切换回默认状态时，也以相反的方向运行相同的过渡，我们将reversible设置为true。这相当于分别编写两个过渡。

并行动画类型确保两种类型的动画（数字和颜色）同时开始。我们也可以通过使用顺序动画来逐个运行动画。

有关状态和过渡的更多信息，请参阅Qt Quick States和状态和过渡示例。