QML语法基础

翻译参照原文：QML Syntax Basics

QML是一种多范式语言，可以根据对象的属性以及它们如何关联和响应在其他对象中的变化来定义对象。在纯粹的命令式代码中，属性和动作的变化通过一系列逐步处理的语句来表达，与之不同的是，QML的声明式语法将属性和行为的变化直接整合入单个对象中。在需要复杂复杂的定制应用行为的情况下，这些属性定义可以包括命令式代码。

QML源码通常由引擎通过QML文档加载，QML文档是QML代码的独立文档。这些可以用来定义在应用中复用的QML对象类型。注意类型名称必须以大写字母开始，才能在QML文件中声明为QML对象类型。

导入语句

一个QML文档可以在文件头部有一个或者多个导入。一个导入可以是以下任一一种：

    * 已注册类型的版本化命名空间

    * 包含类型定义的QML文档的相对路径    

    * 一个JavaScript文件

JavaScript文件导入在导入后必须是可用的，这样才能访问它们提供的属性和方法。

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

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代码块定义了要创建的对象树。对象使用对象声明来定义，对象声明描述了要创建的对象的类型以及该对象的属性。每个对象都可以使用嵌套对象声明来声明子对象。

对象声明包括其对象类型的名称，后跟一组大括号。所有的属性和子对象都在大括号中声明。

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

Rectangle {

    width: 100

    height: 100

    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引擎加载，以上代码便会使用QtQuick模块提供的Rectangle类型创建一个Rectangle对象：

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

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

很明显，示例中声明的Rectangle对象实际上很简单，只定义了几个属性。为了创建更有用的对象，对象声明可以定义很多其他类型：这些会在QML对象属性文档中论述。另外，对象声明可以定义子对象，接下来会有论述。

子对象

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

比如下例中，Rectangle对象声明下包含Gradient对象声明，Gradient对象声明中又包含两个GrandientStop声明：

import QtQuick 2.0

Rectangle {

    width: 100

    height: 100

    gradient: Gradient { 

       GradientStop { position: 0.0; color: "yellow" }         

       GradientStop { position: 1.0; color: "green" }

     }

}

当这段代码被引擎加载时，会创建一个根节点是Rectangle对象的对象树；Rectangle对象有一个Gradient的子对象，该子对象中又有两个GradientStop子对象。

注意，然而，这个是在QML对象树上下文中的父-子关系，不是在视图上下文中的父-子关系。在视图中的父-子关系概念是QtQuick模块中的Item类型提供的，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对象引用其父值时，它引用的是自己的视图父对象，不是对象树中的父对象。在这种情况下，它们是同一个：Rectangle对象在QML对象树中和视图中都是Text对象的父对象。然而，虽然可以更改父属性来改变视图父级，但无法从QML中改变对象树上下文中的父级。

（另外，注意Text对象在声明时没有被赋值给Rectangle的一个属性，不像之前的例子，把Gradient对象赋值给了矩形的gradient属性。这是因为Itemd的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对象会有默认的透明度，因为opacity: 0.5这行已经变成了一行注释。