【Qt之Quick模块】5. QML基本类型及示例用法

QML格式

以下是一个QML文件

import QtQuick 2.12Window {id: mainWindowwidth: 400height: 300visible: truetitle: "My QML Application"Rectangle {id: rectwidth: 200height: 100color: "red"Text {id: textItemtext: "Hello World!"font.pixelSize: 20color: "white"anchors.centerIn: parent}MouseArea {id: mouseAreaanchors.fill: parentonClicked: {rect.color = "blue"textItem.text = "Clicked!"}}}
}

文件内是啥意思呢？
第一行：导入了QtQuick模块的2.12版本
第二行Window ：定义了一个Window元素作为应用程序的主窗口，并设置了窗口的属性
Rectangle元素：在Window元素内部，创建了一个Rectangle元素作为子元素，用于显示一个红色的矩形
Text元素：在Rectangle元素内部，又创建了一个Text元素用于显示文本，并设置了文本的属性
MouseArea元素：还创建了一个MouseArea元素用于处理鼠标点击事件，当鼠标点击矩形时，改变了矩形的颜色和文本的内容。

这个例子呢，描述了QML语言的基本格式和一些常用的元素和属性的使用方式。

QML基本格式

QML语言的基本格式主要有如下：

导入模块：使用import语句导入需要使用的模块，如import QtQuick 2.12表示导入QtQuick模块的2.12版本。
定义窗口：使用Window元素定义应用程序的主窗口，可以设置窗口的属性，如标题、大小等。
声明属性：使用property语句声明QML对象的属性，可以设置属性的类型、默认值等。
布局元素：使用布局元素（如Row、Column等）来定义子元素的布局方式。
添加子元素：使用item元素添加子元素到父元素中，可以设置子元素的属性和信号槽。
定义信号和槽：使用signal和slot语句定义对象的信号和槽函数。
事件处理：使用事件处理器来处理鼠标点击、键盘事件等。
绑定属性：使用bind语句将一个属性绑定到另一个属性或表达式上。
创建实例：使用创建对象语法创建QML对象的实例，如Rectangle{…}。
设置根元素：使用ApplicationWindow或Window元素将窗口设置为应用程序的根元素。
运行应用：使用QQmlApplicationEngine加载QML文件并运行应用程序。

具体可以根据实际需求进行扩展和调整。

QML基本类型

在 QML 中，有以下基本类型：

int：整数类型。

Rectangle {function myFunction() {// 输出 debug 信息console.log("1+1 =" + (1+1));}Component.onCompleted: {myFunction();}
}

结果：
在这里插入图片描述
2. real：浮点类型。
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：点类型，用于表示二维空间中的点。

Item {width: 200height: 200property var point: Qt.point(50, 100)Component.onCompleted: {console.log(point.x, point.y) // 输出点对象的坐标值到控制台}
}

结果：
在这里插入图片描述
10. size：尺寸类型，用于表示宽度和高度。

Item {width: 200height: 200property size var_size: Qt.size(0, 2)Component.onCompleted: {console.log(var_size) // 输出点对象的坐标值到控制台}
}

结果：
在这里插入图片描述
11. rect：矩形类型，用于表示矩形区域的左上角坐标和宽高。

Item {width: 200height: 200property rect var_rect: Qt.rect(0, 0, 1, 2)Component.onCompleted: {console.log(var_rect) // 输出点对象的坐标值到控制台}
}

结果：
在这里插入图片描述

示例

import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{width: 200height: 200x: 50y: 100border.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: parentonClicked: {for(var i = 0; i < 2; ++i){console.log("color", i, parent.childRects[i].color)}}}}
}