【Qt Quick】零基础入门系列之概述（一）

【Qt Quick】概述

|本文大概阅读时间8分钟。

|版权说明：原创文章，如需转载，请标明文章出处。https://blog.csdn.net/weixin_40192195/article/details/108978882

一.前言

Qt Quick作为Qt官方大力推崇的模块，也体现出当下移动端开发的热度，目前市面上针对Qt Quick的讲解较少，本系列将重点讲解Qt Quick的入门学习，零基础也可安心食用。如有问题，请指正，谢谢大家！！！

1.Qt介绍

QT是最早由Qt Company于1991年搭建的跨平台C++库，主要用于图形化用户界面（GUI）的设计开发工作。[官网地址](https://www.qt.io/)：https://www.qt.io/。Qt的开发需要C++的基础，本系列主要介绍Qt Quick，仅需要对C++有基本的了解即可。

Qt开源版采用的开源协议是LGPL协议，是可以用于开发商业闭源的软件。

Qt最大的优点就是其跨平台性，基本上支持了所有主流平台，随着Qt Quick的发展，移动端的开发组件也逐渐丰富。

Qt也封装了大量的模块，方便开发人员进行调用。5.15版本增加了3D模块，在3D模型的开发也未来可期。

Qt Creator是Qt官方的IDE，方便开发人员进行编辑、编译、调试等工作，并且提供了大量的例子，方便用户进行构建和学习。

Qt的帮助文档可以直接进行搜索相关关键词，进行查看。

2.Qt Quick介绍

The Qt Quick module is the standard library for writing QML applications. While the Qt QML module provides the QML engine and language infrastructure, the Qt Quick module provides all the basic types necessary for creating user interfaces with QML. It provides a visual canvas and includes types for creating and animating visual components, receiving user input, creating data models and views and delayed object instantiation.

上述是Qt官方对Qt Quick的介绍，**Qt Quick**是Qt界面开发技术的总称，主要包含QML界面开发语言、JavaScript动态脚本语言、Qt C++ 跨平台封装库。

**QML**作为界面开发语言，和Html标记语言类似，配合JS实现界面的开发，项目复杂的逻辑由C++实现。前后端开发进行了分离，有利于前端和后端开发人员进行快速的开发工作。

二.下载-安装-卸载

1.下载

Qt官网下载速度非常慢，建议使用清华大学镜像站，Qt[下载网址](https://mirrors.tuna.tsinghua.edu.cn/qt/archive/qt/)：https://mirrors.tuna.tsinghua.edu.cn/qt/archive/qt/。

截止到当前时间，Qt的版本更新到了5.15，5.15之前的版本可以直接下载应用程序进行安装。5.15版本之后只提供在线安装和编译安装两种形式。初学者建议下载之前的版本，方便安装使用。

Windows系统下载exe程序，MAC系统下载dmg程序，Linux系统下载run程序。下载完成后进行安装。

2.安装

1）首先进行账户创建，完成后点击下一步。

2）安装地址不能有中文和特殊符号，全英文最安全。

3）需要选择安装组件，按照需要进行安装即可。

3.卸载

1）选择控制面板，点击卸载即可。

三. Qt Quick Application创建

我们了解了Qt和Qt Quick的大致概念，安装好IDE后，让我们开始创建第一个Qt Quick模板。

1.创建空白模板

1）选择Application，Qt Quick Empty模板

2）输入项目名称和路径，英文

3）选择qmake构建系统

4）选择Qt版本

5）翻译文件，可以不选

6）kit选择

7）版本控制，可以不选

8）创建成功，运行

创建成功后，点击左下角小锤子进行构建。快捷键是Ctrl+B。

然后点击左下角的三角形，运行。快捷键是Ctrl+R。

运行结果如下：标题为Hello World

2.窗口输出文字

我们在窗口中心输出Hello World。代码和展示图如下：

---

//main.qml

import QtQuick 2.14

import QtQuick.Window 2.14

Window {

    visible: true

    width: 640

    height: 480

    title: qsTr("Hello World")

// 新增代码，Text元素

    Text {

        anchors.centerIn: parent // 位置锚点设置

        text: qsTr("Hello World") // 文本

        font.pointSize: 21 // 字号调整

    }

}

---