QML进阶教程：四、状态（States）和过渡（Transitions）

状态：

通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变，并且会在一定的条件下被触发。另外在这些状态转化的过程中可以有一个过渡（定义了这些属性的动画或者一些附加的动作，当进入一个新的状态时，动作也可以被执行)。
为了让用户界面看起来更加自然，我们需要使用动画效果来增加一些过渡。一个过渡能够被状态的改变触发。在QML中，使用State元素来定义状态，需要与基础元素对象（Item） 的states序列属性连接。状态通过它的状态名来鉴别，由组成它的一系列简单的属性来改变元素。默认的状态在初始化元素属性时定义，并命名为“”（一个空的字符串） 。状态的改变由分配一个元素新的状态属性名来完成。另一种切换属性的方法是使用状态元素的when属性。when属性能够被设置为一个表达式的结果，当结果为true时，状态被使用。

过渡：

一系列的过渡能够被加入任何元素，一个过渡由状态的改变触发执行。你可以使用属性的from:和to:来定义状态改变的指定过渡。这两个属性就像一个过滤器，当过滤器为true时，过渡生效。你也可以使用“”来表示任何状态。例如from:”“; to:”*”表示从任一状态到另一个任一状态的默认值，这意味着过渡用于每个状态的切换。在这个例子中，我们期望从状态“go”到“stop”转换时实现一个颜色改变的动画。对于从“stop”到“go”状态的改变，我们期望保持颜色的直接改变，不使用过渡。我们使用from和to来限制过渡只在从“go”到“stop”时生效。在过渡中我们给每个灯添加两个颜色的动画，这个动画将按照状态的描述来改变属性。

代码实例：

import QtQuick 2.0

Rectangle {
    id: root
    width: 150
    height: 400
//自定义属性 property <type> <name>:<value> 
    property color black: '#1f1f21'
    property color red: '#fc3d39'
    property color green: '#53d769'  
    property color yellow: '#ffff37'

//颜色渐变
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#2ed5fa" }
        GradientStop { position: 1.0; color: "#2467ec" }
    }



    Rectangle {
        id: light1
        x: 25; y: 15
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    }

    Rectangle {
        id: light2
        x: 25; y: 135
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    } 
    Rectangle {
        id: light3
        x: 25; y: 255
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    }


    // 默认状态为“stop”
    state: "stop"

    states: [
        State {
            name: "stop"
            PropertyChanges { target: light1; color: root.red }
            PropertyChanges { target: light2; color: root.black }
        },
        State {
            name: "go"
            PropertyChanges { target: light1; color: root.black }
            PropertyChanges { target: light2; color: root.green }
        }, 
        State {
            name: "wait"
            PropertyChanges { target: light1; color: root.black }
            PropertyChanges { target: light2; color: root.black }
            PropertyChanges { target: light3; color: root.yellow }
        }
    ]
//注意：在一个状态中，只需要描述属性如何从它们的默认状态改变（而不是前一个状态的改变） 

    // 设置鼠标区域为全局
    MouseArea {
        anchors.fill: parent
        onClicked: { 
                if(parent.state == "stop")
                parent.state = "wait";
                else if(parent.state == "wait")
                parent.state = "go";
                else
                parent.state = "stop" 
                }
    }


    // 添加过渡
    transitions: [
        Transition {
            from: "stop"; to: "go"
//            from: "*"; to: "*"
            ColorAnimation { target: light1; properties: "color"; duration: 2000 }
            ColorAnimation { target: light2; properties: "color"; duration: 2000 }
        },
        Transition {
            from: "wait"; to: "go"
            ColorAnimation { target: light2; properties: "color"; duration: 2000 }
            ColorAnimation { target: light3; properties: "color"; duration: 2000 }
        }
    ]

}