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"
}

这声明了一个类型为矩形的对象，之后是包含该对象定义属性的成对大括号。这种类型的对象由 QtQuick 模块提供，这里定义的属性是该矩形的 width、height 和 color 属性的值（这些属性由矩形类型提供，具体描述参见矩形文档）。

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

import QtQuick 2.0

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

当放在 .qml 文件中并由 QML 引擎加载时，上述代码使用来自 QtQuick 模块的矩形类型创建一个矩形对象

注意：如果对象定义只有少数属性，可以像这样在一行中编写，用分号分隔属性

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

显然，本示例中声明的矩形对象确实非常简单，因为它定义的只是几个属性值。要创建更有用的对象，对象声明可能还定义许多其他类型的属性：这些在 QML 对象属性文档中讨论。此外，对象声明可能还定义子对象，如下所述。

子对象

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

例如，下面的矩形对象声明包含一个渐变对象声明，该声明又包含两个渐变停止点声明

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

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

当此代码被引擎加载时，它会创建一个具有根矩形对象的对象树；该对象有一个渐变子对象，该子对象又有两个渐变停止点子对象。

然而，请注意，这是一个在 QML 对象树上下文中的父子关系，而不是在视觉场景上下文中的父子关系。在视觉场景上下文中，父子关系的概念由 QtQuick 模块中的 Item 类型提供，它是大多数 QML 类型的基类型，因为大多数 QML 对象都是旨在进行视觉渲染的。例如，矩形和文本都是基于 Item 的类型，下面，一个文本对象被声明为矩形对象的视觉子对象

import QtQuick 2.0

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

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

在上面的代码中，当文本对象引用其 parent 值时，它指的是它的 视觉父对象，而不是对象树中的父对象。在这种情况下，它们是相同的：在 QML 对象树的上下文中以及在视觉场景的上下文中，矩形对象都是文本对象的父对象。但是，虽然可以通过修改 parent 属性来更改视觉父对象，但不能从 QML 中更改对象树中对象的父对象。

（此外，请注意，文本对象已被声明，但没有分配给矩形的属性，与之前示例中将渐变对象分配给矩形的 gradient 属性不同。这是因为子项属性已被设置为类型的默认属性，以实现这种更方便的语法。）

有关使用 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
}

在上面的示例中，由于将 opactiy: 0.5 行改为注释，文本对象将具有正常的不透明度。