Qt开发入门与环境搭建（基础篇）

Qt开发入门与环境搭建（基础篇）

当前专栏里的项目上位机APP是采用Qt开发的，这一章节主要是介绍Qt开发环境的安装，以及Qt开发环境入门的使用。如果你Qt没有任何基础，建议仔细看一遍，大致了解下Qt基础。

如果你想深入学习Qt，能到达自己独立编写代码的程度，可以去单独订阅Qt开发专栏或者下载QT5软件开发入门到项目实战PDF(，从0开始学习。

1.1 Qt是什么？

Qt 是一个功能强大、跨平台的应用程序开发框架，主要用于创建图形用户界面（GUI）应用程序，但它不仅仅局限于GUI编程。它由挪威的奇趣科技（TrollTech）最初于1991年开发，并在后续的发展历程中经历了多次所有权变更，包括诺基亚和Digia等公司接手，现在Qt属于The Qt Company所有。

Qt 主要特点和优势包括：

（1）跨平台：Qt 支持多种操作系统，开发者可以使用同一份源代码在不同平台上编译运行，如Windows、Linux、macOS、Android以及各种嵌入式系统（如RTOS），实现“一次编写，到处编译”。

（2）C++ 开发：Qt 的核心是基于C++编程语言构建，提供了一套丰富的类库，通过面向对象的设计方式简化了开发过程。

（3）图形用户界面：Qt 提供了完整的GUI组件集，包含窗口、按钮、标签、文本框等各种标准控件，以及布局管理器、样式表等功能，使得开发者能够高效地创建美观且功能完善的桌面应用或移动应用界面。

（4）工具链完整：Qt 包含一系列集成开发环境（IDE）和辅助工具，例如Qt Creator是一个全能的跨平台IDE，Qt Designer用于可视化拖拽设计UI界面，Qt Linguist支持国际化资源文件的翻译，还有Qt Assistant和大量文档资源方便开发者的使用。

（5）非GUI功能丰富：除了GUI功能外，Qt 还提供了众多非图形化功能模块，如网络通信、数据库访问、XML处理、多媒体处理（音频视频）、文件I/O、线程与并发处理、OpenGL和3D图形渲染等。

（6）元对象系统：Qt 使用元对象系统（Meta-Object System, MOC）实现了信号与槽机制（Signals and Slots），这是一种高级事件处理机制，允许在不同对象之间安全地进行异步通信。

（7）可扩展性与灵活性：Qt 架构高度灵活，支持插件体系结构，开发者可以根据需要自定义组件并轻松地集成到Qt应用中。

Qt 以其强大的跨平台能力和全面的功能集合成为许多企业和个人开发者选择用来开发高性能、高稳定性的应用程序的重要工具之一，被广泛应用于各类桌面软件、嵌入式设备、移动应用以及服务器端组件等领域。

1.2 Qt版本介绍

在Qt发行版本中将要涉及两个版本：Qt商业授权和Qt开源授权。

（1）Qt商业授权是设计商业软件的开发环境，这些商业软件使用了传统的商业来发布，它包含了一些更新的功能、技术上的支持和大量的解决方案，开发了使用于行业的一些特定的组件，有一些特殊的功能只在商业用户中使用。

（2）Qt开源授权是用来开发开源的软件，它提供了一些免费的支持，并遵循QPL协议。

开放源代码是免费的软件，不牵涉用户的某些权益。任何人都有使用开源软件和参与它的修改的机会，这就意味着其他的人同样可获得你开发的代码。目前 Qt 的开源授权有两种，一种是 GPL 授权，另一种是 LGPL 授权。

1.3 Qt开发环境安装

Qt的中文官网： https://www.qt.io/zh-cn/

image-20221207160550486

image-20221207160606892

QT5.12.6的下载地址：https://download.qt.io/archive/qt/5.12/5.12.6

打开下载链接后选择下面的版本进行下载：

qt-opensource-windows-x86-5.12.6.exe 13-Nov-2019 07:28 3.7G Details

软件安装时断网安装，否则会提示输入账户。

安装的时候，第一个复选框里勾选一个mingw 32编译器即可，其他的不管默认就行，直接点击下一步继续安装。

注意: 如果你要使用其他编译器，或者Android的编译器，你可以直接全选编译器。

image-20221203151742653

选择MinGW 32-bit 编译器：

image-20221203151750344

1.4 开发第一个QT程序

在QT开发过程中，可以手动编写代码也可以使用UI设计师直接拖拽控件的方式编写界面和布局，在实际的开发过程中一般是两种方式结合使用，提高开发效率。

本小节用一个简单的 “Hello QT” 程序介绍一下使用QtCreator新建工程的步骤。

（1）打开QtCreator软件，选择New Project，新建一个工程。

image-20240304134953164

（2）项目模板选择QT Widgets Application

image-20240304135416497

（3）设置项目名称和存放路径

注意：QT项目路径和名称不能出现中文字符。

image-20240304135504345

（4）编译工具套件选择

编译工具套件可以后面自己增加，比如增加Android的。套件是指 Qt 程序从编译链接到运行环境的全部工具和 Qt 类库的集合。

image-20240304135535341

（5）设置生成的类信息

在类信息设置界面选择基类，目前有三种基类：QMainWindow，QWidget，QDialog。在基类里选择QMainWindow，类名和文件名会根据基类自动修改，一般不需要修改，默认即可。

image-20240304135630942

（6）项目管理

在项目管理界面可以设置作为子项目，以及加入版本控制系统。这两个功能暂时用不到，都用默认的 ，然后点击 “完成”。

image-20240304135652922

（7）创建完成

image-20240304135728165

（8） 编辑代码

展开main.cpp文件，添加内容如下：

#include "mainwindow.h"
#include <QApplication>
#include <QDebug>
#include <QLabel>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //MainWindow w;
    //w.show();
    QLabel *label =new QLabel("Hello Qt!");
    label->setGeometry(400,100,100,20);
    label->show();
    return a.exec();
}

