【Qt6 QML Book 基础】11：状态和过渡（附完整可运行代码）

最新推荐文章于 2025-10-05 12:32:47 发布

原创

最新推荐文章于 2025-10-05 12:32:47 发布 · 1.2k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#qt6 #qml #qt6qml #qml6book #c++

引言

在 Qt6 的 QML 编程中，状态（States）和转换（Transitions）是两个强大的概念，它们可以帮助开发者轻松地管理用户界面的不同状态，并为状态之间的切换添加动画效果，从而提升用户体验。本文将详细介绍 QML 中状态和转换的使用方法，并通过一个交通信号灯的实例来演示如何在实际项目中应用这些概念。

一、运行效果图

运行上述代码后，你将看到一个模拟的交通信号灯界面。初始状态为 “stop”，上方的红灯亮起，下方的绿灯熄灭。当你点击界面时，信号灯的状态会在 “stop” 和 “go” 之间切换，并且在从 “stop” 到 “go” 的状态切换过程中，会有 2 秒的颜色过渡动画。

二、QML 状态（States）

2.1 状态语法

在 QML 中，你可以使用State元素来定义状态，它需要绑定到任何项目元素的states数组中。一个状态通过状态名称来标识，最简单的形式是由一系列元素的属性更改组成。默认状态由元素的初始属性定义，名称为""（空字符串）。

Item {
    id: root
    states: [
        State {
            name: "go"
            PropertyChanges { ... }
        },
        State {
            name: "stop"
            PropertyChanges { ... }
        }
    ]
}

通过将新的 state 名称分配给定义状态的元素的 state 属性来更改状态。