导语

? 从这一篇开始，咱们正式步入Qt Quick的世界，让我们一起来探索这个全新的、有趣的、易于使用的界面开发技术。Qt Quick到底是什么？其实对于新的东西，它的定义往往是模糊的，而且会不断变化，因为它本身在快速发展。所以，对于初学者，一些概念性的东西不要较真，我们只需要知道有这样一个东东，它现在能做什么，然后再去了解它，使用它，等你真正熟悉它的时候，它的定义也就不言自明了。当然，下面我们还是会对基本的概念进行介绍，这里提及这些只是提醒初学者，即便看下面的内容一头雾水也没有关系，后面慢慢会明白的。

? 下面让我们开始！

什么是ＱＭＬ

? QML（Qt Meta-Object Language，Qt元对象语言）是一种用于描述应用程序用户界面的声明式编程语言。它使用一些可视组件，通过这些组件之间的交互来描述用户界面。QML是一种高可读性的语言，可以使组件以动态方式进行交互，并且易于复用和自定义。

? QML允许开发者和设计者进行联合创作，快速创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。QML提供了一个具有高可读性的类似 JSON 的声明式语法，并提供了必要的 JavaScript 语句和动态属性绑定的支持。

? 在Qt 5中，QML语言和引擎框架由Qt QML模块提供。

什么是Qt Quick

? Qt从4.7版本引入了Qt Quick技术。当时对Qt Quick的定义为：

一种高级用户界面技术，可以轻松创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。Qt Quick主要由一个改进的Qt Creator IDE（其中包含了Qt Quick设计器）、新增的简单易学的QML语言和新加入Qt库中名为QtDeclarative的模块等三部分组成。这些使得QML更方便不熟悉C++的开发人员和设计人员使用。

? 从这个定义来看，其实Qt Quick就是Qt引入的全新的界面编程方式（这个说法可能欠妥）的通称。在Qt 5中，Qt Quick被描述为QML类库：Qt Quick是QML的一个数据类型和功能的标准库，包含了可视化类型、交互类型、动画、模型和视图、粒子特效和渲染特效等。在QML应用程序中，可以通过一个简单的import语句来使用该模块提供的所有功能。

? 在Qt 5中，Qt Quick由Qt Quick模块提供。

? 到这里，也许你还是搞不清楚什么是Qt Quick，那么想想C++跟Qt的关系吧，它们类似于QML和Qt Quick的关系。

? 再次提醒，对于初学者，不要被后面众多的概念所束缚，由于是新技术，现在还没有统一的官方的中文翻译标准，而且对于一些名词可能在不同语境有不同的意思，这需要熟练掌握以后才能更好地理解。现在需要做的只是了解，然后接着学下去。

下载安装Qt 5.12

? 这里使用了现在最新的Qt 5.12.0开源版本。下载地址：

? https://download.qt.io/official_releases/qt/5.12/5.12.0

? 我们使用Windows平台进行演示，所以这里选择下载文件：

? qt-opensource-windows-x86-5.12.0.exe

? 在选择组件界面可以选择安装一些模块，为了开发桌面应用、Android应用，要选中MinGW 7.3.0 64-bit和Android ARMv7两个组件，它们分别提供了桌面和Android开发库；还可以选中另外一些组件，比如选择Qt Charts、Qt Data Visualization，后期图表绘制和数据可视化内容需要用到。如下图所示。

创建Qt Quick项目

? 在Qt Creator菜单中选择”文件→新建文件或项目“，会弹出新建对话框，模板选择中Application 一项后面列出了四个现成的Qt Quick应用模板，分别是Qt Quick Application - Empty、Qt Quick Application - Scroll、Qt Quick Application - Stack、Qt Quick Application - Swipe，如下图所示。

? 有IDE使用经验的同学都应该知道，提供模板只是为了减少前期创建项目的工作，所以使用哪个模板其实是无所谓的，里面生成的内容我们都可以自己手动添加。鉴于我们面对初学者，而且后面三个模板会涉及Qt Quick Controls的内容，所以这里就不再演示，有兴趣的同学可以自己创建项目看看效果。下面我们选择Qt Quick Application - Empty，继续教程。

? 接下来是设置项目名称和路径，名称我设置为了helloandroid（项目名称大家可以按照自己的习惯设置，对于初学者，也可以像我这样都使用英文小写字母），路径大家随意设置，注意不要有中文和特殊字符即可。

? 在Build System页面我们保持默认，使用qmake。

? 下面是选择最低需要的Qt版本，这里如果选择的版本过高，那么将源码给低版本的Qt编译，将会出现错误。其实，这里选择什么，对于生成的源码也只是import Qt Quick后面的版本号不同，所以可以随意选择，后面需要使用特定功能的时候，直接在源码中修改import语句后面的版本号即可。现在保持默认Qt 5.9就行。

? 接下来是构建套件选择，现在默认只有一个桌面版的，我们保持默认即可。

? 最后可以选择版本控制系统等，我们这里不需要，不进行设置，单击“完成”按钮完成项目的创建。

? 生成的项目如下图所示。

? 可以看到，这就是一个标准的Qt项目，只不过在资源文件中多了一个main.qml文件，这个文件就是QML文件，当然里面就是用QML语言编写的代码，我们先睹为快：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

? 多么简约易懂的代码啊！其实即便不解释，没有编程经验的同学也应该能看懂是什么意思吧！下面直接按下左下角运行按钮，或者使用Ctrl+R快捷键运行项目，效果如下图所示。

? 当然，界面上什么都没有！这空白的界面就是为了后面让我们发挥想象力和创造力准备的！

运行示例程序

? 了解一个新东西最好的方式，就是看它的实际应用。单击左侧“欢迎”按钮，或者按下Ctrl+1快捷键，来到欢迎界面。在搜索栏输入quick关键字就可以过滤出所有Qt Quick相关的示例程序。

? 大家可以选择自己感兴趣的内容进行单击，比如这里单击clocks程序，就会弹出该项目的介绍文档，可以简单看下，然后需要在项目模式选择构造套件，这里直接单击“Configure Project”即可。

? 打开后可以直接运行程序查看效果，如下图所示。

? 如果大家想对示例程序的源码进行修改，建议先将源码复制一份，然后重新打开复制出来的源码再进行修改，这样即便修改乱了，还可以使用原始的文件。要快速找到源码目录，可以在项目任意文件上右击，然后选择在“Explorer中显示“即可，如下图所示。

结语

? 这一篇我们正式开始了Qt Quick内容的学习，内容虽然不多，但是对于从来没有接触过Qt Quick的新人来说，一些概念可能还是无法很好地理解。现在大家可以多看下示例程序，只看运行效果，看看Qt Quick应用都是什么样子的，都实现了哪些功能，先有个大概认识即可。