Qml类型：State 状态

Qml类型：State 状态

1、定义一个状态
2、状态名称
3、绑定目标
4、触发状态改变

我们来写一个状态转换器。

1、定义一个状态

一个状态的定义可以声明为states: State { ... }，也可以声明为：states: [ State { ... } ]两种形式。

多个状态可以声明如下的形式：

states: [
State { ... }, // 状态1
State { ... }, // 状态2
...
]
1
2
3
4
5
多个状态的声明，其实就是声明了类似一个数组，[和]直接放入的是数组元素，那么当声明一个状态时也可以使用这种形式，即数组元素为一个。

2、状态名称

对于每一个状态State，需要给他取一个独一无二的名称（字符串类型）。

3、绑定目标

对于每一个状态State，需要定义一个或者多个PropertyChanges。

PropertyChanges需要一个target，用来绑定一个qml对象。比如如下例子：

states: State {
name: "resized"; when: mouseArea.pressed
PropertyChanges {
target: rect;
color: "blue";
height: container.height
}
}
1
2
3
4
5
6
7
8
上述的color、height等都是rect的属性（rect是一个Rectangle类型的id）。

当切换到当前状态时，会触发PropertyChanges中目标控件的color、height的变化（颜色变成蓝色、高度变成和容器高度一致）。

4、触发状态改变

有两种方式触发状态的改变：

一个是：在State中定一个when，当发生该事件时触发当当前状态。如上述的when: mouseArea.pressed，当点击按下时触发。

另一个是：主动改变在定义states的控件的state属性，该属性在Item中定义，因此只要是控件类型继承自Item的都存在这个属性。

如下即是这种方式。在onExited、onPressed的时候主动改变rootRect.state的值，触发状态的切换，进而改变rootRect的opacity属性。

Rectangle{
id: rootRect
color: "transparent"
state: "normal"
MouseArea {
onExited: {
rootRect.state = "normal"
}
onPressed: {
rootRect.state = "pressed"
}
}
states: [
State {
name: "normal"
PropertyChanges{ target: rootRect; opacity: 0.6 }
},
State {
name: "pressed"
PropertyChanges{ target: rootRect; opacity: 1 }
}
]
}
————————————————
原文链接：https://blog.csdn.net/tanxuan231/article/details/124990331