QML参考指南01：QML语法基础

QML是一种多范式语言，使您可以根据对象的属性以及它们如何关联和响应其他对象的更改来定义对象。与纯命令式代码相反，在该命令式代码中，属性和行为的更改是通过一系列逐步处理的语句表示的，而QML的声明性语法将属性和行为的更改直接集成到单个对象的定义中。然后，在需要复杂的自定义应用程序行为的情况下，这些属性定义可以包括命令性代码。

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

Import 声明

一个QML文档可能在文件顶部具有一个或多个导入。导入可以是以下任意一项：

· 已注册类型的版本化名称空间（例如，通过插件）

· 包含类型定义作为QML文档的关联目录

· 一个JavaScript文件

导入JavaScript文件时，必须对其进行限定，以便可以访问它们提供的属性和方法。

各种import的通用形式如下：

import Namespace VersionMajor.VersionMinor

import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier

import "directory"

import "file.js" as ScriptIdentifier

例子：

import QtQuick 2.0

import QtQuick.LocalStorage 2.0 as Database

import "../privateComponents"

import "somefile.js" as Script

对象声明

语法上，一块QML代码定义了要创建的QML对象树。使用对象声明定义对象，这些声明描述了要创建的对象的类型以及要赋予该对象的属性。每个对象还可以使用嵌套对象声明来声明子对象。

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

这是一个简单的对象声明：

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

这将声明一个Rectangle类型的对象，然后是一组花括号，其中包含为该对象定义的属性。Rectangle类型是类型由提供QtQuick模块，在这种情况下定义的属性是矩形的的值width，height和color特性。（这些属性由Rectangle类型提供，如Rectangle文档中所述。）

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

import QtQuick 2.0
Rectangle {
      width: 100
      height: 100
      color: "red"
  }

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

注意：如果对象定义仅具有少量属性，则可以将其写在这样的一行上，并用分号分隔属性：

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对象树的上下文中的父子关系，而不是在视觉场景的上下文中。视觉场景中父子关系的概念由模块中的Item类型提供QtQuick，这是大多数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对象引用其父级值时，它是引用其可视父级，而不是对象树中的父级。在这种情况下，它们是相同的：在QML对象树的上下文以及视觉场景的上下文中，Rectangle对象都是Text对象的父对象。但是，尽管可以修改父级属性以更改可视父级，但不能从QML更改对象树上下文中的对象父级。

（另外，请注意，在不将Text对象分配给Rectangle的属性情况下声明了Text对象，这与之前的示例将Gradient对象分配给矩形的gradient属性不同。这是因为Item的children属性已设置为类型的默认值属性以启用此更方便的语法。）

注释

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已变成注释。