QML states使用

states  属于Item的属性，可以利用这个属性 进行状态的切换，颜色，隐藏或者显示等。

效果：

 

import QtQuick 2.13
import QtQuick.Window 2.13
import QtMultimedia 5.13
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Rectangle{
        id: innerRec
        width: 60
        height: 30
        color: "#59A72C"
        state: "pre"

        anchors.centerIn: parent

        Text {
            id: txt
            anchors.centerIn: parent
            text: "Hello QML"
        }


        MouseArea{
            anchors.fill: parent

            onClicked:
                if (innerRec.state == "pre")
                    innerRec.state = "tag"
                else
                    innerRec.state = "pre"

        }

        states: [
            State {
                name: "tag"
                PropertyChanges {
                    target: innerRec
                    color: "#5CB4DA"
                }
                PropertyChanges {
                    target: txt
                    text: "Hello Qt"
                }
            }
        ]

    }


}