【Qt】3.认识 Qt Creator 界面

---

1. 认识 Qt Creator 界面

1.1 左边栏

在编辑模式下，左边竖排的两个窗口叫做 “边栏” 。① 是项目文件管理窗口，② 是打开文件列表窗口。

在 QtCreator 菜单 “控件” -------> “Show Left Sidebar”，或者使用快捷键：“Alt + 0” 可以控制边栏的显示和隐藏。

边栏里的窗口数目可以增加，边栏子窗口标题栏有一排小按钮，最右边的是关闭按钮，倒数第二个是增加分栏按钮，可以添加多个边栏子窗口。

边栏子窗口标题栏第一个控件是组合框，可以选择该子窗口的功能视图类型，目前可以选择 8 个视图类型：

---

1.2 代码编辑区

①和②：导航按钮 “返回” 和 “前进”，这与网页浏览器的前进和后退按钮类似，可以在之前浏览的多个代码文件或一个代码文件里多个位置之间快速切换。

③：标识当前显示的文件是只读还是可写，一般都是可写的。

④：文件类型图标，当前显示文件的类型，这个控件其实是一个菜单按钮，点击可以弹出丰富的文件处理功能菜单。

⑤：打开的文件名，可以在多个打开的文件之间选择切换，与边栏的 “打开文档” 视图是对应的。

⑥：关闭当前显示的文档。

⑦：为当前显示的文件添加额外的C++预处理指令，一般用不着。

⑧：选择符号，可以在当前显示的文件里多个函数、类、成员变量等之前快速切换，与边栏"大纲"视图是对应的。

⑨：编辑区光标的行号和列号。

⑩：代码编辑区分栏，可以增加多个编辑器窗口，显示多个打开的文档或显示较大源码文件的多个位置。

行首区：主要用来显示代码行号，以及调试断点标志和代码书签标志。右击行首区可以弹出右键菜单，菜单里可以切换书签、编辑书签以及设置或取消断点。

同一行是既可以打断点也可以设置书签的，二者不冲突，其实它们根本就没关系。单击行号前面的浅灰色空白区可以直接打断点，再次单击可以取消断点，另外也可以用快捷键 F9 设置或取消断点。代码书签一般用右键菜单来设置，也可以用快捷键 Ctrl+M 设置或取消书签。

编辑区：写代码的区域。

---

1.3 UI设计界面

双击 widget.ui 文件，Qt Creator 会自动进入设计模式，可以对图形界面进行可视化编辑：

①：组件选择窗口。组件选择窗口分为多个组，如 Layouts、Buttons、Display Widgets 等，界面设计的常见组件都可以在组件选择窗口中找到。

②：UI 设计窗口。如果要将某个组件放置到该窗口上时，从组件选择窗口上拖放一个组件到窗体上即可。

③：动作编辑窗口。动作编辑窗口包括 Action Editor 以及 Signals 和 Slots 编辑器。 Action Editor 主要是用来新建 Action，并且通过拖拽的动作，将新建好的 Action 添加到菜单栏和工具栏上；Signals 和 Slots 编辑器用于可视化地进行信号与槽的关联。

④：对象浏览窗口。用树状视图显示窗体上各组件之间的布局包含关系，视图有两列，显示每个组件的对象名称（ObjectName）和类名称。

⑤：属性设置窗口。显示某个选中的组件或窗体的各种属性及其取值，可以在属性设置窗口里修改这些属性的值。

---

1.4 构建区

左下角一共有四个按钮：

• 第一个按钮是选择构建项目使用的 Qt 套件和构建目标程序的类型（Debug 或 Release）。对于第一个按钮，默认的是Debug，构建的是 Debug 类型的目标程序。如果需要构建 Release 版目标程序，点开左下角第一个按钮：

这里有三种构建模式：

上图是针对项目只用到单一 Qt 套件的，如果之前配置了多个 Qt 套件，看到的类似下图：

如果项目配置了多个可用的 Qt 套件，点开左下角第一个按钮后，会看到各个套件以及构建类型，如果要切换 Qt 套件或构建类型，直接选中相应条目，然后点击运行按钮就行了。如果构建和运行时没出错，就会显示出构建好的目标程序界面。

• 第二个是运行按钮，快捷键是 Ctrl+R，如果还没构建项目或刚修改了代码，直接点击运行的话，QtCreator 会自动构建生成新的目标程序并运行。
• 第三个是调试按钮，快捷键是 F5。调试程序之前，QtCreator 会自动构建生成最新的目标程序，并进入调试模式。
• 第四个是构建按钮，快捷键是 Ctrl+B，只构建最新的目标程序，但不运行。

---

2. Qt Hello World 程序

2.1 使用 “按钮” 实现

2.1.1 纯代码方式实现

