柚子快报邀请码778899分享：QML-Item的state
1、Item有两个状态属性
states用来定义Item有多少种State状态，如长、宽，x、y，颜色，字体大小等等；
state用来指定当前Item的状态是states种的哪一个。
所以我们重点在于知道State是个啥
2、关于State
主要有4个属性：
①、changes：哪种变化，用的最多的是PropertyChanges，除此以外还有【不确定是不是】；
②、name：当前状态的名称；
③、when：可以切换当前状态的时机，如指定当MouseArea点击时切换到本状态；
④、extend：暂未了解
3、关于PropertyChanges
主要有3个属性：
①、target：此属性绑定目标，如绑定一个Rectangle【root】，绑定后就可以在PropertyChanges里设置目标root的属性如width为多少；
②、explicit：设置目标某属性时，是否与目标值绑定，如设置root的width为root2的width，当explicit为true时此时两个width是动态绑定的，root2的width变化了root的跟着变；为false时只是值相等；
③、restoreEntryValues：条件不匹配时是否恢复状态
4、实例1：鼠标点击更改Text的颜色
通过我们自己写js逻辑来实现：text默认为红色，点击后在红色和蓝色之间切换，代码：
import QtQuick 2.6
import QtQuick.Window 2.2
Rectangle {
Text {
id:textTest
font.pixelSize: 30
states: [
State {
name: "redStates"
PropertyChanges {
target: textTest
color:"red"
}
},
State {
name: "blueStates"
PropertyChanges {
target: textTest
color:"blue"
}
}
]
text: qsTr("Hello World")
anchors.centerIn: parent
state: "redStates"
}
MouseArea {
anchors.fill: parent
onClicked: {
textTest.state = textTest.state=="blueStates"?"redStates":"blueStates"
}
}
}
效果：
如上onClicked里的就是我们去写逻辑代码匹配状态，鼠标点击一次颜色切换一次。
5、实例2：通过when来匹配状态
这种状态只会在when条件成立时切换状态，当when条件不匹配时恢复状态，代码：
import QtQuick 2.0
Item {
id: container
width: 300; height: 300
Rectangle {
id: rect
width: 100; height: 100
color: "red"
MouseArea {
id: mouseArea
anchors.fill: parent
}
states: State {
name: "resized";
when: mouseArea.pressed
PropertyChanges { target: rect; color: "blue"; height: container.height }
}
}
}
默认是红色正方形，点击后蓝色矩形，松开后恢复红色正方形。
柚子快报邀请码778899分享：QML-Item的state
推荐链接
发表评论