代码解析：

1)	#include <QApplication>和 #include <QLabel>是QT的类声明头文件，对于每个QT类都有一个与该类同名的头文件，在这个头文件包含了对该类的定义。
2)	main(int argc, char *argv[]) ：main函数的标准写法。
3)	QApplication a(argc, argv)：创建一个QApplication对象，用于管理应用程序的资源，QApplication类的构造函数需要两个参数。
4)	QLabel *label =new QLabel("Hello Qt!") ：创建QLabel窗口部件，QLabel是一个Qt提供的窗口部件，可以用来显示一行文本。
5)	label->setGeometry(400,100,100,20) ： 设置控件显示的位置。
6)	label->show()：使Qlabel创建的窗口可见，就是显示设置的文本。
7)	return a.exec()：应用程序将控制权传递给QT，让程序进入消息循环。等待可能的菜单，工具条，鼠标等的输入，进行响应。

image-20240304135908750

（9）行程序

运行程序可以点击左下角的三角形符号或者按下快捷键Ctrl+R。

image-20240304135938848

1.5 调试输出

QT中使用QDebug类输出调试信息。主要用于调试代码，类似于std::cout的替代品，支持QT的数据类型。使用前需要包含头文件。

调试输出的分类

示例代码：

qDebug("调试信息输出");
qWarning("一般警告信息输出");
qCritical("严重错误输出");
qFatal("致命错误输出");

qDebug输出的信息会打印到QT软件下边的输出面板。

在上节的HelloQt工程上加上调试输出代码，增加的main.cpp代码如下：

#include "mainwindow.h"
#include <QApplication>
#include <QDebug>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //MainWindow w;
    //w.show();
    qDebug()<<"QT调试信息输出";
    int data_int=8888;
    qDebug()<<data_int;
    float data_float=123.888;
    qDebug()<<data_float;
    return a.exec();
}

运行程序，观察输出的调试信息：

image-20240304140142790

1.6 QT Creator常用的快捷键

掌握一些适用的快捷键，可以提高程序开发的效率。

（1）F1 键，快速切换光标选中的函数或者类的帮助信息，按一次半屏显示，按下两次全屏显示。

（2）F2 键，快速切换到光标选中的函数或者类的源码定义处。

（3）F4键，快速在源文件和头文件之间切换。

（4）Ctrl(按住)+ Tab，快速切换已打开的文件

（5）Ctrl+ I ，缩进光标选中行代码（自动与上层代码对齐）。

（6）Ctrl + / ，快速注释或者取消注释光标选中行。

（7）快速修改全局变量名

鼠标光标选中变量名，按下Ctrl+Shift+R，当变量名称出现红色框表示已经激活全局修改功能。修改一处，整个工程对应变量名称全部会修改。修改完毕之后，光标移开，再按下Ctrl+Shift+R保存修改。

image-20240304140242113

（8）快速修改全局函数名

快捷方式与变量修改一样按下Ctrl+Shift+R，一处修改整个工程对应的函数名称也会跟着改。选中函数后，按下Ctrl+Shift+R后整个工程的对应的函数名会高亮，并且在软件下方弹出修改框。

image-20240304140311742

1.7 QT帮助文档

Qt 帮助文档太多，难以全部翻译成中文，即使翻译了一部分，翻译花的时间太多，翻译更新的时效性也难以保证，最终还是得看英文帮助，QtCreator 集成了帮助系统，查找非常方便。

