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语言的基本用法