【QML 快速入门】QML 类型

一、入门示例
二、QML类型

QML 是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。QML 语言描述了用户界面元素的形状和行为。用户界面能够使用 JavaScript 来提供修饰，或者增加更加复杂的逻辑。从这个角度来看它遵循 HTML-JavaScript 模式，但 QML 是被设计用来描述用户界面的，而不是文本文档。

从 QML 元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统，它的 x,y 坐标总是相对应于它的父元素坐标系统。

回到顶部

一、入门示例

让我们开始用一个简单的 QML 文件例子来解释这个语法。

// rectangle.qml

import QtQuick 2.0

// 根元素
Rectangle {
    // 将此根元素命名为root
    id: root

    // 属性 - properties: <name>: <value>
    width: 120
    height: 240
    // color property(颜色属性)
    color: "#D8D8D8"

    // 声明一个嵌套元素（root的子元素）
    Image {
        id: rocket

        // 相对parent的x坐标
        x: (parent.width - width)/2; y: 40

        source: 'assets/rocket.png'
    }

    // root的另一个子元素：文本元素
    Text {
        // 根据id对应元素的属性，设置y坐标
        y: rocket.y + rocket.height + 20

        width: root.width

        horizontalAlignment: Text.AlignHCenter
        text: 'Rocket'
    }
}

import 声明导入了一个指定的模块版本。类似于 C++ 中的 include，在 QML 中使用 import 语句导入模块，模块中包含了各种 QML 类型。
使用 // 可以单行注释，使用 /**/ 可以多行注释，就像 C/C++ 和 JavaScript 一样。
每一个 QML 文件都需要一个根元素，就像 HTML 一样。
一个元素使用它的类型声明，然后使用 {} 进行包含。
元素拥有属性，他们按照 name:value 的格式来赋值。
任何在 QML 文档中的元素都可以使用它们的 id 进行访问（id 是一个任意的标识符）。
元素可以嵌套，这意味着一个父元素可以拥有多个子元素。子元素可以通过访问 parent 关键字来访问它们的父元素。

建议

你会经常使用 id 或者关键字 parent 来访问你的父对象。有一个比较好的方法是命名你的根元素对象 id 为 root，这样就不用去思考你的 QML 文档中的根元素应该用什么方式命名了。

回到顶部

二、QML类型

QML 的类型系统包含了基本类型、 QML 对象类型和 JavaScript 类型，这些类型组成了整个 QML 文档。所有 QML 类型表请参考：qml类型有那些?

2.1 基本类型

在 QML 中将指向简单数据的类型称为基本类型，比如 int 或 string 等。更多请查阅官方文档：QML Basic Types

QML 引擎默认支持某些基本类型，不需要使用 import 语句，而其他一些则需要客户端导入提供它们的模块。下面列出的所有基本类型都可以用作 QML 文档中的 property 类型，但以下情况除外：

list 必须与 QML 对象类型结合使用
enumeration 不能直接使用，因为枚举必须由已注册的QML对象类型定义

QML语言提供的基本类型

下列是 QML 语言本身提供的基本类型：

基本类型	含义
bool	布尔值，值为true/false
double	浮点数，双精度存储
enumeration	命名为枚举的值
int	整数，如0, 10, -20
list	QML对象列表
real	带小数点的数字（实数）
string	自由格式文本字符串
url	资源定位器
var	通用属性类型

QML模块提供的基本类型

QML 模块可以使用更多基本类型扩展 QML 语言。例如，Qt Quick 下面列出了模块提供的基本类型：

基本类型	含义
date	日期值
point	具有 x 和 y 属性的值
rect	具有 x, y, width, height 属性的值
size	具有 width 和 height 属性的值

QtQuick 模块为这些基本类型提供了一些便捷的函数。

2.2 QML 对象类型

QML 对象类型就是可以实例化 QML 对象的类型。

从语法术语来说，QML 对象类型是一种可以用来声明对象的方法，方法是指定类型名称，后跟一组包含该对象属性的花括号。例如，代码中 Window 和 Text 都是对象类型。当对象类型被实例化以后，就被叫做该对象类型的对象，例如 Text 对象类型在代码中被实例化为了 Text 类型的对象 Text，之所以这两个概念容易被混淆，是因为它们是同名的。只需要记住对象类型后面添加 {} 后就被称为对象 ，大家也可以类比 C++ 中的类与实例化。更多请查阅官方文档：QML Object Types

（1）通过 QML 文档定义对象类型

插件编写者和应用程序开发人员可以提供定义为 QML 文档的类型。当 QML 文档对 QML 导入系统可见时，它定义一种类型，该类型由文件名减去文件扩展名标识。

因此，如果存在一个名为 “MyButton.qml” 的 QML 文档，它将提供名为 MyButton 的对象类型定义，该对象类型可在 QML 应用程序中直接使用。

（2）用 Component 内联定义类型

在QML中创建对象类型的另一种方法是使用 Component 类型。这允许在QML文档中内联定义类型，而不是在文件中使用单独的文档 .qml。

Item {
    id: root
    width: 500; height: 500

    Component {
        id: myComponent
        Rectangle { width: 100; height: 100; color: "red" }
    }

    Component.onCompleted: {
        myComponent.createObject(root)
        myComponent.createObject(root, {"x": 200})
    }
}

在这里，myComponent 对象本质上定义了一个匿名类型，可以使用 Component :: createObject 实例化该匿名类型以创建此匿名类型的对象。

请注意，每个 Component 对象声明都会创建自己的组件范围。在 Component 对象声明中使用和引用的任何 id 值在该范围内必须是唯一的，但在声明内联组件的文档中不必唯一。有关更多详细信息，请参见：作用域和命名分辨率。

（3）从C ++定义对象类型

C++ 插件编写者和应用程序开发人员可以通过 Qt QML 模块提供的API注册用 C++ 定义的类型。有多种注册功能，每种注册功能都可以满足不同的用例。有关这些注册功能的详细信息，以及将自定义 C++ 类型公开给 QML 的详细信息，请参阅有关 Defining QML Types from C++ 的文档。

QML 类型系统依赖于安装在已知导入路径中的导入，插件和扩展。插件可以由第三方开发人员提供，并由客户端应用程序开发人员重复使用。请参阅有关 QML modules 的文档，以获取有关如何创建和部署QML扩展模块的更多信息。

2.3 JavaScript 类型

QML 支持 JavaScript 对象和数组，可以通过 var 类型创建并存储任何标准的 JavaScript 类型。var 可以支持的类型：

类型	值表示
bool	true
int	10
double	1.0
real	1.0
string	“This is string”，String(“This is string”)
color	Qt.rgba(0.1, 0.1, 0.1, 0.1)
rect	Qt.rect(100, 100, 100, 100)
point	Qt.point(100, 100)
size	Qt.size(100, 100)
vector3d	Qt.vector3d(100, 100, 100)
数组	[1, “2”, (function() { return “3”; })]
对象
函数	(function() { return “OK”; })