Ich habe kürzlich Qml gelernt, bin aber mit den verschiedenen Verwendungsmöglichkeiten von Qml nicht sehr vertraut und vergesse es immer. Deshalb habe ich ein paar Artikel geschrieben, um aufzuzeichnen, was mir während des Lernprozesses begegnet ist.
Lernreferenzvideo: https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
Weitere Artikel:
Qml-Lernen – dynamisches Laden von Steuerelementen
Qml-Lernen – Kontrollstatus
Qml-Lernen – mit JavaScript
Qml-Lernen – Animation
Qml-Lernen – Mausereignisbehandlung MouseArea
Qml-Lernen – Layout
Qml-Lernen – grundlegende Steuerelemente
Inhaltsverzeichnis
1 Verhalten
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 Animationsgruppe
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 Parallele Animation
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 Übergangsanimation zum Umschalten des Zustands (Übergang)
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'
}
}
}
}
