QML之states

今天学习states组件库，主要包括State,PropertyChanges,StateGroup,StateChangeScript,ParentChange,AnchorChanges

1、State

import Qt 4.7 Rectangle { id: myRect width: 100; height: 100 color: "black" MouseArea{ id: mouseArea anchors.fill: parent onClicked: myRect.state == "clicked" ? myRect.state = "" : myRect.state = "clicked"; } states: [ State{ name: "clicked" PropertyChanges { target: myRect; color: "red"} } ] }

 

使用when 表达式触发状态改变.

Rectangle { id: myRect width: 100; height: 100 color: "black" MouseArea{ id: mouseArea anchors.fill: parent } states: State { name: "hidden" when : mouseArea.pressed PropertyChanges { target: myRect opacity: 0 } } }

State通常和Transition一起提供动画效果.

 

2、PropertyChanges

      PropertyChanges提供了当状态变化，而改变组件属性值的功能。

      Rectangle { width: 300 height: 200 Text { id: myText width: 200; height: 200 text: "Hello" color: "blue" states: State { name: "myState" PropertyChanges { target: myText text: "Goodbye" color: "red" } } MouseArea { anchors.fill: parent onClicked: myText.state = "myState" } }

        由以上代码可以看出，PropertyChanges可以绑定多个属性.

       现在有个疑问：可以在一个target上同时改变多个属性，但是怎么在一个State里改变多个target的属性呢？请看下面代码

       Rectangle { id: rect width: 300 height: 200 Text { id: text_en text: "Hello" color: "black" } Text { id: text_cn x: 100 text: "你好" color: "black" } MouseArea { id: myArea anchors.fill: parent } states: [ State { name: "state_change" PropertyChanges { target: text_en text: "Goodbye" color: "red" } PropertyChanges { target: text_cn text: "再见" color: "blue" } when: myArea.pressed } ] } 

       注意：一个State里多个PropertyChanges里的target不要相同，如果第二个PropertyChanges里的target也是text_cn的话，会只执行第一个PropertyChanges的属性值变化

 

     3、ScriptAction

          ScriptAction可以用于在动画的某个点上执行脚本程序,甚至说可以在这调用C++的函数,如:

           Rectangle { id: rect width: 200; height: 200 Image { id: qtImage y: 0 source: "images/qt.png" anchors.horizontalCenter: parent.horizontalCenter SequentialAnimation on y{ loops: Animation.Infinite NumberAnimation { to:rect.height - qtImage.height; easing.type: Easing.OutBounce; duration: 2000} ScriptAction {script: output();} PauseAnimation { duration: 2000 } NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 } } } function output(){ console.log("ddd"); } }

 

4、ParentChange

      ParentChange是指定一个父组件给当前目标组件。然后更改的属性是相对于父组件的。如(sition, size, rotation, and scale)

    Item { width: 300; height: 200 Rectangle { id: redRect x: 50 width: 100; height: 100 color: "red" } Rectangle { id: blueRect x: redRect.width+redRect.x width: 50; height:50; color: "blue" states: State{ name: "reparented" ParentChange { target: blueRect; parent: redRect; x: 10; y:10} } MouseArea { anchors.fill: parent onClicked: blueRect.state = "reparented" } } }

   这段代码将blueRect的x坐标，y坐标移动到父组件的(10,10)，即将blueRect移动到redRect的(10,10)坐标位置

 

   5、AnchorChanges

         AnchorChanges常用于在State中修改组件的anchors，但是不能用于修改组件的margin值，对于margin值我们需要用PropertyChanges修改

      Rectangle { id: window width: 120; height: 120 color: "black" Rectangle { id: myRect width: 50 height: 50 color: "red" } states: State { name: "reanchored" AnchorChanges { target: myRect anchors.top: window.top anchors.bottom: window.bottom } PropertyChanges { target: myRect anchors.topMargin: 10 anchors.bottomMargin: 10 } } MouseArea { anchors.fill: parent onClicked: window.state = "reanchored" } }

 

     AnchorAnimation：

      Item { id: container width: 200;height: 200 Rectangle { id: myRect width: 100; height:100 color: "red" } states: State { name: "reanchored" AnchorChanges { target: myRect; anchors.right: container.right} } transitions: Transition { AnchorAnimation {easing.type: Easing.OutBounce;duration: 1000} } Component.onCompleted: container.state = "reanchored" } 

      Component.onComplete即页面加载完成事件

     Rectangle { Component.onCompleted: console.log("Completed Running!") Rectangle { Component.onCompleted: console.log("Nested Completed Running!") } }