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

首先，我们为文本类型创建一个新的向下状态。当按下MouseArea 时，该状态将被激活，而当松开时，该状态将被停用。

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

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

由于我们不希望文本立即出现在底部，而是要平滑移动，因此我们在两个状态之间添加了一个过渡。

from 和定义了过渡运行的状态。在本例中，我们希望从默认状态过渡到to 向下状态。

因为我们希望从停机状态返回默认状态时，同样的转换以相反的方式运行，所以我们将reversible 设置为true 。这相当于分别编写了两个转换。

ParallelAnimation 类型可确保两种类型的动画（数字和颜色）同时启动。我们也可以使用SequentialAnimation 来代替一个接一个地运行它们。

有关状态和转换的更多详情，请参阅Qt Quick States和states and transitions示例。

QML 组件 QML 高级教程

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.