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!"
}
}
}
}
文件内是啥意思呢？
第一行 ： 导入了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: 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的颜色属性，并在其值改变时输出到控制台。
矩形还定义了一个名为childRects的矩形列表属性。列表中包含两个矩形，颜色分别为红色和蓝色。
在矩形区域上定义了一个MouseArea鼠标区域。鼠标区域的大小与父元素相同。当鼠标在该区域内被点击时，会遍历childRects列表并输出每个矩形的颜色到控制台。
结果：
以上就是QML语言的基本用法