欢迎小伙伴的点评，相互学习、互关必回、全天在线
博主 本着开源的精神交流Qt开发的经验、将持续更新续章，为社区贡献博主自身的开源精神

---

一、什么是 Qt

`
Qt 是一个跨平台的 C++图形用户界面应用程序框架。它为应用程序开发者提供建立艺术级
图形用户界面所需的所有功能。它是完全面向对象的，很容易扩展，并且允许真正的组件编程。

---

1.1、Qt 的发展

Qt 是在 1991 年由奇趣科技公司开发的，于 1996 年进入商业领域，成为全世界范围内数千
种成功的应用程序的基础。它也是目前流行的 Linux 桌面环境 KDE 的基础， KDE 是 Linux 发行
版的主要一个标准组件。 2008 年，奇趣科技公司被诺基亚公司收购， Qt 成为诺基亚旗下的编程
语言工具。从 2009 年 5 月发布的 Qt4.5 版起，诺基亚公司宣布 Qt 源代码库面向公众开放， Qt 开
发人员可通过为 Qt 及与其相关的项目贡献代码、翻译、示例及其他内容，协助引导和塑造 Qt
的未来发展。 2011 年， Digia 公司（芬兰的一家 IT 服务公司）从诺基亚公司收购了 Qt 的商业版权 。
2012 年 8 月 9 日，作为非核心资产剥离计划的一部分，诺基亚公司宣布将 Qt 软件业务正式出售
给 Digia 公司。 2013 年 7 月 3 日，Digia公司 Qt 开发团队在其官方博客上宣布 Qt 5.1 正式版发
布；同年 12 月 11 日，又发布 Qt 5.2 正式版。 2014 年 4 月，跨平台集成开发环境 Qt Creator 3.1.0
正式发布；同年 5 月 20 日，配套发布了 Qt 5.3 正式版。至此， Qt 实现了对于 iOS 、 Android 、 WP
等各种平台的全面支持。 The Qt Company 公司成立后， Qt 版本的升级开始加速，相继推出
Qt 5.4/5.5/5.6/5.7 版，并在官网提供免费下载。 2017 年 1 月 23 日，众所期待的 Qt 5.8 正式版如
期发布，它集中体现了之前各版 Qt 产品的优势，进一步扩展了 Qt 的框架，提升了速度和性能。
尤其对 Qt 的 Qt Quick Controls 2 库及 3D 支待方面进行了重大优化和升级。 2018 年 5 月， Qt 发
布了最新的 Qt 5.11 版。

1.2、Qt 版本说明

Qt 按照不同的版本发行，分为商业版和开源版 。 Qt 商业版为商业软件提供开发环境，它们
提供传统商业软件发行版，并且提供在协议有效期内的免费升级和技术支待服务。而 Qt 开源版
是为了开发自由而设计的开放源代码软件，它提供了和商业版本同样的功能，在 GNU 通用公共
许可证下，它是免费的。

1.3、Qt5开发环境简介

在 Qt 程序开发过程中，除可以通过手写代码实现软件开发功能外，还可以通过 Qt 的 GUI
界面设计器 (Qt Designer) 进行界面的绘制和布局。该工具提供了 Qt 的基本可绘制窗口部件，
如 QWidget、 QLabel 、 QPushButton 和 QVBoxLayout 等。在设计器中用鼠标直接拖曳这些窗口
部件，能够高效、快速地实现 GUI 界面的设计，界面直观形象，所见即所得。 Qt 设计器主界面如下图所示

进入 Qt 设计器主界面后，看到的设计区窗体部分（如下图所示）就是将要设计的顶层窗口部件（顶层窗口部件是其他子窗口部件的载体）。

在 Qt 设计器主界面的左侧”组件箱”栏中列出了经常使用的 Qt 标准窗口部件，可以直
接拖曳相应的窗口部件图标到顶层窗口部件的界面上。同时，也可以将设计的窗口部件组合
（通过布局管理器对 Qt 标准窗口部件进行布局和组合）或放置其他窗口部件的 Qt 容器类（见
”组件箱”栏中的 “Containers” 组）直接拖曳到“组件箱”栏中， Qt 设计器会自动在”组件
箱”栏中生成" Scratchpad" 组，并生成新的自定义的窗口部件。此后，可以像使用 Qt 提供
的标准窗口部件一样使用新创建的窗口部件。
选中 Qt 设计器主界面的“控件" -> "视图”中的全部选项，在 Qt 设计器主界面上可以看
到设计器提供的一些编辑工具子窗口（如图 1.13 所示）。
• 对象查看器 (Object Inspector): 列出了主界面中所有窗口部件，以及各窗口部件的父
子关系和包容关系。
• 属性编辑器 (Property Editor): 列出了窗口部件可编辑的属性。
• Action 编辑器 (Action Editor): 列出了为窗口部件设计的 QAction 动作，通过“添加”或
“删除”按钮可以新建一个可命名的 QAction 动作或删除指定的 QAction 动作。
• 信号和槽编辑器 (Signals & Slots Editor): 列出了在 Qt 设计器中关联的信号和槽，通过
双击列中的对象或信号／槽，可以进行对象的选择和信号／槽的选择。
此外，通过 Qt 设计器的“编辑”菜单，可以打开 Qt 设计器主界面的四种 GUI 窗口部件编
辑模式。
• 控件编辑模式 (Edit Widgets): 可以在 Qt 设计器主界面中添加 GUI 窗口部件并修改它
们的属性和外观。
• 信号／槽编辑模式 (Edit Signals/Slots): 可以在 Qt 设计器主界面中的窗口部件上关联 Qt
已经定义好的信号和槽。
• 伙伴编辑模式 (Edit Buddies): 可以在 Qt 设计器主界面中的窗口部件上建立 QLabel 标
签和其他窗口部件的伙伴关系。
•Tab 顺序编辑模式 (Edit Tab Order): 可以在 Qt 设计器主界面中的窗口部件上设置 Tab
键在窗口部件上的焦点顺序。

二、简单项目设计

2.1、设计器 Qt ~DesJgner 实现

【例】（简单） 采用设计器 Qt Designer 实现计算圆面积，完成如下图所示的功能
首先进行界面设计，然后编写相应的计算圆面积代码。

2.1.1 界面设计

步骤如下。
(1) 单击运行 Qt Creator, 进入 Qt Creator 初始界面。单击上端的
new Project 按钮，或者选择“文件" – “新建文件或项目．．”命令，创建一个新项目，出
现“新建项目”窗口（如下图2.1.1 所示）。
(2) 单击选择项目 “Application” -> “Qt Widgets Application” 选项，单击 “Choose …”
按钮。
编程者需要创建什么样的项目就选择相应的项目选项即可。例如， “Qt Console Application”
选项是创建一个基千控制台的项目。这里因为需要建立一个桌面应用程序，所以选择"Qt Widgets
Application”（如下图2.1.2所示） 。
(3) 选择保存项目的路径并定义自己项目的名字。注意，保存项目的路径中不能有中文。
项目命名没有大小写要求，依据个人习惯命名即可。这里将项目命名为 Dialog, 保存路径为
D:\Qt_1, （如下图2.1.3 所示）。单击“下一步”按钮。
(4) 弹出“粔t Selection” (选择构建套件）界面，系统默认已指定 C++ 的编译器和调试器，
（如下图2.1.4所示），直接单击“下一步”按钮。
(5) 根据实际需要，选择一个“基类”。这里选择 QDialog 对话框类作为基类，这时“类名“
“头文件”“源文件”“界面文件”都出现默认的文件名。注意，对这些文件名都可以根据具体需
要进行相应的修改。默认选中“创建界面“复选框（如下图2.1.5 所示），表示需要采用界面设计器
来设计界面，否则须要利用代码完成界面的设计。
(6) 选择完成后单击“下一步”按钮，相应的文件自动加载到项目文件列表中，如下图2.1.5 所示）。
图2.1.1

图2.1.2

图2.1.3

图2.1.4

图2.1.5

图2.1.6

2.2.1编写相应的计算圆面积代码

首先简单认识一下 Qt 编程环境。找到文件列表中自动添加的 main.cpp 文件，如图 1.21 所示。
每个工程都有一个执行的入口函数，此文件中的 main()函数就是此工程的入口 。
下面详细介绍 main()函数的相关内容：

#include "dialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}

其中，

( a) #include “dialog.h”: 包含了程序中要完成功能的 Dialog 类的定义，在 Dialog 类中封装
完成所需要的功能。注意，使用哪个类就必须将包含该类的头文件引用过来。例如，若用到一
个按钮类，则必须在此处添加一行代码 #include < QPushButton >, 这表明包含了按钮
(QPushButton) 类的定义。

( b) #include < QApplication >: Application 类的定义。在每个使用 Qt 图形化应用程序中都必
须使用一个 QApplication 对象。 QApplication 管理了各种各样的图形化应用程序的广泛资源、基
本设置、控制流及事件处理等。

( c) int main(int argc, char *argv[ ]): 应用程序的入口，几乎在所有使用 Qt 的情况下， main（）
函数只需要在将控制转交给 Qt 库之前执行初始化，然后 Qt 库通过事件向程序告知用户的行为。
所有 Qt 程序中都必须有且只有一个 main()函数。 main()函数有两个参数，即 argc 和 argv ,argc
是命令行变量的数量， argv 是命令行变量的数组。

( d) QApplication a(argc, argv): a 是这个程序的 QApplication 对象。在任何 Qt 的窗口系统
部件被使用之前必须创建 QApplication 对象。它在这里被创建并且处理这些命令行变量。所有
被 Qt 识别的命令行参数都将从 argv 中被移去（并且 argc 也因此而减少）。

( e) w.show( ): 当创建一个窗口部件的时候，默认它是不可见的，必须调用 show( )函数使它
变为可见。

( f) return a.exec( ): 程序进入消息循环，等待可能的输入进行响应。这里就是 main() 函数将
控制权转交给 Qt, Qt 完成事件处理工作，当应用程序退出的时候， exec( )函数的值就会返回。
在 exec()函数中， Qt 接收并处理用户和系统的事件并且将它们传递给适当的窗口部件。

2.2.2 编写相应的计算圆面积代码方式

现在，有两种方式可以完成计算圆面积功能：一是通过触发按钮事件完成（方式 1); 二是
通过触发输入编辑框事件完成（方式 2) 。
方式 1: 在 “lineEdit” 文本框内输入半径值，然后单击按钮，则在 lineEdit_2
中显示对应的圆面积。
编写代码步骤如下。
(1) 在“计算”按钮上按鼠标右键，在弹出的下拉菜单中选择“转到槽…”命令，在“转到
槽”对话框中选择 QAbstractButton 的 “clicked( )” 信号，单击 “OK” 按钮，如图 2.2.1 、图2.2.2 、图2.2.3 、图 2.2.4（对象）所示。
图 2.2.1

打开ui界面后，把相应的控件拉取到编辑框内，如下图2.2 。
图2.2

图2.2.2

图2.2.3

图 2.2.4（对象）

(2) 进入 dialog.cpp 文件中按钮单击事件的槽函数 on_pushButton_clicked()。信号与槽连接的
具体说明后面篇章会说明。在此函数中添加如下代码：

void Dialog::on_pushButton_clicked()
{
    
    bool ok;
    QString tempStr;
    QString valueStr = ui->lineEdit->text();
    int valueInt = valueStr.toInt(&ok);
    double area = valueInt*valueInt*PI;
    ui->lineEdit_2->setText(tempStr.setNum(area));
}

(3) 在 dialog.cpp 文件开始处添加以下语句：

const static double PI = 3.1416;

定义全局变量 PI 。

方法2： 在 “Line Edit” 文本框内输入半径值，不需要单击按钮触发单击事件，直接就在
lineEdit_2 中显示圆面积。
编写代码步骤如下。
(1) 在 “Line Edit” 文本框上按鼠标右键，在弹出的下拉菜单中选择“转到槽…”命令，在
“转到槽”对话框中选择 QLineEdit 的 “textChanged(QString)” 信号，如图 2.2.5 所示。

( 2) 单击 “OK” 按钮，进入 dialog.cpp 文件中的文本编辑框改变值内容事件的槽函数
on_lineEdit_textChanged(const QString &arg1)。在此函数中添加如下代码

void Dialog::on_lineEdit_textChanged(const QString &arg1)
{
    
    bool ok;
    QString tempStr;
    QString valueStr = ui->lineEdit->text();
    int valueInt = valueStr.toInt(&ok);
    double area = valueInt*valueInt*PI;
    ui->lineEdit_2->setText(tempStr.setNum(area));
}

运行此程序，在 “Line Edit” 文本框中输入半径值后，直接在 lineEdit_2 中显示圆的面积
值，完成计算圆面积的功能。

三 、dialog.cpp源码如下

#include "dialog.h"
#include "ui_dialog.h"
const static double PI = 3.1416;
Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    
    ui->setupUi(this);
}

Dialog::~Dialog()
{
    
    delete ui;
}

void Dialog::on_pushButton_clicked()
{
    
    bool ok;
    QString tempStr;
    QString valueStr = ui->lineEdit->text();
    int valueInt = valueStr.toInt(&ok);
    double area = valueInt*valueInt*PI;
    ui->lineEdit_2->setText(tempStr.setNum(area));
}

void Dialog::on_lineEdit_textChanged(const QString &arg1)
{
    
    bool ok;
    QString tempStr;
    QString valueStr = ui->lineEdit->text();
    int valueInt = valueStr.toInt(&ok);
    double area = valueInt*valueInt*PI;
    ui->lineEdit_2->setText(tempStr.setNum(area));
}

四 、效果图 如下

编译后

输入2