QML format
The following is a QML file
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!"
}
}
}
}
What does the file mean?
The first line: Imports version 2.12 of the QtQuick module
The second line Window : Defines a Window element as the main window of the application and sets the window's attribute
Rectangleelement: Inside the Window element, an Rectangleelement is created as a child element for Display a red rectangle
Textelement: Inside the Rectangle element, another element is created Textto display text, and the attribute element of the text is set
MouseArea: An element is also created MouseAreato handle mouse click events. When the mouse clicks on the rectangle, the The color of the rectangle and the content of the text.
This example describes the basic format of the QML language and the use of some commonly used elements and attributes.
QML basic format
The basic formats of QML language are as follows:
-
Import module: Use the import statement to import the module you need to use, for example,
import QtQuick 2.12it means importing version 2.12 of the QtQuick module. -
Define the window: Use the Window element to define the main window of the application. You can set the properties of the window, such as title, size, etc.
-
Declaring attributes: Use the property statement to declare the attributes of a QML object. You can set the attribute type, default value, etc.
-
Layout elements: Use layout elements (such as Row, Column, etc.) to define the layout of child elements.
-
Add child elements: Use the item element to add child elements to the parent element, and you can set the attributes and signal slots of the child elements.
-
Define signals and slots: Use the signal and slot statements to define the signal and slot functions of the object.
-
Event handling: Use event handlers to handle mouse clicks, keyboard events, etc.
-
Binding properties: Use the bind statement to bind one property to another property or expression.
-
Create an instance: Create an instance of a QML object using create object syntax, such as Rectangle{…}.
-
Set the root element: Use the ApplicationWindow or Window element to set the window as the root element of the application.
-
Run the application: Use QQmlApplicationEngine to load the QML file and run the application.
It can be expanded and adjusted according to actual needs.
QML basic types
In QML, there are the following basic types:
- int: Integer type.
Rectangle {
function myFunction() {
// 输出 debug 信息
console.log("1+1 =" + (1+1));
}
Component.onCompleted: {
myFunction();
}
}
Result:
2. real: floating point type.
3. double: double precision floating point type.
4. string: string type.
Rectangle {
function myFunction() {
// 输出 debug 信息
console.log("helloworld");
}
Component.onCompleted: {
myFunction();
}
}
Result:
5. bool: Boolean type.
6. color: color type, used to represent the RGBA value of color.
7. var: a universal type that can represent any type of data.
Item {
property var myVar: "Hello World"
Component.onCompleted: {
console.log(myVar) // 输出 "Hello World" 到控制台
}
}
Result:
8. date: date type.
Rectangle {
Item {
property var currentDate: new Date()
Component.onCompleted: {
console.log(currentDate.toString()) // 输出当前日期和时间到控制台
}
}
}
Result:
9. point: Point type, used to represent points in two-dimensional space.
Item {
width: 200
height: 200
property var point: Qt.point(50, 100)
Component.onCompleted: {
console.log(point.x, point.y) // 输出点对象的坐标值到控制台
}
}
Result:
10. size: Size type, used to represent width and height.
Item {
width: 200
height: 200
property size var_size: Qt.size(0, 2)
Component.onCompleted: {
console.log(var_size) // 输出点对象的坐标值到控制台
}
}
Result:
11. rect: rectangle type, used to represent the upper left corner coordinates, width and height of the rectangular area.
Item {
width: 200
height: 200
property rect var_rect: Qt.rect(0, 0, 1, 2)
Component.onCompleted: {
console.log(var_rect) // 输出点对象的坐标值到控制台
}
}
result:
Example
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)
}
}
}
}
}
This code is a window application created using the QtQuick library. The width and height of the window are set to 640 and 480, the window is made visible and the title is set to "Hello World".
A rectangular area is created in the window. The width, height, x and y coordinates of the rectangle are set to 200, 200, 50 and 100 respectively. The border color of the rectangle is set to blue. The rectangle also defines a color property called nextColor, which is output to the console when its value changes.
Rectangle also defines a rectangle list property called childRects. The list contains two rectangles, colored red and blue.
A MouseArea mouse area is defined on the rectangular area. The mouse area is the same size as the parent element. When the mouse is clicked within this area, the childRects list is traversed and the color of each rectangle is output to the console.
Result:
The above is the basic usage of QML language