QML -->状态与过渡(简单的交通灯)

import QtQuick 2.0

Item{
    id:root;
    state: "go"　　// 设置初始状态
    states: [
        State {　　// 设置每个目标的颜色，并命名
            name: "go"
            PropertyChanges {target: light1; color:"green"}
            PropertyChanges {target: light2; color:"black"}
            PropertyChanges {target: light3; color:"black"}
        },
        State {
            name: "wran"
            PropertyChanges {target: light1; color:"black"}
            PropertyChanges {target: light2; color:"yellow"}
            PropertyChanges {target: light3; color:"black"}
        },
        State {
            name: "stop"
            PropertyChanges {target: light1; color:"black"}
            PropertyChanges {target: light2; color:"black"}
            PropertyChanges {target: light3; color:"red"}
        }
    ]
    transitions: [
        Transition {　　// 设置过渡值
            from: "go";
            to: "wran";
            ColorAnimation { target: light1; properties: "color"; duration: 2000 }
            ColorAnimation { target: light2; properties: "color"; duration: 2000 }
        },
        Transition {
            from: "wran";
            to: "stop";
            ColorAnimation { target: light2; properties: "color"; duration: 2000 }
            ColorAnimation { target: light3; properties: "color"; duration: 2000 }
        },
        Transition {
            from: "stop";
            to: "go";
            ColorAnimation { target: light3; properties: "color"; duration: 2000 }
            ColorAnimation { target: light1; properties: "color"; duration: 2000 }
        }
    ]
    Rectangle {
        id: light1
        x: 25; y: 15
        width: 100; height: width
        radius: width/2
        color: "black"
        MouseArea{
            anchors.fill:parent;
            onClicked:  root.state = (root.state == "go")?"wran":"go";
        }
    }
    Rectangle {
        id: light2
        x: 25; y: 135;
        width: 100; height: width
        radius: width/2
        color: "black"
        MouseArea{
            anchors.fill:parent;
            onClicked: root.state =(root.state == "wran")?"stop":"wran";
        }
    }
    Rectangle {
        id: light3
        x: 25; y: 255;
        width: 100; height: width
        radius: width/2
        color: "black"
        MouseArea{
            anchors.fill:parent;
            onClicked: root.state =(root.state == "stop")?"go":"stop";
        }
    }
}