最后一次写QML已经是2010年了,最近由于产品需要,重拾QML。之前nokia给我们培训QML的时候,对于state这个概念理解的不是很透彻。最近在做产品前期的QML热身,发现QML中的state有一种神奇的功能:历史记忆效应
state核心就是体现了一个状态机的原理,处在某一状态去改变某些属性以达到目的。关于state如何使用的我这里就不说了,看看nokia的QML文档就知道state如何使用。我这里主要讲讲state的历史记忆效应。
从代码开始入手说起:
import QtQuick 1.0
Rectangle {
width: 360
height: 360
color: "#E4F3F9"
Rectangle{
id: innerRec
width: 60
height: 30
color: "#59A72C"
state: "pre"
anchors.centerIn: parent
Text {
id: txt
anchors.centerIn: parent
text: "Hello QML"
}
MouseArea{
anchors.fill: parent
onClicked: if (innerRec.state == "pre")innerRec.state = "tag";else innerRec.state = "pre"
}
states: [
State {
name: "tag"
PropertyChanges {
target: innerRec;
color: "#5CB4DA"
}
PropertyChanges {
target: txt;
text: "Hello Qt"
}
}
]
}
}
当我们第一次点击巨型区域的时候,该区域会变色,并字体变为“Hello Qt”。按照设计在点击一次恢复到原始状态,也就是“Hello QML”包括颜色。
比较正常的思维就是在点击一次通过priorityChange把颜色以及字体更改回去。
其实,不用。只需要把state属性更改为原始的“pri”就可以。因为每个state,包括原始的state,都会将当前QML对象的属性记录下来,这些属性包括颜色,文字,大小等等。
所以,上面的代码就能实现不断点击不断交替切换的效果。
效果如下: