02Qml基本类型list与Item的status应用例子

一、list描述

类型list是QML对象的列表，它是QML基本类型之一。

list 值的访问方式与JavaScript数组类似：

1. 使用带有逗号分隔值的[]方括号语法指定值;
2. length 属性提供 list 中的项目数;
3. 使用 [index] 语法访问列表中的值;
4. 使用 push 方法将值动态添加到列表中。

列表只能存储QML对象，不能包含任何基本类型值。（要存储基本类型，请改用var类型。）

二、Item的status——list应用

        Item类型就具有status列表类型的属性，这是后面学习编码最常用的list。如Image的status就有以下枚举类型：

1. Image.Null - no image has been set
2. Image.Ready - the image has been loaded
3. Image.Loading - the image is currently being loaded
4. Image.Error - an error occurred while loading the image        

三、status定义——list应用

    status（状态）的定义可以声明为states: State {...}，也可以声明为：states: [ State { ... } ]两种形式。

1、status定义需要注意的事

多个状态可以声明如下的形式：

// 注意多个状态之间使用逗号不是分号，类似一个数组
states: [ 
	State { ... },	// 状态1
	State { ... },	// 状态2
    State { ... },	// 状态3
    State { ... },	// 状态4
	...
]

对于每个状态Status，需要给定义一个唯一的字符串name；

2、目标绑定PropertyChanges

对于每一个状态State，需要定义一个或者多个PropertyChanges：==>注意P大写

State {
    changes:[
    PropertyChanges {},
    PropertyChanges {}
    ]
}

因为changes是State类型的默认属性，上面代码可以简写为：

State {
    PropertyChanges {},
    PropertyChanges {}
}

 例子：

states: State {
    name: "resized";
    when: mouseArea.pressed;
			
    PropertyChanges { // 一个或者多个PropertyChanges
        target: _rect; 
        color: "blue"; 
        height: container.height;
    }// color、height等都是_rect的属性
}

3、改变状态触发动作或属性变化

        有2种触发状态改变的情况：

1. 在State中定一个when，当发生该事件时触发当当前状态。如上述的when: mouseArea.pressed，当点击按下时触发。
2. 程序主动改变在定义states的控件的state属性，该属性在Item中定义，因此只要是控件类型继承自Item的都存在这个属性。

如下即是这种方式。在onExited、onPressed的时候主动改变rootRect.state的值，触发状态的切换，进而改变rootRect的opacity属性。

Rectangle{
    id: rootRect
    color: "transparent"
    state: "normal"
    MouseArea {
        onExited: {
            rootRect.state = "normal"
        }
        onPressed: {
            rootRect.state = "pressed"
        }
    }
    states: [
        State {
            name: "normal"
            PropertyChanges{ target: rootRect; opacity: 0.6 }
        },
        State {
            name: "pressed"
            PropertyChanges{ target: rootRect; opacity: 1 }
        }
    ]
}

学习参考链接：
https://blog.csdn.net/tanxuan231/article/details/124990331

https://blog.csdn.net/kenfan1647/article/details/122619102