五、QML——State

比如我们页面某些控件（Button、Label等），需要在不同时候，显示不同的状态。比如鼠标点击按钮，按钮背景颜色和前景色变化。State只是属性变化，并没有动画的设置等相关。

• 鼠标未被按下状态

  

• 鼠标按下状态

  

1 基本概念

state 是从默认配置中批量更改的一组集合。

所有项目都有一个默认状态，该状态定义了对象的默认配置和属性值。通过将 State 项添加到 states 属性中，可以定义新的状态，从而允许项目在不同的配置之间切换。这些配置可以用于应用不同的属性值集或执行不同的脚本。

以下示例显示了一个简单的矩形。在默认状态下，矩形的颜色是黑色。在 “clicked” 状态下，PropertyChanges 对象将矩形的颜色更改为红色。点击 MouseArea 会在默认状态和 “clicked” 状态之间切换矩形的状态，从而切换矩形的颜色（黑色和红色之间）。

import QtQuick

Rectangle {
    id: myRect
    width: 100; height: 100
    color: "black"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
    }

    states: [
        State {
            name: "clicked"
            PropertyChanges { target: myRect; color: "red" }
        }
    ]
}

注意，默认状态是通过空字符串（”“）来引用的。状态通常与 Transitions 一起使用，以在状态更改时提供动画效果。

2 通过when属性变化状态

上面还是通过鼠标事件触发，设定组件的状态。我们可以通过 when 属性，当 when 为 true 的时候，会直接变化到该状态。

例如：当 Button 按下的时候，down 属性为 true 会直接变化到该状态。

如果多个状态，when 同一个时间成立，只会执行第一个when 成立的状态

states: [
    State {
        name: "normal"
        /* State的when属性，这个属性成立的时候，该状态会被执行 */
        when: !control.down

        PropertyChanges {
            target: buttonBackground
            color: "#00000000"
            border.color: "#41cd52"
        }

        PropertyChanges {
            target: textItem
            color: "#41cd52"
        }
    },
    State {
        name: "down"
        /* State的when属性，这个属性成立的时候，该状态会被执行 */
        when: control.down
        PropertyChanges {
            target: textItem
            color: "#ffffff"
        }

        PropertyChanges {
            target: buttonBackground
            color: "#41cd52"
        }
    }
    ]