打开QtCreator，选择菜单栏的最左边的帮助选项，界面如下：

image-20240304140337833

（1）查看Qlabel控件的帮助信息：

image-20240304140357011

1.8 UI设计师使用

上节的Hello QT程序使用纯C++代码编写，这一节使用QT界面设计模式实现与上一节Hello QT程序一样的功能。仿照着上节新创建一个工程。双击打开mainwindow.ui文件，进入到UI设计界面。

（1）拖一个Label控件到编辑区，双击Label控件可以修改文本内容。

image-20240304140517858

（2）运行程序可以点击左下角的三角形符号或者按下快捷键Ctrl+R。

image-20240304140600717

（3）UI设计师界面功能介绍

image-20240304140615717

1.9 按钮控件组

QT Creator UI设计师界面的按钮组截图如下：

image-20240304140809093

以下是对按钮组控件的一些功能介绍：

（1）Push Button按压按钮：最普通的按钮，按(点击)按钮命令计算机执行一些动作，或者回答问题，比如windows开始菜单里的重启，注销，关机等按钮。

（2）Tool Button工具按钮：工具按钮通常是一个集合，一般集成在工具栏里。比如打开，保存，复制，粘贴，剪切等常用的操作。

（3）Radio Button单选按钮：单选按钮通常是两个以上的形式出现在一块，按钮之间有互斥关系，每次只能选中一个。比如：一个人的性别只能选择一个，不能同时是男性又是女性。

（4）Check Box复选框：复选框与单选按钮概念相反，复选框通常表示多个可以同时存在的选项，比如一个人可以同时拥有多个爱好，比如读书、看电影、爬山、游泳等。

（5）Command Link Button命令链接按钮：一般用来打开的窗口或者网页链接。

（6）Dialog Button Box标准按钮盒：标准按钮盒通常用于对话框程序；比如：常见的确认对话框有 “确定”“取消”等标准按钮，Qt 将这些典型的按钮做成标准按钮盒，并将相应的信号加以封装，方便程序员使用。

1.10 布局控件组

开发一个图形界面应用程序，界面的布局影响到界面的美观。前面的程序中都是使用UI界面拖控件，如果有多个按钮，会出现大小难调整、位置难对齐等问题。Qt 提供的“布局管理“就很好的解决了控件摆放的问题。

以下是UI设计师界面的布局相关控件组：

image-20240304140914361

功能介绍：

（1）Vertical Layout：垂直布局

（2）Horizontal Layout：水平布局

（3）Grid Layout：网格布局

（4）Form Layout：窗体中布局

（5）Horizontal Spacers：水平空格，在布局中用来占位。

（6）Vertical Spacer：垂直空格，在布局中用来占位。

image-20240304140956243

1.11 基本布局控件

在UI设计界面添加一个布局控件，然后将需要布局的其他控件放入布局控件中即可完成布局，布局控件可以互相嵌套使用。（本节只介绍基本布局控件的使用）

以下是4种布局控件的效果：

image-20240304141035428

1.12 UI设计师的布局功能

在UI设计界面的左上角有一排快捷的布局选项，使用时选中两个以上的控件，点击其中一种布局方式就可以切换布局。

以下为布局的简单示例图：

image-20240304141115657

（1）为布局的选项。

（2）控件层次图，可以看到控件的布局摆放层次。

如果想要控制某个控件的固定大小，不随着布局改变大小，可以限定最大最小尺寸。选中控件鼠标右键–>大小限定->设置大小。

image-20240304141311256

水平布局与垂直布局：

image-20240304141335977

image-20240304141347209

水平布局将控件按照水平方式摆放，垂直布局将控件按照垂直方式摆放。鼠标拖动红色布局框上的黑色方点，可以调整布局框的大小。随着布局框的尺寸变化，包含的控件高度不会变化，宽度会随着布局框变化。选中其中一个控件然后鼠标右键>点击大小限定，可以限定控件的最大和最小尺寸。

分裂器水平布局与垂直布局：

image-20240304141412287

image-20240304141426088

分裂器方式布局，包含控件的高度和宽度都会随着布局框的拉伸而改变。选中其中一个控件然后鼠标右键>点击大小限定，可以限定控件的最大和最小尺寸。

窗体中布局与栅格布局：

image-20240304141449390

栅格（网格）布局器的基本单元是单元格，而窗体中布局（表单）的基本单元是行。随着布局框的尺寸变化，包含的控件高度不会变化，宽度会随着布局框变化。

设置主窗体布局方式：

设置主窗体的布局方式后，包含在主窗体内的控件会随着窗体的拉伸自动调整大小。

image-20240304141518067

image-20240304141529003