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 对象树。对象是用对象声明（object declarations）定义的，对象声明描述了要创建的对象类型，以及赋予对象的属性。每个对象还可以使用嵌套对象声明来声明子对象。

对象声明由对象类型名称和一组大括号组成。所有属性和子对象都在这些大括号内声明。

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

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 对象将具有正常的不透明度，因为不透明度：0.5 行已变成注释。