QML中你所不知道的state

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对象的属性记录下来，这些属性包括颜色，文字，大小等等。

所以，上面的代码就能实现不断点击不断交替切换的效果。

效果如下：