QML State类型，实现状态切换，图片切换等效果（一）

QML中所有基于Item的对象都有一个state属性，依赖于状态驱动的情况下，都可以用State类型的一组属性设置:
1. 显示一些组件而隐藏其他组件；
2. 为用户呈现不同的动作；
3. 开始、停止或者暂停动画；
4. 执行一些需要在新的状态中使用的脚本；
5. 显示一个不同视图或者画面；
举例一：

import QtQuick 2.2

Item {
    width: 300; height: 300

    Rectangle {
        id: signal; anchors.fill: parent; color: "green"
        state: "WARNING"

        Image {id: img; anchors.centerIn: parent;
                source: "warning.png"}

        states: [
            State {
                name: "WARNING"
                PropertyChanges { target: signal; color: "green"}
                PropertyChanges { target: img; source: "warning.png"}
            },
            State {
                name: "CRITICAL"
                PropertyChanges { target: signal; color: "red"}
                PropertyChanges { target: img; source: "critical.png"}
            }
        ]
    }

    Image {
        id: signalswitch
        width: 22; height: 22
        source: "switch.png"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (signal.state == "WARNING")
                    signal.state = "CRITICAL"
                else
                    signal.state = "WARNING"
            }
        }
    }
}

运行效果：

点击刷新按钮后，状态切换

代码地址：https://download.csdn.net/download/hp_cpp/10507189
去掉刷新按钮：

import QtQuick 2.2

Item {
    width: 300; height: 300

    Rectangle {
        id: signal; anchors.fill: parent; color: "green"
        state: "WARNING"

        Image {id: img; anchors.centerIn: parent;
                source: "warning.png"}

        states: [
            State {
                name: "WARNING"
                PropertyChanges { target: signal; color: "green"}
                PropertyChanges { target: img; source: "warning.png"}
            },
            State {
                name: "CRITICAL"
                PropertyChanges { target: signal; color: "red"}
                PropertyChanges { target: img; source: "critical.png"}
            }
        ]

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (signal.state == "WARNING")
                    signal.state = "CRITICAL"
                else
                    signal.state = "WARNING"
            }
        }
    }
}

点击图片后，直接切换。这样就可以实现自己需要的功能，比如两张图片，点击后切换。这在密码框的小眼睛，点击后，隐藏密码和显示密码进行切换。
下一篇，将介绍默认状态和when属性，简化以上代码。实现的效果可以是，鼠标点击切换状态，当鼠标不点击，就恢复默认状态。这样就给我们提供了思路：按钮的鼠标按下、经过切换状态（透明度、图片、形状等），其他时候显示按钮正常状态。