状态机刚使用,不太熟,如有错误,欢迎指出。
在qml中的界面程序中,界面切换有的比较复杂,使用状态机则会清晰一点。在使用过程中,发现状态机的使用有讲究。
状态机使用1:
对于同一个对象,要使用状态机改变他的状态,,需要放在该对象的内部,然后通过状态的切换,就可以改变器任意的属性,此时,状态的name是有用的,不同的name对应不同的状态。
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Rectangle {
visible: true
width: 640
height: 480
property int i:0
property int j:0
property int k:0
Rectangle
{
id:q1
// state:"w1"
width: 50
height: 50
color: "blue"
anchors{top:parent.top;left:parent.left}
// visible: j
visible: true
states: [
State {
name: "w1"
PropertyChanges{
target:q1
color:"red"
}
// when:{i%2 === 1}
// StateChangeScript{
// name:"u1"
// script: {
// q1.visible = true
// q2.visible = false
// q1.color = "red"
// }
// }
},
State{
name: "w2"
when:{i%2 === 0}
PropertyChanges{
target:q1
color:"blue"
}
// StateChangeScript{
// name:"u2"
// script: {
// q1.visible = false
// q2.visible = true
// q2.color = "black"
// }
// }
}
]
}
// Rectangle
// {
// id:q2
// state:"w2"
// width: 50
// height: 50
// color: "blue"
// anchors{top:parent.top;left:parent.left;leftMargin: 50}
// visible: k
// }
MouseArea
{
anchors.fill: parent
onClicked:
{
i += 1
if(i%2)
{
q1.state = "w1"
}
else
{
q1.state = "w2"
}
console.log(i%2)
}
}
}
状态机使用2:
如果要改变多个对象的状态,或者说多个对象之间进行状态的切换,则需要将state放在最外层,此时,不能使用name来进行状态切换,而要使用when的满足条件来进行触发;不可以使用ProperChange来改变不同的对象的属性,而要使用执行脚本StateChangeScript来进行状态的属性切换。
如果脚本逻辑较复杂,还可以封函数进行调用。
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Rectangle {
visible: true
width: 640
height: 480
property int i:0
property int j:0
property int k:0
states: [
State {
name: "w1"
when:{i%2 === 1}
StateChangeScript{
name:"u1"
script: {
q1.visible = true
q2.visible = false
q1.color = "red"
}
}
},
State{
name: "w2"
when:{i%2 === 0}
StateChangeScript{
name:"u2"
script: {
q1.visible = false
q2.visible = true
q2.color = "black"
}
}
}
]
Rectangle
{
id:q1
state:"w1"
width: 50
height: 50
color: "blue"
anchors{top:parent.top;left:parent.left}
visible: j
}
Rectangle
{
id:q2
state:"w2"
width: 50
height: 50
color: "blue"
anchors{top:parent.top;left:parent.left;leftMargin: 50}
visible: k
}
MouseArea
{
anchors.fill: parent
onClicked:
{
i += 1
if(i%2)
{
q1.state = "w1"
}
else
{
q1.state = "w2"
}
console.log(i%2)
}
}
}
这样,方法二就可以应用在QML程序架构设计(一)中的第二中使用状态机的方法中了。但是这里还会存在一个隐患,当界面切套复杂,深层的子界面的id是很不好获取的。