QtQuick系列教程之开发环境的搭建

简介

Qt与Qt Creator简介

Qt是一个跨平台应用程序和 UI 开发框架。使用 Qt 您只需一次性开发应用程序，无须重新编写源代码，便可跨不同桌面和嵌入式操作系统部署这些应用程序。

Qt Creator 是全新的跨平台Qt IDE，可单独使用，也可与 Qt 库和开发工具组成 一套完整的SDK. 其中包括：高级 C++ 代码编辑器，项目和生成管理工具，集成的上下文相关的帮助系统，图形化调试器，代码管理和浏览工具。

Qt特性

作为一款跨平台C++图形用户界面应用程序开发框架，Qt不只是界面库，Qt还提供了功能丰富的C++类库以及集成开发工具。Qt具有的特性如下：

• 直观的 C++ 类库：模块化 Qt C++ 类库提供一套丰富的应用程序生成块 (block)，包含了构建高级跨平台应用程序所需的全部功能。具有直观，易学、易用，生成好理解、易维护的代码等特点。
• 跨桌面和嵌入式操作系统的移植性：使用 Qt，您只需一次性开发应用程序，就可跨不同桌面和嵌入式操作系统进行部署，而无须重新编写源代码，可以说Qt无处不在（QtEverywhere）。
• 使用单一的源代码库定位多个操作系统；
• 通过重新利用代码可将代码跨设备进行部署；
• 无须考虑平台，可重新分配开发资源；
• 代码不受担忧平台更改影响的长远考虑 ；
• 使开发人员专注于构建软件的核心价值，而不是维护 API 。
• 具有跨平台 IDE 的集成开发工具：Qt Creator 是专为满足 Qt 开发人员需求而量身定制的跨平台集成开发环境 (IDE)。Qt Creator 可在 Windows、Linux/X11 和 Mac OS X桌面操作系统上运行，供开发人员针对多个桌面和移动设备平台创建应用程序。
• 在嵌入式系统上的高运行时间性能，占用资源少。

Qt Creator特性

Qt Creator是跨平台开发框架的 Qt 的集成开发环境（IDE），此 IDE 能够跨平台运行，支持的系统包括 Linux（32 位及 64 位）、Mac OS X 以及 Windows。根据官方描述，Qt Creator 的设计目标是使开发人员能够利用 Qt 这个应用程序框架更加快速及轻易的完成开发任务。Qt Creator支持如下一些特性：

• 复杂代码编辑器：Qt Creator 的高级代码编辑器支持编辑 C++ 和 QML (JavaScript)、上下文相关帮助、代码完成功能、本机代码转化及其他功能。
• 版本控制：Qt Creator 汇集了最流行的版本控制系统，包括 Git、Subversion、Perforce、CVS 和 Mercurial。
• 集成用户界面设计器：Qt Creator 提供了两个集成的可视化编辑器：用于通过 Qt widget 生成用户界面的 Qt Designer，以及用于通过 QML 语言开发动态用户界面的 Qt Quick Designer*。
• 项目和编译管理 ：无论是导入现有项目还是创建一个全新项目，Qt Creator 都能生成所有必要的文件。包括对 cross-qmake 和 Cmake 的支持。
• 桌面和移动平台：Qt Creator 支持在桌面系统和移动设备中编译和运行 Qt 应用程序。通过编译设置您可以在目标平台之间快速切换。
• Qt 模拟器：Qt模拟器是诺基亚 Qt SDK的一部分，可在与目标移动设备相似的环境中对移动设备的 Qt 应用程序进行测试。

Qt Creator的可视化桌面如下图所示，版本的不同，界面也会略有差异。

在这里插入图片描述

Qt历史

• Haavard Nord和Eirik Chambe-Eng于1991年开始开发“Qt”,1994年3月4日创立公司，最早名为Quasar Technologies，然后更名为TrollTech，然后再改为Trolltech，中文名是“奇趣科技”。
• 2008年6月17日被NOKIA收购，以增强其在跨平台软件研发方面的实力，更名为Qt Software。
• 2009年5月11日，诺基亚Qt Software宣布Qt源代码管理系统面向公众开放。为了便于这些内容的管理，Qt Software启用了基于Git和Gitorious开源项目的Web源代码管理系统。
• 2012年8月9日，Digia宣布已完成对诺基亚Qt业务及软件技术的全面收购，并计划将Qt应用到Android、IOS及Window8平台上。
• 2013年7月3日，Digia公司Qt开发团队在其官方博客上宣布Qt 5.1正式版发布，目前Qt最新版为5.14版本。

Qt Quick 简介

Qt Quick是在Qt 4.7引入的一种高级用户界面开发技术，开发人员和设计人员可用它协同创建动画触摸式用户界面和应用程序。它由三部分构成：1.QML：像 JavaScript 一样的声明式语言；2. Qt Creator：在 Qt IDE中的直观工具；3. Qt Declarative：强大的 C++ 模块。

1，主要组成

• QML：基于 JavaScript 的直观语言 ：QML 是一种简便易用的语言，开发人员与用户界面设计人员无需任何 C++ 知识，即可用其描绘出用户界面的外观和功能。
• 面向开发人员和设计人员的共享工具：Qt Creator IDE2.1 版将集成一套开发人员与用户界面设计人员可共享，用以创建和实施 Qt Quick 项目的通用工具。
• 通过 C++ 推动 QML 应用程序：在 Qt 库中的全新Declarative 模块支持生成动态可定制的用户界面，以及通过 C++ 拓展 QML 应用程序。

2，特点

