初识QML

简述

前言：

QML(Qt Modelling Language)是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS（参考后文具体例子），但又支持javascript形式的编程控制。我个人认为它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出·ui界面文件，但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。

QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML，一个用户界面被指定为具有属性的对象树。

QML实际上是Qt Quick （Qt4.7.0中的新特性）核心组件之一：Qt Quick是一组旨在帮助开发者创建在移动电话，媒体播放器，机顶盒和其他便携设备上使用越来越多的直观、现代、流畅UI的工具集合。

QML特性：

• QML 是一种用户界面规范和编程语言。它允许开发人员和设计师创建高性能、流畅的动画和视觉吸引人的应用程序。
• QML 提供了一种高度可读、声明性、类似 JSON 的语法，支持与动态属性绑定相结合的命令JavaScript 表达式。
• 像脚本语言一样定义界面的元素

    1.是对 ECMAScript 标准的扩展（参见：JavaScript）
    2.提供了建立一颗 QML 元素对象树的机制
    3. 支持 QML 元素和基于 QObject 的 C++ 对象之间的交互

• QML 包含了一套 QML 元素

    1.图形的和行为的基础组成部分
    2.可以通过 QML 文档来建立更加复杂的元件和 QML 应用

• 可以用来对现有程序扩充，或是编译一个全新的程序

    1.QML 可以使用 C++ 完全扩展

JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。例如：

Rectangle {
id: rect
color: "black"

// following italic type code is javascript
function fun() {
if(rect.color == "black") {
rect.color = "red"
}
else {
rect.color = "black"
}
}

.....
MouseArea {
id: mouse
onClicked: {
fun()
}
}
.....
}

上面function函数内就是javascript，意思是，当方块颜色是黑色的时候点击就变红，反之变黑。你可能想先多了解一下JavaScript，然后再深入学习QML， 而对类似于HTML和CSS等网络技术有一些基本理解也是有用的。但它们都不是必需的。

什么是 Qt Quick？

Qt Quick 是 QML 类型和功能的标准库。包括视觉类型、交互式类型、动画、模型和视图、粒子效果和着色效果，可以使用单个 import 语句访问所有功能。
Qt Quick 全称：Qt User Interface Creation Kit，主要包含以下特征：

• 一个为创建更好的界面的高级 UI 技术
  无需掌握 C++ 技术，JavaScript 知识会有不少帮助

• 针对界面设计人员和开发者

使设计师和开发人员“说同样的语言”
双方可以同时参与迭代开发
无需单独的 Flash 或 PPT UI 原型

设计人员用 Qt Quick，我猜一定是想多了，“自娱自乐”下就行！

QML/Qt Quick 总结

• Qt 的 meta-object 系统提供了 QML 和 C++ 关联的机制

1.Qt 属性机制
2.信号与槽机制

• QML 为开发人员预定义了一套类型

1.可以很容易的使用 QML 进行扩展
2.可以使用 C++ 进行扩展

• Qt Quick 用来为开发人员设计 Qt 应用程序的可视化界面

了解 JavaScript（+ HTML + CSS）是学习 QML 的前提条件，虽然没有严格的要求，但还是建议掌握。

开发工具

Qt Creator是 Qt 开发的首选工具，当然，也可用于 Qt Quick。
Qt 提供了一个 qmlscene 工具（Qt 4.x 为 qmlview），用于运行单独的 QML/JavaScript 程序。

• 让我们可以直接查看 qml 文件，而不必将其加载到 Qt 应用中。
• 主要是用于开发测试
• 提供了一种“dummy”机制，动态的为 QML 提供数据
• 最终的数据将由 Qt/C++ 代码所提供

注意：要将 QML/Qt Quick 界面嵌入到 Qt/C++ 应用程序中，需要使用 Qt4.7 及以上版本（最新官方版本 Qt 5.7）。