QML 状态系统

QML 的状态系统(State System)是一种强大的机制，允许您根据不同的条件或用户交互来改变用户界面的外观和行为。以下是关于 QML 状态系统的详细介绍：

基本概念

1. 状态(States): 表示组件在不同条件下的不同配置

2. 转换(Transitions): 定义状态之间变化时的动画效果

3. 属性更改(Property Changes): 状态切换时发生的属性变化

基本用法 

Item {id: myItemwidth: 100; height: 100// 默认状态state: "normal"// 定义状态states: [State {name: "normal"PropertyChanges { target: myItem; color: "blue" }},State {name: "pressed"PropertyChanges { target: myItem; color: "red" }}]// 定义状态转换动画transitions: [Transition {from: "normal"; to: "pressed"ColorAnimation { duration: 200 }},Transition {from: "pressed"; to: "normal"ColorAnimation { duration: 200 }}]
}

核心元素

元素/属性	类型	描述
State	QML类型	定义一个状态
states	属性	组件的状态列表
state	属性	当前状态名称
transitions	属性	状态转换动画列表
Transition	QML类型	定义状态间的过渡动画

State 属性

属性	类型	描述
name	string	状态的唯一标识名称
when	bool	条件表达式，为true时自动激活状态
extend	string	继承另一个状态的属性更改

State 方法

方法	参数	描述
PropertyChanges	target: Item, properties...	指定状态激活时要改变的属性
StateChangeScript	name: string, script: string	状态激活时执行的JS代码
ParentChange	target: Item, parent: Item	改变项目的父项
AnchorChanges	target: Item, anchors...	改变项目的锚定设置

Transition 属性

属性	类型	描述
from	string	起始状态("*"表示任意状态)
to	string	目标状态("*"表示任意状态)
reversible	bool	是否自动反向播放动画
animations	list	包含的动画列表

常用信号

信号	描述
onStateChanged	当state属性改变时触发

示例代码

qml

Rectangle {id: rectwidth: 100; height: 100color: "blue"states: [State {name: "red_state"PropertyChanges { target: rect; color: "red" }PropertyChanges { target: rect; width: 200 }},State {name: "green_state"when: mouseArea.containsMousePropertyChanges { target: rect; color: "green" }}]transitions: [Transition {from: "*"; to: "red_state"ColorAnimation { duration: 500 }NumberAnimation { properties: "width"; duration: 300 }},Transition {to: "green_state"ColorAnimation { duration: 200 }}]MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: trueonClicked: rect.state = (rect.state == "red_state" ? "" : "red_state")}onStateChanged: console.log("State changed to:", state)
}

状态定义

状态通过 states 属性定义，每个状态包含：

• name: 状态的唯一标识符

• PropertyChanges: 指定在该状态下哪些属性应该改变

• StateChangeScript: 可以在状态激活时执行 JavaScript 代码

• ParentChange: 改变项目的父项

• AnchorChanges: 改变项目的锚定

状态切换

可以通过以下方式切换状态：

1. 直接设置 state 属性：

   qml

   myItem.state = "pressed"

2. 使用 MouseArea 交互：

   qml

   MouseArea {anchors.fill: parentonPressed: myItem.state = "pressed"onReleased: myItem.state = "normal"
   }

状态系统工作流程

1. 定义多个State在states列表中

2. 通过设置state属性或when条件切换状态

3. 状态切换时自动应用PropertyChanges

4. 通过transitions定义状态切换时的动画效果

5. 状态改变时会触发onStateChanged信号

高级特性

1. 默认状态

qml

state: "stateName" // 设置初始状态

2. 通配符转换

qml

transitions: Transition {to: "*" // 应用到所有状态变化NumberAnimation { properties: "x,y"; duration: 500 }
}

3. 条件状态

qml

states: State {name: "hidden"when: checkbox.checked // 当条件为 true 时自动激活该状态PropertyChanges { target: rect; opacity: 0 }
}

4. 组合状态

qml

states: [State {name: "left"; when: position.x < 100PropertyChanges { target: rect; color: "green" }},State {name: "right"; when: position.x > 200PropertyChanges { target: rect; color: "red" }}
]

实用技巧

1. 使用空字符串""表示默认/基础状态

2. when属性可以实现自动状态切换

3. 通配符"*"可以匹配任意状态

4. 多个PropertyChanges可以应用于同一个目标

5. 使用ScriptAction可以在过渡过程中执行脚本