# 概述 > 分别通过 QT Designer 与 connect 函数添加(绑定)信号与槽。 > 环境：Win10 + VS2017 + QT5.9.2。 > 实现内容：点击按钮退出程序、点击按钮弹出信息框。 ![Title](/upload/LearningNotes-QT-01-1.jpg) ---------- # 一、建立 QT 项目 **打开 Visual Studio 2017，新建 QT GUI Application。** ![Title](/upload/LearningNotes-QT-01-2.jpg) **一路 Next，Finish。** ![Title](/upload/LearningNotes-QT-01-3.jpg) **下图是初始目录结构：** ![Title](/upload/LearningNotes-QT-01-4.jpg) **F5调试程序，看到初始的GUI界面：** ![Title](/upload/LearningNotes-QT-01-5.jpg) # 二、使用 QT Designer 添加信号与槽 **在解决方案中，找到默认生成的.ui文件，双击以在 QT Designer 中打开。** ![Title](/upload/LearningNotes-QT-01-6.jpg) **在 Widget Box 中拖拽 Push Button 到主窗口上。** ![Title](/upload/LearningNotes-QT-01-7.jpg) **在属性编辑器中修改 objectName、text 的值为 "closeButton"。** > 其中 objectName 是 Widget 组件的组件名，text 是显示在按钮上的标题。text 值还可以通过双击添加的按钮来快速修改。 ![Title](/upload/LearningNotes-QT-01-8.jpg) **随后在信号/槽编辑器中添加信号槽。** 发送者为按钮 closeButton，信号为 clicked() 即鼠标左键单击信号(事件/event)，接收者为 QtGuiApplicationClass，槽为 close()，即 QtGuiApplicationClass 的销毁函数。 ![Title](/upload/LearningNotes-QT-01-9.jpg) **Ctrl+S 保存修改，回到 VS2017，F5调试程序，点击 closeButton 按钮，程序退出。** > 信号与槽是 QtGui 开发当中事件的表示形式，信号即是事件的触发条件，槽即是信号所触发的事件处理函数。 > 在 Qt Designer 中可以通过信号/槽编辑器方便地添加一些原生的信号槽。后文描述了如何添加自定义的槽。 # 三、通过 connect 函数绑定自定义槽 **在 QT Designer 中添加一个新的按钮，相关属性修改为 MessageButton，现在我们有了两个按钮。** ![Title](/upload/LearningNotes-QT-01-10.jpg) **回到 VS2017，转到.h文件中，添加槽的定义。** 其中函数名及返回值类型是固定的格式：**void on_WidgetName_Event()。** 此处 WidgetName 是 MessageButton，对应的事件是 clicked，因此可以在下图中看到，完整函数声明是： > void on_MessageButton_clicked(); ![Title](/upload/LearningNotes-QT-01-11.jpg) > 如果.h文件中出现 ui_*.h文件的包含错误，如下图： > ![Title](13.jpg) > 只需在 VS2017 的 QT VS Tools 菜单栏中选择 Convert Project to QMake Generated Project 即可解决。 > ![Title](/upload/LearningNotes-QT-01-14.jpg) **之后就可以跳转到对应的.cpp文件添加函数的实现了。** 这里使用了 QMessageBox 类中的 warning 函数，用以显示警告信息框。在 QMessageBox 头文件中提供了丰富的信息框样式，**对应的调用其中的信息框需要在.h文件中包含其头文件。**： ``` #include ``` ![Title](/upload/LearningNotes-QT-01-12.jpg) **截至目前，我们添加了一个按钮 MessageButton，定义并实现了其一个槽函数（on_MessageButton_clicked）。** 但是现在我们运行程序，单击 messageButton 按钮是不会有任何反应的，因为我们只完成了槽函数的定义和实现，下面我们在 QtGui 类的构造函数处，将信号与槽通过 connect 函数进行连接。 ![Title](/upload/LearningNotes-QT-01-15.jpg) > 此处 connect 函数的原型如下： ``` static QMetaObject::Connection connect(const QObject *sender, const QMetaMethod &signal, const QObject *receiver, const QMetaMethod &method, Qt::ConnectionType type = Qt::AutoConnection); ``` **至此，F5调试程序，按下按钮可以看到弹出了信息框。** ![Title](/upload/LearningNotes-QT-01-16.jpg)