Animation（六-状态）

• 通常我们将用户界面描述为一种状态。
• 一个状态定义了一组属性的改变，并且会在 一定的条件下被触发。
• 在这些状态转化的过程中可以有一个过渡，定义了这些属性的动画或者一些附加的动作
• 当进入一个新的状态时，动作也可以被执行。

代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Item {
        id: root
        anchors.fill: parent
        Rectangle{
            id:light1
            x:25
            y:25
            width: 100
            height: width
            radius: width/2
            color: "black"
        }

        Rectangle{
            id:light2
            x:25
            y:135
            width: 100
            height: width
            radius: width/2
            color: "black"
        }

        // 初始化状态为状态 stop
        state :"stop"

        // 状态组
        states: [
            // 第一组状态
            State {
                name: "stop"
                PropertyChanges {
                    target: light1
                    color: "red"
                }
                PropertyChanges {
                    target: light2
                    color: "black"
                }
            },
            // 第二组状态
            State {
                name: "go"
                PropertyChanges {
                    target: light1
                    color: "black"
                }
                PropertyChanges {
                    target: light2
                    color: "green"
                }
            }
        ]

        // 鼠标点击切换状态
        MouseArea{
            anchors.fill: parent
            onClicked: parent.state =
                       (parent.state == "stop")?
                           "go":"stop"
        }
    }

}

上面的代码定义了一个状态组（states），状态组里面定义了两个状态“stop”，“black”，当我们点击屏幕的时候实现状态的切换！

运行>>