1.State
所有组件均具有默认状态，该状态定义对象和属性值的默认配置。可以通过向States属性添加State组件来定义新状态，以允许组件在不同配置之间切换.
许多用户界面设计都是由State状态实现的,比如: 交通信号将根据其State配置来实现红黄绿灯交错亮灭.
在QML中，状态是在State对象中定义的一组属性配置。例如，下面几种用State状态最为方便:
只显示某些UI组件，隐藏其他组件
向用户展示不同的可用操作
启动、停止或暂停动画
更改特定Item的属性值
显示不同的视图或screen
所有基于Item的对象都有一个states属性和state属性，states属性是一个list<State>类型,用来保存多个不同State对象的列表.
而state属性是一个string类型,用来保存对象当前State对象的名称(表示当前状态是什么样子的),默认是一个空字符串,如果要改变Item对象当前状态,则将state属性设置为要改变的状态name名称即可.
对于非Item对象可以通过StateGroup组件来使用State即可(后面再讲)
1.1 State对象属性
name : string,状态名称。,每个状态在都应具有唯一的名称
changes : list<Change>,保存当前State下的多个Change对象,比如PropertyChanges、StateChangeScript、ParentChange等
extend : string,扩展,表示该状态要在哪个State的基础上进行扩展,当一个状态要在另一个状态基础上进行扩展时，它将继承该另一个状态的所有changes
when : bool,当什么时候启动状态,默认值为false,比如:when: mouseArea.pressed,表示当有鼠标按下则启动该状态.
1.2 Change对象
当一个对象的状态发生改变,那么该对象展示给用户的效果也会相应发生改变,所以State支持了多个不同Change对象供我们使用,有如下几种:
PropertyChanges: 改变对象的属性值
StateChangeScript:运行脚本,比如function函数
ParentChange: 改变对象的父类对象.并且改变对象在父类对象下的坐标xy,宽高等属性
AnchorChanges: 改变对象的anchor值
由于帮助手册都有很多示例,所以我们以PropertyChanges为例,来实现一个交通灯
1.3 交通灯示例
我们以交通信号为例,根据其State配置来实现红黄绿灯交错亮灭.效果如下所示:
代码如下所示:
Window { width: 300; height: 400; visible: true; property var delayCnt: 0 Rectangle { anchors.fill: parent gradient: Gradient { GradientStop { position: 0.0; color: "#14148c" } GradientStop { position: 0.699; color: "#14aaff" } GradientStop { position: 0.7; color: "#80c342" } GradientStop { position: 1.0; color: "#006325" } } } Canvas { id: canvas anchors.centerIn: parent width: 80 height: 300 onPaint: { var ctx = getContext("2d") ctx.fillStyle = "black" ctx.fillRect(0,0,width,height-90) ctx.fillRect(width/2 -15,height-90,30,90) } } Column { id: leds anchors.centerIn: canvas anchors.verticalCenterOffset: -45 spacing: 15 state: delayCnt < 5 ? "red" : delayCnt < 10 ? "green" : delayCnt < 14 ? (delayCnt%2==0 ? "green" : "") : "yellow"; Rectangle { id : redLed width: 50; height:50 radius: width/2 color: "red" opacity: 0.2 } Rectangle { id : yellowLed width: 50; height:50 radius: width/2 color: "yellow" opacity: 0.2 } Rectangle { id : greenLed width: 50; height:50 radius: width/2 color: "green" opacity: 0.2 } states: [ State { name: "red" PropertyChanges { target: redLed; opacity: 1} }, State { name: "yellow" PropertyChanges { target: yellowLed; opacity: 1} }, State { name: "green" PropertyChanges { target: greenLed; opacity: 1} } ] } Timer { interval: 500 repeat: true running: true onTriggered: { delayCnt = (delayCnt+1)%18 console.log(delayCnt,leds.state) } } }