QML状态机制示例（State）

引言

QML的状态机制为界面元素提供了灵活的状态管理能力。本文通过三个实战示例，演示如何运用State、PropertyChanges和Transition等核心组件实现动态交互效果。

相关阅读

相关文档参考：Qt Quick States

---

基础知识

核心概念	说明
State	定义组件在特定条件下的属性集合（必需属性：name）
PropertyChanges	声明状态切换时需要修改的属性和目标对象（必需属性：target）
Transition	定义状态切换时的动画过渡效果（配置属性：from/to状态过滤）
when属性	条件触发式状态切换的布尔表达式

组件属性详解

组件	关键属性	说明
State	name: string changes: list extend: string	状态唯一标识符 包含的属性变更操作 继承其他状态的属性
PropertyChanges	target: object explicit: bool	要修改的QML对象 是否显式覆盖默认值
Transition	animations: list reversible: bool	动画效果集合 是否自动反向执行动画

---

工程结构

qml_state/
├── CMakeLists.txt    # 项目构建配置
├── Main.qml          # 入口文件
├── SwitchState.qml   # 状态切换示例
├── MultiProperty.qml # 多属性联动示例
└── WhenState.qml     # 条件触发示例

示例解析

示例1：状态切换（SwitchState.qml）

import QtQuick
import QtQuick.ControlsRectangle {id: rootwidth: 200height: 200// 设置默认状态state: "state1"// 定义状态states: [State {name: "state1"// 状态1的属性更改PropertyChanges {target: rectx: 0y: 75color: "red"}},State {name: "state2"// 状态2的属性更改PropertyChanges {target: rectx: 150y: 75color: "green"}}]Rectangle {id: rectx: 0y: 75width: 50height: 50}Button {text: "切换状态"anchors.bottom: parent.bottomonClicked: {if (root.state === "state1")root.state = "state2"elseroot.state = "state1"}}// 状态过渡动画transitions: [Transition {from: "state1"  // 从任何状态to: "state2"    // 到任何状态NumberAnimation {properties: "x"duration: 500easing.type: Easing.InOutQuad}ColorAnimation {duration: 500}}]
}

代码要点：

1. 定义两个状态state1/state2，控制矩形位置和颜色
2. 按钮点击切换状态，带动画过渡效果
3. Transition配置500ms的位移动画和颜色渐变

运行效果：

SwitchState初始状态（红色左位）与切换后状态（绿色右位）

---

示例2：多属性联动（MultiProperty.qml）

import QtQuick
import QtQuick.ControlsRectangle {id: rootwidth: 200height: 200// 定义状态states: [State {name: "expanded"PropertyChanges {target: rect1color: "red"}PropertyChanges {target: rect2color: "blue"}}]Row {anchors.centerIn: parentspacing: 10Rectangle {id: rect1width: 50height: 50color: "red"}Rectangle {id: rect2width: 50height: 50color: "green"}}
}

代码要点：

1. 单状态同时修改两个矩形颜色
2. 使用Row容器实现水平排列
3. 状态变更时自动触发颜色渐变

运行效果：

MultiProperty双矩形颜色同步变化对比

---

示例3：条件触发（WhenState.qml）

import QtQuick
import QtQuick.ControlsRectangle {//id: rootwidth: 200height: 200states: [State {name: "active"when: cbox.checkedPropertyChanges {target: rectborder.color: "red"}}]Rectangle {id: rectwidth: 180height: 100anchors.centerIn: parentborder.color: "#333"radius: 8Text {text: "勾选CheckBox，边框变红"anchors.centerIn: parent}}CheckBox {id: cboxtext: "激活状态"anchors.bottom: parent.bottom}
}

交互逻辑：

1. 通过CheckBox的checked属性触发状态
2. when条件绑定控件状态
3. 边框颜色随勾选状态改变

运行效果：

WhenState勾选框激活前后边框颜色变化

---

总结

本文通过三个典型场景演示了：

1. 基础状态切换的动画配置
2. 多对象属性联动修改
3. 条件触发式状态管理

下载链接

完整工程已托管至Gitcode：GitCode -> QML State Demo