我要评论最近在学习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'
}
}
}
}
发表评论