Qml学习——控件状态

最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章：
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件

---

1 控件状态

Qml的控件基类Item提供了states属性来存放用户的自定义状态，用户定义控件处于指定状态下时的属性，比如下例。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true; width: 200; height: 120

    Rectangle {
        id: rect
        anchors.fill: parent
        color: 'red'

        MouseArea {
            id: rectMouse
            anchors.fill: parent
        }
        
        states: State {
            when: rectMouse.pressed
            PropertyChanges {
                target: rect
                color: 'blue'
            }
        }
    }
}

定义了rect在被按压时，把颜色切换为蓝色。

1.1 State

State类的属性分别是：

名称	类型	描述
changes	list<Change>	保存要应用于此状态的更改
extend	string	状态继承，可以继承某一个State对象，以获取该状态的设置
name	string	状态名称，可以通过设置控件的state属性为状态名，以触发对应状态。
when	bool	当表达式为true时，切换到该状态。

下面是State的使用例程：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: window
    visible: true; width: 200; height: 120

    Rectangle {
        id: rect; height: 50; width: 50
        color: 'red'

        MouseArea {
            id: rectMouse
            anchors.fill: parent
        }

        states: [
            State {
                name: 'change_window'
                PropertyChanges {
                    target: window
                    color: 'red'                //把窗口变红
                }
            },
            State {
                name: 'change_rect'
                extend: 'change_window'         //继承change_window，触发当前状态时，会把窗口变红色
                when: rectMouse.pressed
                PropertyChanges {
                    target: rect
                    color: 'white'              //把矩形变白
                }
            }
        ]
    }

    Button {
        anchors.bottom: parent.bottom
        text: 'name trigger'
        
        /* 用设置名称的方式触发状态切换 */
        onPressed: rect.state = 'change_rect'
        onReleased: rect.state = ''
    }
}

1.2 State的使用场景

b站视频教程上的例程，觉得挺不错，贴在这里记录一下。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true; width: 200; height: 120

    SwipeView {
        id: view
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        anchors.bottomMargin: 25

        Repeater {
            model: 3
            Rectangle {
                color: view.currentIndex == 0 ? 'red' : view.currentIndex == 1 ? 'yellow' : 'white'
                Text {
                    anchors.centerIn: parent
                    text: 'text' + view.currentIndex
                }
            }
        }
    }
    PageIndicator {
        anchors.bottom: view.bottom
        count: view.count
        currentIndex: view.currentIndex
    }

    Button {
        id: btn
        anchors.top: view.bottom
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        states: [
            State {
                when: view.currentIndex === 0
                PropertyChanges {
                    target: btn
                    text: 'page0'
                    onClicked: console.log('000')
                }
            },
            State {
                when: view.currentIndex === 1
                PropertyChanges {
                    target: btn
                    text: 'page1'
                    onClicked: console.log('111')
                }
            },
            State {
                when: view.currentIndex === 2
                PropertyChanges {
                    target: btn
                    text: 'page2'
                    onClicked: console.log('222')
                }
            }
        ]
    }
}