最近 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 は、ユーザー定義の状態を保存するための状態属性を提供します。コントロールが指定された状態にあるときのユーザー定義属性 (次の例のように)。
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 オブジェクトを継承して、その状態の設定を取得できます。 |
| 名前 | 弦 | 状態名を使用すると、コントロールの状態属性を状態名に設定して、対応する状態をトリガーできます。 |
| いつ | ブール | 式が 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 状態の使用シナリオ
ステーション 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')
}
}
]
}
}
