QML语法基础

向右看齐 2022-01-27 03:27 282阅读 0赞

# 简述 #

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

QML 源代码通常由引擎通过 QML 文档加载，QML 文档是 QML 代码的独立文档。这些可以用于定义 QML 对象类型，然后可以在整个应用程序中重复使用。

*  简述
 *  导入语句
 *  对象声明
 *  子对象
 *  注释

# 导入语句 #

QML 文档可以在文件的顶部包含一个或多个 import 语句。一个 import 可以是以下任何一种：

*  一个已经注册了类型的版本化命名空间（例如：通过插件）
 *  一个包含 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）和子对象（例如：Text）：在花括号中声明

来看一个简单的对象声明：

Rectangle {
        width: 300
        height: 200
        color: "green"
    }

这声明了一个类型为 Rectangle 的对象（Rectangle 类型由 QtQuick 模块提供），后跟一组包含为该对象定义属性的花括号，定义的属性是矩形的 width （宽度）、height（高度）和 color（颜色）。

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

import QtQuick 2.3
    
    Rectangle {
        width: 300
        height: 200
        color: "green"
    }

当放置到 .qml 文件中并由 QML 引擎加载时，上述代码会使用 QtQuick 模块提供的 Rectangle 类型创建一个 Rectangle 对象：

![这里写图片描述][SouthEast]

**注意：**如果对象定义只有少量的属性，可以写在单行，用分号分隔：

Rectangle { width: 300; height: 200; color: "green" }

显然，这个例子中声明的 Rectangle 对象很简单，因为只定义了几个属性值。为了创建更多有用的对象，对象声明可以定义许多其他类型的属性（在下一节中讨论）。另外，对象声明还可以定义子对象，如下所述。

# 子对象 #

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

例如，下面的 Rectangle 对象声明包含了一个 Gradient 对象声明，Gradient 又包含了两个 GradientStop 声明：

import QtQuick 2.3
    
    Rectangle {
        width: 300
        height: 200
    
        gradient: Gradient {
            GradientStop { position: 0.0; color: "yellow" }
            GradientStop { position: 1.0; color: "green" }
        }
    }

当代码被引擎加载时，会创建一个对象树，在根处有一个 Rectangle 对象；这个对象有一个 Gradient 子对象，Gradient 又有两个 GradientStop 子对象。

![这里写图片描述][SouthEast 1]

然而，这是一个在 QML 对象树的上下文中的父子关系，而不是在视觉场景的上下文中。在视觉场景中的父子关系的概念由来自 QtQuick 模块的 Item 类型提供，QtQuick 模块是大多数 QML 类型的基本类型，因为大多数 QML 对象旨在可视化地呈现。

例如，Rectangle 和 Text 都是基于 Item 的类型，而在下面，一个 Text 对象已经被声明为一个 Rectangle 对象的可视化子对象：

import QtQuick 2.3
    
    Rectangle {
        width: 300
        height: 200
        color: "green"
    
        Text {
            anchors.centerIn: parent
            text: "Hello, QML!"
        }
    }

![这里写图片描述][SouthEast 2]

在上述代码中，当 Text 对象引用它的 parent 值时，指的是它的视觉 parent，而不是对象树中的 parent。在这种情况下，它们是一样的：Rectangle 对象既是 QML 对象树，又是视觉场景的上下文中的 Text 对象的 parent。然而，尽管可以修改 parent 属性以更改视觉父对象，但是对象树的上下文中的一个对象的父对象不能从 QML 更改。

（另外，请注意，Text 对象已经被声明了，而没有赋值给 Rectangle 的属性，这与将 Gradient 对象赋值给 Rectangle 的 gradient 属性的前面的例子不同，这是因为 Item 的 children 属性已经被设置为类型的默认属性来启用这个更方便的语法。）

# 注释 #

在 QML 中，注释的语法与 JavaScript 类似：

*  单行注释：以 `//` 开头，并在行尾结束。
 *  多行注释：以 `/*` 开头，以 `*/` 结尾。

Text {
        text: "Hello QML!"  //一个基本的问候
        /*
            希望这个文本脱颖而出
            给它一个不同的字体和大点的尺寸
        */
        font.family: "Helvetica"
        font.pointSize: 24
    }

引擎在处理 QML 代码时会忽略注释。注释的好处很多：

*  有助于解释代码以提高其可读性，便于日后自己参考或者他人阅读。
 *  用于防止代码执行，这有时对跟踪问题非常有用。

Text {
        text: "Hello QML!"
        //opacity: 0.5
    }

这时，Text 对象将具有正常的透明度，因为行 `opacity: 0.5` 已经被注释掉了。

![这里写图片描述][SouthEast 3]

> 项目验收时，序猿演示功能，猛戳按钮愣是没反应。。。闷头走向工位，打开源码，发现了神奇的 `// TODO`

[http_blog.csdn.net_liang19890820]: http://blog.csdn.net/liang19890820
[SouthEast]: /images/20220127/53947ff58afe43848b94a584c38f6427.png
[SouthEast 1]: /images/20220127/c5fd464a0b1c4dd596c022a99753e72f.png
[SouthEast 2]: /images/20220127/a3edd8d399a2497b894985cbba9a0d1d.png
[SouthEast 3]: /images/20220127/b8c251bfd9a149fbbaa2c7b63c3d69ea.png