• 快速开发动画式流畅多变的用户界面：通过直观的 QML 语言和一套丰富的 QMLElements——UI 和行为生成块——您可以快速创建出令人印象深刻的用户界面，比您想象的还要快。
• 无需 C++ 知识：如果您具有 JavaScript 的经验或掌握基本的网络技术 (如 HTML 和 CSS)，您就可以通过 QML 取得非常不错的成果。
• 瞄准数以百万计的触摸屏设备：使用 Qt Quick，您可以为数以百万计的 Symbian 和 MeeGo 设备生成应用程序，以及为各种类型的触摸屏消费类电子设备创建用户界面。

3，应用领域

• 汽车信息娱乐系统 UI：Cybercom Group 的用户界面设计人员与开发人员尝试使用 Qt Quick 为其汽车信息娱乐平台设计 UI——并取得了令人满意的结果。
• 社交媒体电视：mixd.tv 使用 Qt Quick 为其跨平台网络电视应用程序创建 UI，其用户可以通过社交媒体频道访问和共享在线视频的内容。
• 联网汽车：Qt 的认证合作伙伴 Digia 很快学会了 Qt Quick 并用其创建出了包括导航、电话、游戏和音乐功能的高级汽车 UI。

Qt 5简介

Qt 5是Qt 跨平台框架的最新版本，其中Qt Quick技术处于核心位置 。同时Qt 5能继续提供给开发人员使用原生QtC++实现精妙的用户体验和让应用程序使用OpenGl/OpenGL ES图形加速的全部功能。通过Qt 5.0提供的用户接口，开发人员能够更快的完成开发任务，针对触摸屏和平板电脑的UI转变与移植需求，也变得更加容易实现.

Qt 5.0是Digia于2012年12月19日发行，Qt 5.0是一个全新的流行于跨平台应用程序和用户界面开发框架的版本，可应用于桌面、嵌入式和移动应用程序。Qt 5 在性能、功能和易用性方面做了极大的提升，并支持 Android 和 iOS 平台Qt 5极大地简化了开发过程，让他们能够更快地为多个目标系统开发具有直观用户界面的程序。它还可以很平滑的过度到新的开发模式来满足触摸屏和 Tablet 的需求。

Qt 5的主要优势包括：图形质量;中低端硬件上的高性能;跨平台移植性;支持 C + + 11; QtWebKit 2 支持的 HTML5；大幅改进QML引擎并加入新的 API；易用性并与 Qt 4 版本兼容。

Qt 5提供了一些基础模块，使用Qt 5开发前需要对这些基础模块又一个简单的了解。

• Qt Core：提供核心的非 GUI 功能，所有模块都需要这个模块。这个模块的类包括了动画框架、定时器、各个容器类、时间日期类、事件、IO、JSON、插件机制、智能指针、图形（矩形、路径等）、线程、XML 等。所有这些类都可以通过 头文件引入。
• Qt Gui：提供 GUI 程序的基本功能，包括与窗口系统的集成、事件处理、OpenGL 和 OpenGL ES 集成、2D 图像、字体、拖放等。这些类一般由 Qt 用户界面类内部使用，当然也可以用于访问底层的 OpenGL ES 图像 API。Qt Gui 模块提供的是所有图形用户界面程序都需要的通用功能。
• Qt Multimedia：提供视频、音频、收音机以及摄像头等功能。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += multimedia。
• Qt Network：提供跨平台的网络功能。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += network。
• Qt Qml：提供供 QML（一种脚本语言，也提供 JavaScript 的交互机制） 使用的 C++ API。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += qml。
• Qt Quick：允许在 Qt/C++ 程序中嵌入 Qt Quick（一种基于 Qt 的高度动画的用户界面，适合于移动平台开发）。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += quick。
• Qt SQL：允许使用 SQL 访问数据库。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += sql。
• Qt Test：提供 Qt 程序的单元测试功能。这些类可以通过 引入，而且需要在 pro 文件中添加 QT += testlib。
• Qt Webkit：基于 WebKit2 的实现以及一套全新的 QML API（顺便说一下，Qt 4.8 附带的是 QtWebkit 2.2）。

开发环境搭建

首先进入QT官网http://download.qt.io/archive/qt/，选择最新版本，目前是5.14，选择对应的版本下载即可。

在这里插入图片描述

下载完成，打开dmg包，继续下一步。macOS组件是必选的，Qt Creator是开发环境必选。除此之外，Qt Creator还支持Android、IOS和Web。安装完成之后，Qt Creator启动后界面 如下。

在这里插入图片描述

新建项目

Qt Creator提供了很多的示例模版。和其他的工具一样，Qt Creator的Hello World也是超级的简单，新建一个带窗体的应用。

在这里插入图片描述

在这里插入图片描述

项目结构

通常，新建一个空工程，项目的目录结构如下图。

在这里插入图片描述

关于QtQuick的项目结构不做过多的介绍，一看名明白，.pro是项目配置文件，main.cpp是项目入口文件，程序通过QQmlApplicationEngine的load()函数加载main.qml文件，源码如下。

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));//加载qml文件的一种方式
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面。main.qml文件内容如下：

import QtQuick 2.6  
import QtQuick.Window 2.3  //加载所需要的模块

Window { //可以理解为主窗体
    visible: true //可见性
    width: 640    //窗体的宽
    height: 480   //窗体的高
    title: qsTr("Hello World")//窗体的标题

    MainForm { //这个名称与MainForm.ui.qml文件的主名称相同，可以理解为一个自定义组件
        anchors.fill: parent  //填充父亲，即填充满Window
        mouseArea.onClicked: {//鼠标点击时的动作
            console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
        }
    }
}