最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章：
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件
1 Behavior
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
Rectangle {
width: 50; height: 40
color: 'red'
Behavior on width {
NumberAnimation {
duration: 500
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if (parent.width == 50) {
parent.width = 100
} else {
parent.width = 50
}
}
}
}
}
2 Animation
2.1 动画组
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
Rectangle {
id: rect
width: 50; height: 40
color: 'red'
SequentialAnimation {
loops: Animation.Infinite
running: true
NumberAnimation {
property: 'width'
target: rect
to: 100
duration: 500
}
NumberAnimation {
property: 'width'
target: rect
to: 70
duration: 300
}
NumberAnimation {
property: 'width'
target: rect
to: 150
duration: 500
}
NumberAnimation {
property: 'width'
target: rect
to: 50
duration: 500
}
}
}
}
2.1 并行动画
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
Rectangle {
id: rect
width: 50; height: 50
color: 'red'
SequentialAnimation {
loops: Animation.Infinite
running: true
ParallelAnimation {
running: true
NumberAnimation {
property: 'width'
target: rect
to: 100
duration: 500
}
NumberAnimation {
property: 'height'
target: rect
to: 100
duration: 500
}
}
ParallelAnimation {
running: true
NumberAnimation {
property: 'width'
target: rect
to: 50
duration: 500
}
NumberAnimation {
property: 'height'
target: rect
to: 50
duration: 500
}
}
}
}
}
3 State切换的过渡动画(Transition)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true; width: 200; height: 120
Rectangle {
id: rect
width: 50; height: 40
color: 'red'
transitions: [
Transition {
NumberAnimation {
property: 'width'
duration: 500
}
}
]
states: State {
name: 'demo'
PropertyChanges {
target: rect
width: 100
}
}
MouseArea {
anchors.fill: parent
onClicked: {
rect.state = rect.state ? '' : 'demo'
}
}
}
}
