使用 Qt Designer 开发

将简介使用 Qt Creator 里自带的 Qt Designer，使用 Qt Designer 比较方便的构造 UI 界
面。特点是方便布局，比较形象

使用 UI 设计器开发程序

在这小节里我们继续学习如何使用 Qt Designer 开发程序，Qt Designer 是属于 Qt Creator 的
一个功能而已，大家不要搞混了。Qt Designer 也叫 UI 设计师或者 UI 设计器，这都是指的同一
个东西而已。下面就简单介绍使用 UI 设计器开发程序，以连接信号与槽为例，简单的介绍这
个开发流程。最后我们思考一下这种开发方式的好处以及不便之处。

在 UI 文件添加一个按钮

新建一个项目为 02_designer_example。如果还不会新建工程，请回到 3.6 小节，步骤一样，
这里不再详细说项目的建立过程了。新建的项目如下，为了方便截图，笔者已经把 3.6 小节的
项目“01_hello_world”关闭了。剩下的就是我们这个新建的项目 02_designer_example。

添加按钮的方法与 3.6.3 小节添加 Label 的方法一样，在左边找到 Push Button，然后拖拽到
中间的显示窗体里，如下图。

UI 设计器里信号与槽的连接方法一：

在主窗体的上面部分，我们可以看到一些小小的按钮，如下图框框部分。用鼠标放在这些
按钮上面可以查看这个按钮是什么作用。信号槽连接的按钮也在上面。

点击信号槽连接的按钮如下，如下图①处，点击进入信号槽连接模式（若想退出信号槽连
接模式，则点击①处左边的按钮），进入信号与槽的连接模式后，将鼠标选中我们的“关闭程序”
按钮，按住按钮，然后用鼠标向外拖动，如②处。此时就会出现信号槽连接的符号。

之后按如下图步骤选择，左边的“关闭程序”pushButton 按钮的信号，可以看到一个对象
的信号可以有多种。右边的 QMainWindow 的槽函数，如果有其他对象，右边不一定只有

MainWidnow 的槽函数（槽），也有可能是其他对象的槽。我们选择按钮的 clicked()信号，将其
连接 MainWindow 对象的 close()槽。这样就完成了信号与槽的连接，非常简单。我们也可以预
知这个信号与槽的功能，当“关闭程序”pushButton 发出了 clicked()信号（也就是单击信号）。
这个信号由“关闭程序”pushButton 被单击时发出。它就会触发 MainWindow 的 close()。进而
使整个程序关闭。MainWindow 的 close()就是退出关闭程序，退出程序的意思。
完成信号槽连接，如下图。要想返回编辑部件模式点击如下图标注位置的按钮。下图就是
信号与槽连接的图示了。在编辑部件模式下我们是看不见的，只有信号槽模式才能看见这样的
图示。

UI 设计器里信号与槽的连接方法二：

选中“关闭程序”pushButton 按钮，然后右键，如下图。选择“转到槽”。

点击“转到槽”后，弹出下面的窗口，这一步是先让我们选择信号。按如下图选择。如果
细心的同学，我们还发现这个 clicked()信号并不是 pushButton 的，而是 QAbstactButton 的。只
是 pusbButton 继承了 QAbstracButton，同时把这个信号也继承了下来。除此之外我们还看到其
他信号也是不是属于 pushButton 的，也是被继承下来了。所以我们在 C++基础部分学过的继承。
在 Qt 里的作用表现的淋漓尽致！根本不用重写 pushButton 的 clicked()事件。pushButton 只需要
继承父类的 clicked()事件即可！

点击 OK 后，就会跳转到槽函数里，这个代码由 Qt Creator 自动生成。
同时在 mainwindow.h 里声明了这个槽函数。
如果我们学过 C#，这就好像 C#里的跳转到事件一样。其实这种便捷的编程方式很多编程
的 IDE 都非常类似。只要我们对这种 IDE 有一定的了解，学习起来就不会觉得难。
返回到 mainwindow.cpp 找到 on_pushButton_clicked 这个槽函数里。在这个槽数里写上

this->close();调用 close()方法关闭整个程序。

编译及运行创建的 UI 项目

直接按 Ctrl + r 或者点击左下角的第一个绿色三角符号，编译且运行这个项目。运行的结果
如下。点击“关闭程序”按钮，看看是不是整个程序关闭退出了呢？如果细心的同学还会思考，
我们在上面用了两种方法连接信号与槽。那他们是如何连接的呢？他们两者同时连接会有影响吗？在哪里连接的呢？这些都是我们需要探讨的问题？难道第二种方法写上槽函数就会自动被
触发？下一节我们继续学习 Qt 信号与槽了解信号与槽的写法就能解开这个谜了！