QML 语法基础#

描述 QML 语法的基础指南

QML 是一种多范式语言,允许通过对象的属性以及与其他对象的变化关系和响应来定义对象。与仅通过一系列逐步处理的语句表达属性和行为变化的命令式代码相反,QML 的声明式语法将属性和行为变化直接集成到单个对象的定义中。这些属性定义可以包括命令式代码,当需要复杂的自定义应用程序行为时。

QML 源代码通常由引擎通过与 QML 文档 进行加载,这些文档是独立的 QML 代码文档。这些可以用来定义可以跨整个应用程序重用的 QML 对象类型。请注意,类型名称必须以大写字母开头,才能在 QML 文件中作为 QML 对象类型进行声明。

导入语句#

一个 QML 文档可能在上部有一个或多个导入。一个导入可以是以下之一:

  • 一个 QML 模块

  • 包含类型定义的 QML 文档的相对目录

  • JavaScript 文件

导入 JavaScript 文件时必须进行资格认证,以便可以访问它们提供的属性和方法。

各种导入的通用形式如下

  • import <模块标识符> [<版本号>] [as <限定符>]

  • import <目录>"

  • import <JavaScript文件>" [as <脚本标识符>]

示例

  • import QtQuick 2.0

  • import QtQuick.LocalStorage 2.0 as Database

  • import "../privateComponents"

  • import "somefile.js" as Script

请参见QML 语法 - 导入语句文档以获取有关 QML 导入的详细信息。

对象声明#

从语法上讲,一组 QML 代码定义了要创建的 QML 对象的树。对象通过描述要创建的对象类型以及要赋予对象的属性的 对象声明 进行定义。每个对象还可以使用嵌套对象声明声明子对象。

对象声明由其对象类型的名称组成,后跟一组花括号。然后在这些括号中声明所有属性和子对象。

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

这行声明了一个Rectangle类型的对象,其后是一组大括号,包含了为该对象定义的属性。Rectangle类型是QtQuick模块提供的一种类型,本例中定义的属性是该矩形对象的widthheightcolor属性值。(这些都是Rectangle类型提供的属性,具体请参考Rectangle文档。)

如果上面定义的对象是QML文档的一部分,则可以被引擎加载。也就是说,如果源代码加上import语句来导入QtQuick模块(以便使Rectangle类型可用),如下所示:

将以上代码放入.qml文件,并由QML引擎加载后,将使用由QtQuick模块提供的Rectangle类型创建一个Rectangle对象。

../_images/qtqml-syntax-basics-object-declaration.png

注意

如果对象定义的属性较少,可以像这样单行写出,用分号分隔属性。

显然,本例中声明的Rectangle对象非常简单,因为它定义的只是几个属性值。为了创建更有用的对象,对象声明可能还需要定义许多其他类型的属性:请参见QML对象属性文档。此外,对象声明还可能定义子对象,如下文所述。

子对象#

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

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

当这段代码被引擎加载时,将创建一个根节点为Rectangle对象的对象树;该对象有一个Gradient子对象,该子对象又有两个GradientStop子对象。

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

当Text对象在其上面代码中引用其父值时,它是指其视觉父对象,而不是对象树中的父对象。在这种情况下,它们是相同的:在QML对象树和视觉场景中,Rectangle对象都是Text对象的父对象。不过,虽然可以修改父属性来更改视觉父对象,但无法从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 代码时,注释会被引擎忽略。它们对于说明代码段的功能非常有用,无论是为了将来参考,还是为了向他人解释实现方式。

注释还可以用来阻止代码执行,这在跟踪问题时很有用。

在上面的例子中,文本对象将具有正常的不透明度,因为将不透明度: 0.5 这一行转换为了注释。