894
QML中你所不知道的state
最後一次寫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對象的屬性記錄下來，這些屬性包括顏色，文字，大小等等。
所以，上麵的代碼就能實現不斷點擊不斷交替切換的效果。
效果如下：
最後更新：2017-04-02 06:51:42