QML Book 学习基础4（状态和转换）

目录

states（状态）

Transition（过渡）

---

states（状态）

用户界面的某些部分可以用状态来描述。状态定义一组属性更改，并且可以由特定条件触发。

QML 中定义状态，该元素需要绑定到任何项目元素的数组。State与states状态通过状态名称标识

状态是通过状态名标识的，最简单的形式是由元素对象上的一系列属性更改组成。默认状态由元素对象的初始属性定义，并命名为""（空字符串）。通过为定义状态的元素的状态属性指定新的状态名称，可以更改状态。

Rectangle
{
    id:root
    width: 640
    height: 480
    //signal clicked
    Rectangle
    {
        id:greend_light
        width:100;height: 100;radius:50
        MouseArea{
            id:greend_mouse
            anchors.fill:parent
            onClicked: {root.state = (root.state == "stop" ?root.state = "run":root.state = "stop")}
            }
    }
    Rectangle
    {
        id:red_light
        x:150
        width: 100;height: 100;radius:50

        MouseArea
        {
            id:red_mouse
            anchors.fill:parent
            onClicked:
            {
                root.state = root.state == "run"? "stop":"run"
            }
        }
    }

    state:"stop"
    states: [
        State {
            name: "stop"
            //when:greend_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"green"
            }
            PropertyChanges {
                target: red_light
                color:"black"
            }
        },
        State {
            name: "run"
            //when:red_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"black"
            }
            PropertyChanges {
                target: red_light
                color:"red"
            }
        }
    ]
}

 

控制状态的另一种方法是使用State元素类型的when属性。when属性可以设置为一个表达式，该表达式计算结果为true时，应用状态为false时，恢复原来状态

Rectangle
{
    id:root
    width: 640
    height: 480
    //signal clicked
    Rectangle
    {
        id:greend_light
        width:100;height: 100;radius:50
        MouseArea{
            id:greend_mouse
            anchors.fill:parent
            //onClicked: {root.state = (root.state == "stop" ?root.state = "run":root.state = "stop")}
            }
    }
    Rectangle
    {
        id:red_light
        x:150
        width: 100;height: 100;radius:50

        MouseArea
        {
            id:red_mouse
            anchors.fill:parent
//            onClicked:
//            {
//                root.state = root.state == "run"? "stop":"run"
//            }
        }
    }

    //state:"stop"
    states: [
        State {
            name: "stop"
            when:greend_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"green"
            }
            PropertyChanges {
                target: red_light
                color:"black"
            }
        },
        State {
            name: "run"
            when:red_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"black"
            }
            PropertyChanges {
                target: red_light
                color:"red"
            }
        }
    ]
}

Transition（过渡）

当一种状态转变另一个状态，这个转变过程就是过度，通过过度我们可以看到状态改变过程

Rectangle
{
    id:root
    width: 640
    height: 480
    //signal clicked
    Rectangle
    {
        id:greend_light
        width:100;height: 100;radius:50
        MouseArea{
            id:greend_mouse
            anchors.fill:parent
            onClicked: {root.state = (root.state == "stop" ?root.state = "run":root.state = "stop")}
            }
    }
    Rectangle
    {
        id:red_light
        x:150
        width: 100;height: 100;radius:50

        MouseArea
        {
            id:red_mouse
            anchors.fill:parent
            onClicked:
            {
                root.state = root.state == "run"? "stop":"run"
            }
        }
    }

    state:"stop"
    states: [
        State {
            name: "stop"
            //when:greend_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"green"
            }
            PropertyChanges {
                target: red_light
                color:"black"
            }
        },
        State {
            name: "run"
            //when:red_mouse.pressed
            PropertyChanges {
                target: greend_light
                color:"black"
            }
            PropertyChanges {
                target: red_light
                color:"red"
            }
        }
    ]


    transitions: [
        Transition {
            from: "stop"
            to: "run"
            ColorAnimation{target: [greend_light,red_light];duration: 1000}
        },
        Transition {
            from: "run"
            to: "stop"

            ColorAnimation {
                target: [red_light,greend_light]
                duration: 1000
            }
        }
    ]

}

也可以使用通配符“*”，表示“任何状态”。from:：to: