QML教程（一）基础语法

原创

已于 2023-01-02 10:20:27 修改 · 3k 阅读

于 2023-01-01 22:51:18 首次发布

本文介绍了QML中的对象声明，包括模块导入、对象树结构、坐标系统和堆叠规则。此外，详细讲解了对象属性的声明，如信号属性、方法属性、枚举属性以及如何赋值。还提到了自定义对象的创建，以MessageLabel为例展示了如何定义和使用自定义组件。

一、导入

模块导入
语法：

import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]

例：

import QtQuick

import QtQuick 2.10

import QtQuick as Quick

目录导入
语法：

import "<DirectoryPath>" [as <Qualifier>]

例：

import "../privateComponents"
import "../textwidgets" as MyModule

二、对象声明

对象
对象声明由其对象类型的名称组成，后跟一组大括号。然后，所有属性和子对象都在这些大括号内声明。例：
```
import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}
```

对象树中的子对象
任何对象声明都可以通过嵌套对象声明定义子对象。这样，任何对象声明都会隐式声明可能包含任意数量的子对象的对象树。例：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

视觉场景中的子对象
视觉场景中父子关系的概念由模块中的 Item 类型提供，这是大多数 QML 类型的基本类型，因为大多数 QML 对象都是要直观呈现的。例如，“矩形”和“文本”都是基于Item的类型

import QtQuick 6.2

Rectangle {
    width: 200
    height: 200
    color: 'red'

    data: [
        Text {
            anchors.centerIn: parent
            text: qsTr("Hello QML")
        }
    ]
}

简写形式

import QtQuick 6.2

Rectangle {
    width: 200
    height: 200
    color: 'red'

    Text {
        anchors.centerIn: parent
        text: qsTr("Hello QML")
    }
}

坐标
Qt Quick中使用的默认视觉坐标系统是项目坐标。这是一个笛卡尔坐标系，（0，0）位于项目的左上角。x 轴向右增长，y 轴向下增长，因此项目的右下角位于坐标（宽度、高度）处。坐标数值是指在其父容器中的坐标。例：
```
Rectangle {
    width: 200
    height: 200
    color: "red"

    Rectangle {
        x: 100
        y: 100
        width: 100
        height: 100
        color: "blue"

        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}
```