I have been learning Qml recently, but I am not very familiar with the various uses of Qml and always forget it, so I wrote a few articles to record what I encountered during the learning process.
Learning reference video: https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
Other articles:
Qml learning - dynamic loading of controls
Qml learning - control status
Qml learning - using JavaScript
Qml learning - animation
Qml learning - mouse event handling MouseArea
Qml learning - layout
Qml learning - basic controls
Table of contents
1 Control status
Qml's control base class Item provides states attributes to store user-defined states. User-defined attributes when the control is in a specified state, such as the following example.
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'
}
}
}
}
It is defined that when rect is pressed, the color will be switched to blue.
1.1 State
The properties of the State class are:
| name | type | describe |
|---|---|---|
| changes | list<Change> | Save changes to be applied to this state |
| extend | string | State inheritance, you can inherit a certain State object to obtain the settings of that state |
| name | string | State name, you can set the state attribute of the control to the state name to trigger the corresponding state. |
| when | bool | Switch to this state when the expression is true. |
The following is the usage routine of 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 usage scenarios
The routines in the video tutorials on station b are quite good, so I will post them here to record them.
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')
}
}
]
}
}
