QML 语法基础

QML 是一种多范式语言，它允许通过对象的属性，以及这些属性如何与其他对象建立关联并响应其变化，来定义对象。 与纯粹的命令式代码不同——后者通过一系列按步骤处理的语句来表达属性和行为的变化——QML 的声明式语法将属性和行为的变化直接集成到各个对象的定义中。当需要复杂的自定义应用程序行为时，这些属性定义还可以包含命令式代码。

QML 源代码通常由引擎通过 QML文档加载，这些文档是独立的 QML 代码文档。它们可用于定义QML 对象类型，这些类型随后可在整个应用程序中重复使用。请注意，类型名必须以大写字母开头，才能在 QML 文件中被声明为 QML 对象类型。

导入语句

QML 文档的文件开头可以包含一个或多个导入语句。导入语句可以是以下任意一种：

• 一个 QML 模块
• 包含作为 QML 文档的类型定义的相对目录
• 一个 JavaScript 文件

导入 JavaScript 文件时必须使用全限定名，以便能够访问其提供的属性和方法。

各种导入的通用形式如下：

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

示例：

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

有关 QML 导入的详细信息，请参阅《QML 语法——导入语句》文档。

对象声明

从语法上讲，一段 QML 代码定义了一个待创建的 QML 对象树。对象通过对象声明来定义，该声明描述了待创建对象的类型以及要赋予该对象的属性。每个对象还可以通过嵌套的对象声明来声明子对象。

一个对象声明由对象类型的名称组成，后跟一组大括号。随后，所有属性和子对象均声明在这些大括号内。

以下是一个简单的对象声明：

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

这声明了一个类型为Rectangle 的对象，后面跟有一对大括号，其中包含为该对象定义的属性。Rectangle 类型是由QtQuick 模块提供的，此处定义的属性是矩形width 、height 和color 属性的值。（这些属性是由Rectangle 类型提供的，如Rectangle 文档中所描述的。）

如果上述对象是QML 文档的一部分，则引擎可以加载它。也就是说，如果源代码中添加了导入语句，用于导入QtQuick 模块（以便使用Rectangle 类型），如下所示：

import QtQuick 2.0

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

当上述代码被放入.qml 文件中并由QML引擎加载时，它将使用QtQuick 模块提供的Rectangle 类型创建一个Rectangle 对象：

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

显然，本示例中声明的Rectangle 对象确实非常简单，因为它仅定义了几个属性值。要创建更实用的对象，对象声明可以定义许多其他类型的属性：这些内容在《QML 对象属性》文档中有详细说明。此外，对象声明还可以定义子对象，相关内容将在下文讨论。

子对象

任何对象声明都可以通过嵌套的对象声明来定义子对象。通过这种方式，任何对象声明都会隐式地声明一个对象树，该树可能包含任意数量的子对象。

例如，下面的Rectangle 对象声明包含一个Gradient 对象声明，而后者又包含两个GradientStop 声明：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

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

当引擎加载此代码时，会创建一个以Rectangle 对象为根节点的对象树；该对象有一个Gradient 子对象，而该子对象又包含两个GradientStop 子对象。

但请注意，这是在 QML 对象树上下文中的父子关系，而非在视觉场景上下文中。视觉场景中的父子关系概念由QtQuick 模块中的Item 类型提供，该类型是大多数 QML 类型的基类，因为大多数 QML 对象都旨在进行视觉渲染。 例如，Rectangle 和Text 都是基于Item 的类型；在下文中，一个Text 对象已被声明为Rectangle 对象的视觉子对象：

import QtQuick 2.0

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

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

当上述代码中的Text 对象引用其parent 值时，它指的是其视觉父对象，而非对象树中的父对象。 在此情况下，二者是同一概念：无论是在 QML 对象树的上下文中，还是在视觉场景的上下文中，Rectangle 对象都是Text 对象的父对象。然而，虽然可以通过修改parent 属性来更改视觉父对象，但在对象树的上下文中，对象的父对象无法通过 QML 进行更改。

（此外，请注意，Text 对象是在未将其赋值给Rectangle 的任何属性时声明的，这与前面的示例不同——前面的示例将Gradient 对象赋值给了矩形的gradient 属性。这是因为Item 的children 属性已被设置为该类型的默认属性，从而支持这种更便捷的语法。）

有关使用Item 类型实现视觉父子关系的概念，请参阅视觉父子关系文档。

注释

QML 中注释的语法与 JavaScript 类似：

• 单行注释以 // 开头，并延续至行尾。
• 多行注释以 /* 开头，以 */ 结尾。

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

在处理 QML 代码时，引擎会忽略注释。注释有助于解释代码段的功能，无论是为了日后参考，还是向他人说明实现原理。

注释还可以用于阻止代码执行，这在排查问题时有时会很有帮助。

Text {
    text: "Hello world!"
    //opacity: 0.5
}

在上例中，Text 对象将具有正常的不透明度，因为那行opacity: 0.5已被转换为注释。