QML-States状态切换

    Rectangle {
        id:root
        width:100
        height: 100
        state: "normal"

        states: [
            State {
                name: "blue_color"
                PropertyChanges {
                    target: root;
                    color:"blue"
                    height:200
                }
            },
            State {
                name: "red_color"
                PropertyChanges {
                    target: root
                    color:"red"
                    width:200
                }
            },
            State {
                name:"normal"
                PropertyChanges {
                    target: root
                    color:"black"
                    width:100
                    height:100

                }
            }

        ]

        MouseArea {
            anchors.fill: parent
            //点击变为状态 "red_color"
            onPressed: {
                root.state = "red_color"
            }
            //松开变为状态 "blue_color"
            onReleased: {
                root.state = "blue_color"
            }
        }

    }