Qml中的状态State

• 所有继承自item的元素都有一个state属性，用来描述元素当前的状态
• 都有一个states状态列表的属性，可以往这个属性中添加State元素来增加item的状态
• 元素每一个状态都有一个唯一的名称，默认没有状态
• 如何进行状态切换：即将state属性的值设置为目标状态的名称
• 对于不是item派生的对象，可以通过StateGroup类型来使用状态
• 不同状态间进行切换时，可以使用过渡Transition来增加动画

相关属性

状态

• state : string

即item当前状态的状态名，默认是空字符串，没有状态

Rectangle {
	id: rect

	state: ""
}

状态列表

• states : list<State>

可以看到是一个数组

数组元素是State

State{

}

State元素有以下属性

常用的有name、when、changes

• name : string

即该状态的名字

• when : bool

可以是一个表达式，即这个表达式为真时，切换到该状态

• changes : list<Change> [default]

可以看到是一个数组，数组元素是PropertyChanges

且是默认类型，即不用显式的书写changes属性名，直接在里面追加PropertyChanges元素就行了

下面的例子展示了状态、状态列表、状态元素如何使用

按钮1点击时，切换状态到state1

按钮2按下时，状态切换到state2

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Rectangle{
        id:rect

        anchors.centerIn: parent
        width: 200
        height: 100
        color: "red"

        //当前状态
        state: ""

        //状态列表，是一个数组
        states: [
            //数组元素是State元素
            State {
                name: "state1"//状态名

                //该状态下属性的变化，同样PropertyChanges也可以同时写多个
                PropertyChanges {
                    target: rect//指定目标
                    //下面就是目标在该状态下的值
                    color:"blue"
                    width:300
                }
                PropertyChanges {
                
                }
                //.......
            },
            State {
                name: "state2"
                when: btn2.pressed//指定按钮2在按下时，矩形切换到该状态
                PropertyChanges {
                    target: rect
                    color:"yellow"
                    width:100
                }
            }
        ]
    }

    Button{
        id:btn1

        width: 100
        height: 50
        text: "切换状态1"

        //按钮1按下时，矩形切换到state1，直接修改state属性到对应的状态名就行了
        onClicked: rect.state="state1"
    }

    Button{
        id:btn2

        anchors.left: btn1.right
        anchors.leftMargin: 10
        width: 100
        height: 50
        text: "切换状态2"
    }

}