QML类型系统

我们都知道，Qt Quick提供了界面开发的另外一种途径，不同于Widget和Graphics使用C++进行开发，Qt Quick采用的是QML。QML是一种描述性的脚本语言，文件格式以.qml结尾，语法格式非常像CSS，支持javascript形式的编程控制。

我们所知的C++的基本数据类型，int、bool、double等，复合类型结构体、类等，相对的QML既然是编程语言，那自然也是有自己的一套数据类型。

QML类型来源主要有以下几种：

• QML自带的基本数据类型
• 注册的C++类型
• qml文件提供的自定义类型
• JS数据类型

基本数据类型

QML本身支持的基本数据类型

bool	Binary true/false value
double	Number with a decimal point, stored in double precision
enumeration	Named enumeration value
int	Whole number, e.g. 0, 10, or -20
list	List of QML objects
real	Number with a decimal point
string	Free form text string
url	Resource locator
var	Generic property type

其中bool、double、int、real、string和C++中的基本类型基本是一致的，就不用过多介绍了

enumeration（枚举）

枚举和C++中的枚举类型一样，是包含若干常量的集合，常用于表示状态，提高代码可读性，支持转成int类型

下面是封装的一个矩形，使用enum表示2中状态对应不同的颜色

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    enum RectType {
        Type1,
        Type2
    }

    property int testType: MyRect.RectType.Type1

    color: testType === MyRect.RectType.Type1 ? "red" : "blue"
}

MyRect {
    testType: MyRect.RectType.Type1
}

url

url类型是指一个资源定位器(例如，像一个文件名)。它可以是绝对的，例如“http://qt-project.org”，也可以是相对的，例如“pics/logo.png”。相对URL是相对于包含组件的URL来解析的

Image { source: "pics/logo.png" }

乍一看，还以为source是string类型呢，其实还是有区别的，可以看下面的例子及说明

 Image {
     source: "pics/logo.png"

     Component.onCompleted: {         
         // source类型无法与string进行比较
         console.log(source == "pics/logo.png")

         // 实用Qt.resovledUrl() 把string转成source类型
         console.log(source == Qt.resolvedUrl("pics/logo.png"))

         // 打印绝对路径 "file:///path/to/pics/logo.png"
         console.log(source.toString())
     }
 }

var（通用类型）

同js一样，支持var的通用类型，脚本语言对类型的定义就比较松散，一般在运行时自动进行动态类型检查。而C++等编译性语言是强类型定义或静态定义，变量的类型需要在程序中指定。

    property var aNumber: 100
    property var aBool: false
    property var aString: "Hello world!"
    property var anotherString: String("#FF008800")
    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)
    property var aVector3d: Qt.vector3d(100, 100, 100)
    property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
    property var anObject: { "foo": 10, "bar": 20 }
    property var aFunction: (function() { return "one"; })

可以看到，var可以引用很多数据类型

不过在使用Qt Creator的时候，很多类型会报警告，警告建议指明类型而不是用var，具体我也不清楚这是为什么哈，当然用是没问题的，就是提示各种警告比较烦

 QML模块提供的复合类型

QML模块提供很对复合类型，基本上是对标Qt支持的内置类型，如size、rect、color、font、point、rect等

date	Date value
point	Value with x and y attributes
rect	Value with x, y, width and height attributes
size	Value with width and height attributes

Qt提供的复合类型可以通过Qt全局对象进行构造

    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)

QML对象类型

QML对象类型是一种可以实例化QML对象的类型，如我们熟知的Rectangle。QML对象类型可以通过注册C++类型，也可以通过新建.qml文件生成

通过qml文件定义QML对象类型

这个是很常见的用法，进行控件封装时采用的就是这种方式，文件名就是类型名称，上面枚举类型的例子定义的文件名称为MyRect.qml，使用时类型为MyRect

文件的命名要遵循一定的规则：

• 必须由字母数字字符或下划线组成
• 必须以大写字母开头

引擎会自动将此文档识别为QML类型的定义，当引擎在解析QML类型名称时在同级目录中搜索时，以这种方式定义的类型可用于同一目录中的其他QML文件。

从C++定义对象类型

这种方式就是之前介绍的注册C++类型，继承自QObject的类注册到QML系统中，就可以像普通的QML类型一样使用了，具体看这里

JS类型

QML引擎支持JavaScript对象和数组。任何标准的JavaScript类型都可以使用通用的var类型来创建和存储。

import QtQuick 2.0

Item {
    property var theArray: []
    property var theDate: new Date()

    Component.onCompleted: {
        for (var i = 0; i < 10; i++)
            theArray.push("Item " + i)
        console.log("There are", theArray.length, "items in the array")
        console.log("The time is", theDate.toUTCString())
    }
}

基本类型的属性更改行为

当数据更改时，使用on+名称+Changed的槽函数可以监听到数据更改，这个特性是非常的实用，QML没C++那样调试方便，有了这个方式可以更方便跟踪数据的变化，方便调试。

property int aNumber: 100
onANumberChanged: {
    console.log("aNumber changed")
}

需要注意，每当基本类型的任何属性发生更改以及属性本身发生更改时，都会发出基本类型的属性更改信号。以下面的代码为例:

Text {
    onFontChanged: console.log("font changed")

    Text { id: otherText }

    focus: true

    //只要font的某个属性值发生改变都会触发onFontChanged
    Keys.onDigit1Pressed: font.pixelSize += 1
    Keys.onDigit2Pressed: font.b = !font.b
    Keys.onDigit3Pressed: font = otherText.font
}

参考：

The QML Type System

QML Basic Types

QML Object Types