Qml类型：State 状态

---

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

1、定义一个状态

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

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

states: [ 
	State { ... },	// 状态1
	State { ... },	// 状态2
	...
]

多个状态的声明，其实就是声明了类似一个数组，[和]直接放入的是数组元素，那么当声明一个状态时也可以使用这种形式，即数组元素为一个。

2、状态名称

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

3、绑定目标

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

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

states: State {
			name: "resized"; when: mouseArea.pressed
			PropertyChanges { 
				target: rect; 
				color: "blue"; 
				height: container.height 
			}
		}

上述的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 }
          }
      ]
  }
  

---

完整实现可以搜索公众号，关注并回复：“State”获取。