qml状态驱动控制界面

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"

        states: [
            State {
                name: "Entered"
                PropertyChanges {
                    target: rect1
                    color: "green"
                }
                PropertyChanges {
                    target:rect1

                    rotation: 45

                }
            },
            State {
                name: "Pressed"
                extend: "Entered" //保留Entered状态
                PropertyChanges {
                    target:rect1
                    scale: 1.2
                }
            },
            State {
                name: "Release"
                extend: "Entered"
                PropertyChanges {
                    target: rect1
                    scale: 1.1

                }
            }

        ]
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: rect1.state = "Entered"
            onExited: rect1.state = "" // 恢复默认
            onPressed: rect1.state = "Pressed"
            onReleased: rect1.state = "Release"
        }
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        y: 120
        color: "green"
        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: rect2
                    color: "red"
                }
            },
            State {
                name: "state2"
                // 当表达式为true时切换 如果有多个状态表达式 取第一个
                when: mousearea.pressed
                PropertyChanges {
                    target: rect2
                    color: "yellow"
                }
            },
            State {
                name: "state3"
                StateChangeScript {
                    name: "myscript"
                    script: {
                        print("StateChangeScript myscript")
                        // 脚本不实时 且修改默认状态 尽量别用
//                        rect2.color = "#666666"
                    }
                }
                PropertyChanges {
                    target: rect2
                    color: "#666666"
                }
            }

        ]
        MouseArea {
            anchors.fill: parent
            id: mousearea
        }
        Button {
            text: "myscript"
//            onClicked: rect2.state = "state3"
            onClicked: {
                if (rect2.state === "state3") {
                    rect2.state = ""
                }
                else if (rect2.state === "") {
                    rect2.state = "state3"
                }
            }

        }
    }
}