QML 中的状态

Qt hello – 专注于Qt的技术分享平台

状态描述了当前用户界面样子，QML中一个状态定义了一组属性的改变，并且会在一定条件下被触发。

假设有这么一个场景，红黄绿三个灯，用一个按钮，点击后依次切换三个灯亮起。使用QWidget的思路去实现就是在按钮click对应的槽函数中，依次获取三个button的指针，然后改变其颜色，这样也能实现，但是不够优雅。QML的思路是，全局定义一组状态，然后每个状态来控制具体的属性，使用时只要切换不同状态就可以了，后续修改的话，只需要修改这个全局状态就行，并且三个按钮集中暴露在这组状态中。

一，定义三个灯

//三个灯的按钮Row{anchors.centerIn: parentspacing: 20//红灯Rectangle{id:redwidth: 50height: 50radius: 50color: "red"}//黄灯Rectangle{id:yellowwidth: 50height: 50radius: 50color: "yellow"}//绿灯Rectangle{id:greenwidth: 50height: 50radius: 50color: "green"}}

二，定义一组状态，每个状态控制三个灯具体的属性

//定义一组状态 规定每个状态下 的属性Item{id:rootstate:"red"states: [State {//红灯状态 红灯亮 其它灭name: "red"PropertyChanges {target: red;color:"red"}PropertyChanges {target: yellow;color:"gray"}PropertyChanges {target: green;color:"gray"}},State {name: "yellow"PropertyChanges {target: yellow;color:"yellow"}PropertyChanges {target: red;color:"gray"}PropertyChanges {target: green;color:"gray"}},State {name: "green"PropertyChanges {target: green;color:"green"}PropertyChanges {target: red;color:"gray"}PropertyChanges {target: yellow;color:"gray"}}]}

三，切换时只需要指定当前状态是谁即可。

//依次切换三个状态Button{anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCentertext: qsTr("切换")onClicked: {if(root.state=="red")root.state="yellow"else if(root.state=="yellow")root.state="green"elseroot.state="red"}}

四，效果