打开widget.cpp文件，编写

一般通过代码来构造界面的时候，通常会把构造界面的代码放到Widget/MainWindow的构造函数中

main.cpp

widget.cpp

上古时期，QT使用的是#include "qlabel.h"

现在使用的是#include "QLabel"

QT支持在堆上创建：QLabel* label=new QLabel(this);（比较推荐这种，具体原因在对象数那边会讲）

也支持在栈上创建：QLabel label;

#include "widget.h"
#include "ui_widget.h"
#include "QLabel"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//后面的那个QLabel是给当前这个label对象，指定一个“父对象"//在堆上创建，this指向的是main函数里面创建的widgetw;里面的w对象QLabel* label=new QLabel(this);//设置控件中要显示的文本label->setText("hello world");
}Widget::~Widget()
{delete ui;
}

图中的QLabel是因为下面原因：

Qt 诞生于1991年。C++还没有形成标准，C++更没有“标准库”这样的改变了

当时，如何表示一个字符串，可以使用C风格字符串（0结尾），也可以使用C++的string。

Qt为了让自己的开发能变的顺畅，就自己发明了一套轮子，搞了一系列的基础类，来支持Qt的开发。

包括不限于：

• 字符串 QString
• 动态数组QVector
• 链表 QList
• 字典QMap

很多年之后，上述这些容器等内容，已经打磨的很好了，形成了C++标准

很显然，这些已经引入的Qt自己包装好的这些容器类，也不可能删了，就只能和现有的标准库中的容器类共存了。

因此，咱们开发Qt代码的时候，如果需要用到上述容器类，可以使用标准库的容器，也可以使用Qt自己搞的这一套~~

但是Qt原生的api中，涉及到的接口，用的都是Qt自己的这一套容器。

后续的代码中，还会经常见到QString这样的一些东西，而很少见到std:string

QString和std:string之间也能很方便的相互转换。

QString用起来要比std:string香亿点。

QString内部已经对于字符编码做了处理了。而不像std:string，就啥都没干。

label->setText("hello world");

在QString中也提供了C风格字符串作为参数的构造函数

不显式构造QString，上述代码中，C风格字符串也会隐式构造成QString对象

QString对应的头文件，已经被很多Qt内置的其他类给间接包含了，因此一般不需要显式包含QString头文件。

---

点击运行，实现效果如下图：

通过代码创建，默认在左上角。如果要放到其他位置，也是可以的。

---

QLabel* label=new QLabel(this);

有没有人发现这里new完没有delete，那不就内存泄漏了嘛？

此处通过new的方式创建对象，也就是为了把这个对象的生命周期，交给Qt的对象树来统一管理。

• 试想一下，如果这个对象是按照栈上的变量创建的就可能会存在一些“提前释放”的问题。
• 栈上的对象会在函数结束时被自动销毁，导致父对象持有无效的指针，最终在程序关闭时引发崩溃。

上述代码，在Qt中不会产生内存泄露。

label对象会合适的时候被析构释放（虽然没有手动写delete，确实能释放）

之所以能够把对象释放掉，主要是因为把这个对象是挂到了对象树上。

特性	new QLabel(this) (堆上创建)	QLabel label(this) (栈上创建)
内存位置	堆	栈
生命周期	由父对象 Widget 控制，直到 Widget 销毁	仅限于构造函数的作用域内
对象树关系	正确建立，生命周期与父对象绑定	有瑕疵，对象被提前销毁，父对象持有悬空指针
最终结果	正常，内存被 Widget 析构时自动释放	崩溃，Widget 析构时尝试 delete 一个栈对象

例如：

前端开发（网页开发）也涉及到类似的对象树（DOM），本质上也是一个树形结构（N叉树），通过树形结构把界面上的各种元素组织起来。

Qt中也是类似，也是搞了一个对象树，也是N叉树，把界面上的各种元素组织起来了

使用对象树，把这些内容组织起来，最主要的目的，就是为了能够在合适的时机把这些对象统一进行释放（窗口关闭/销毁）

通过这个树形结构，就把界面上要显示的这些控件对象都组织起来了。

这里的树上的这些对象，统一销毁是最好不过的。如果某个对象提前销毁，此时就会导致对应的控件就在界面上不存在了。

---

2.1.2 可视化操作实现

（1）双击：" widget.ui " 文件；

（2）拖拽控件Label至 ui 界面窗口并修改内容

QtDesigner右上角，通过树形结构，显示出了当前界面上都有哪些控件

（3）构建并运行，效果如下所示

添加后，widget.ui文件点击一次会发现多出来这段代码，

进一步的qmake就会在编译项目的时候，基于这个内容，生成一段C++代码，通过这个C++代码构建出界面内容了。

这个过程是QT自动完成的。