QML中你所不知道的state

  1. 云栖社区>
  2. 博客>
  3. 正文

QML中你所不知道的state

hyman 2011-07-09 00:37:00 浏览1343
展开阅读全文

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

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

效果如下:




网友评论

登录后评论
0/500
评论
hyman
+ 关注