QML形式
以下はQMLファイルです
import QtQuick 2.12
Window {
id: mainWindow
width: 400
height: 300
visible: true
title: "My QML Application"
Rectangle {
id: rect
width: 200
height: 100
color: "red"
Text {
id: textItem
text: "Hello World!"
font.pixelSize: 20
color: "white"
anchors.centerIn: parent
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
rect.color = "blue"
textItem.text = "Clicked!"
}
}
}
}
ファイルは何を意味しますか?
1 行目: QtQuick モジュールのバージョン 2.12 をインポートします。
2 行目Window : Window 要素をアプリケーションのメイン ウィンドウとして定義し、ウィンドウの属性
Rectangle要素を設定します。 Window 要素内に、RectangleDisplay a red の子要素として要素が作成されます。 Rectangle
Text要素: Rectangle 要素内に、テキストを表示するための別の要素が作成されText、テキストの属性要素が設定されます
MouseArea。 : マウス クリック イベントを処理するための要素も作成されますMouseArea。マウスが四角形をクリックすると、その色が表示されます。四角形とテキストの内容。
この例では、QML 言語の基本形式と、一般的に使用されるいくつかの要素と属性の使用法について説明します。
QML基本フォーマット
QML 言語の基本的な形式は次のとおりです。
-
モジュールのインポート: import ステートメントを使用して、使用する必要があるモジュールをインポートします。たとえば、
import QtQuick 2.12QtQuick モジュールのバージョン 2.12 をインポートすることを意味します。 -
ウィンドウを定義する: Window 要素を使用して、アプリケーションのメイン ウィンドウを定義します。タイトル、サイズなどのウィンドウのプロパティを設定できます。
-
属性の宣言: QML オブジェクトの属性を宣言するには、プロパティ ステートメントを使用します。属性のタイプ、デフォルト値などを設定できます。
-
レイアウト要素: レイアウト要素 (行、列など) を使用して、子要素のレイアウトを定義します。
-
子要素の追加: item 要素を使用して親要素に子要素を追加し、子要素の属性とシグナル スロットを設定できます。
-
信号とスロットの定義: 信号とスロットのステートメントを使用して、オブジェクトの信号とスロットの関数を定義します。
-
イベント処理: イベント ハンドラーを使用して、マウス クリック、キーボード イベントなどを処理します。
-
プロパティのバインド: あるプロパティを別のプロパティまたは式にバインドするには、bind ステートメントを使用します。
-
インスタンスの作成: Rectangle{…} などのオブジェクト作成構文を使用して、QML オブジェクトのインスタンスを作成します。
-
ルート要素を設定する: ApplicationWindow または Window 要素を使用して、ウィンドウをアプリケーションのルート要素として設定します。
-
アプリケーションを実行する: QQmlApplicationEngine を使用して QML ファイルをロードし、アプリケーションを実行します。
実際のニーズに応じて拡張および調整できます。
QMLの基本タイプ
QML には、次の基本的なタイプがあります。
- int: 整数型。
Rectangle {
function myFunction() {
// 输出 debug 信息
console.log("1+1 =" + (1+1));
}
Component.onCompleted: {
myFunction();
}
}
結果:
2. 実数: 浮動小数点型。
3. double: 倍精度浮動小数点型。
4. string: 文字列型。
Rectangle {
function myFunction() {
// 输出 debug 信息
console.log("helloworld");
}
Component.onCompleted: {
myFunction();
}
}
結果:
5. bool: ブール型。
6. color: カラータイプ。色の RGBA 値を表すために使用されます。
7. var: あらゆるタイプのデータを表すことができる汎用タイプ。
Item {
property var myVar: "Hello World"
Component.onCompleted: {
console.log(myVar) // 输出 "Hello World" 到控制台
}
}
結果:
8. date: 日付タイプ。
Rectangle {
Item {
property var currentDate: new Date()
Component.onCompleted: {
console.log(currentDate.toString()) // 输出当前日期和时间到控制台
}
}
}
結果:
9. point: 2 次元空間内の点を表すために使用されるポイント タイプ。
Item {
width: 200
height: 200
property var point: Qt.point(50, 100)
Component.onCompleted: {
console.log(point.x, point.y) // 输出点对象的坐标值到控制台
}
}
結果:
10. size: 幅と高さを表すために使用されるサイズ タイプ。
Item {
width: 200
height: 200
property size var_size: Qt.size(0, 2)
Component.onCompleted: {
console.log(var_size) // 输出点对象的坐标值到控制台
}
}
結果:
11.rect: 長方形タイプ。長方形領域の左上隅の座標、幅、高さを表すために使用されます。
Item {
width: 200
height: 200
property rect var_rect: Qt.rect(0, 0, 1, 2)
Component.onCompleted: {
console.log(var_rect) // 输出点对象的坐标值到控制台
}
}
結果：
例
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle{
width: 200
height: 200
x: 50
y: 100
border.color: "blue"
property color nextColor : "red"
onNextColorChanged:
console.log("nextColor:" + nextColor.toString())
property list<Rectangle> childRects: [
Rectangle{
color:"red"},
Rectangle{
color:"blue"}
]
MouseArea{
anchors.fill: parent
onClicked: {
for(var i = 0; i < 2; ++i){
console.log("color", i, parent.childRects[i].color)
}
}
}
}
}
このコードは、QtQuick ライブラリを使用して作成されたウィンドウ アプリケーションです。ウィンドウの幅と高さは 640 と 480 に設定され、ウィンドウは表示され、タイトルは「Hello World」に設定されます。
ウィンドウ内に長方形の領域が作成されます。長方形の幅、高さ、x 座標、y 座標はそれぞれ 200、200、50、100 に設定されます。長方形の境界線の色は青に設定されます。この四角形は、値が変更されるとコンソールに出力される nextColor と呼ばれる色のプロパティも定義します。
Rectangle は、childRects と呼ばれる四角形リスト プロパティも定義します。リストには、赤と青の 2 つの四角形が含まれています。
MouseArea マウス領域は、長方形の領域上に定義されます。マウス領域は親要素と同じサイズです。この領域内でマウスをクリックすると、childRects リストがトラバースされ、各四角形の色がコンソールに出力されます。
結果:
以上が QML 言語の基本的な使い方です