一、UI文件设计与运行机制
1、项目管理文件（.pro）
项目的管理文件以 .pro结尾，打开之后
#-------------------------------------------------
#
# Project created by QtCreator 2018-11-10T15:26:48
#
#-------------------------------------------------
QT += core gui //表示项目中加入core gui模块 ，core gui是qt用于GUI设计的类库文件
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets //加入widgets模块
TARGET = test1 //生成的目标可执行文件的名称 ，即编译生成的可执行文件是 test1.exe
TEMPLATE = app //项目使用的模板是app,是一般的应用程序
//以下三个记录了项目中包含的源程序文件、头文件和窗体文件的名称
SOURCES += main.cpp\
mainwindow.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui2、界面文件（.ui）
属性编辑器
信号与槽的简单使用：
实现点击一个按钮后，实现窗口关闭的功能。
编译运行之后即可实现点击按钮，关闭窗口的功能。
3、主函数文件（main.cpp）
main()函数是应用程序的入口。主要功能是创建应用程序，创建窗口，显示窗口,并运行应用程序，开始应用程序的消息循环和事件处理。
#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);//定义并创建应用程序
MainWindow w;//定义并创建窗口
w.show();//显示窗口
return a.exec();//应用程序运行
}
4、窗体相关文件
我用的qt5.6.1与书上讲的qt5.9略有不同。
（1）mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
namespace Ui { //命名空间ui,包含一个类 MainWindow，用于描述界面组件
class MainWindow;
}
class MainWindow : public QMainWindow //MainWindow类的定义
{
Q_OBJECT //宏Q_OBJECT，这里是qt的信号与槽机制的类都必须加入的一个宏
public: //定义了MainWindow类的构造函数和析构函数
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private: //定义了一个指针，指针ui指向可视化设计的界面，要访问的组件都是通过这个指针ui
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
（2）mainwindow.cpp 文件
mainwindow.cpp文件是类mainwindow的实现代码。
#include "mainwindow.h"
#include "ui_mainwindow.h"//Qt编译生成的与ui文件对应的类定义文件
//构造函数头部 执行父类QWidget的构造函数
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow) //创建一个Ui::MainWindow类的对象ui,ui就是MainWindow的部分定义的指针变量ui
{
ui->setupUi(this);//执行Ui::MainWindow类的setupUi（）函数，实现窗口的生成和各种属性的设置、信号与槽的关联
}
MainWindow::~MainWindow()
{
delete ui;//析构函数，删除用new创建的指针ui
}（3）mainwindow.ui文件
是一个XML文件，定义了窗口上所有组件的属性设置、布局，及其信号与槽函数的关联等。
二、可视化UI设计
1、工具栏各按钮功能
使用工具栏上的布局控制按钮时，只需要在窗体上选中需要设计布局的组件，然后点击某个布局按钮即可。
2、信号与槽
信号：就是特定情况下被发射的事件，例如PushButton组件的鼠标点击 clicked()信号。GUI程序设计的主要内容就是对各个组件的信号的响应，只需要知道在什么情况下发射哪些信号，合理的响应这些信号。
槽：就是对信号的响应函数。槽函数与一般函数不同，槽函数可以关联信号，当信号发射时，关联的槽函数被自动执行。
信号与槽关联的使用QObject::connect()函数实现的，其基本格式是：
QObject::connect(sender,SIGNAL(signal()),receiver,SLOT(slot()));
各部分详解：
QObject是所有Qt类的基类；
connect（）是QObject类的一个静态函数；
sender是发射信号的对象名称；
signal()是信号名称，有参数还要指明参数；
receiver是接收对象名称；
slot()是槽函数名称，有参数还要指明参数；
SIGNAL和SLOT是qt的宏，用于指明信号和槽，并将它们的参数转化为相应的字符串。
举例：
QObject::connect(btnClose,SIGNAL(clicked()),Widget,SLOT(close()));
作用就是将btnClose按钮的clicked()信号与窗体Widget的槽函数close()相关关联
信号和槽的使用规则：
（1）一个信号可以连接多个槽
（2）多个信号可以连接同一个槽
（3）一个信号可以连接另外一个信号
3、可视化生成槽函数
选择一个框架
可以选择转到槽，自动生成一个槽函数
三、代码化UI设计
创建工程文件时不勾选创建界面
写到这里发现自己用的qt版本低打不开书中的qt源码，所以要装个qt5.9，顺便送个小彩蛋
1、QWDlgManual类定义
#ifndef QWDLGMANUAL_H
#define QWDLGMANUAL_H
#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
class QWDlgManual : public QDialog
{
Q_OBJECT
private: //声明了界面的各个组件的指针变量，界面组件都需要在QWDlgManual类的构造函数里创建并在窗体上布局
QCheckBox *chkBoxUnder;
QCheckBox *chkBoxItalic;
QCheckBox *chkBoxBold;
QRadioButton *rBtnBlack;
QRadioButton *rBtnRed;
QRadioButton *rBtnBlue;
QPlainTextEdit *txtEdit;
QPushButton *btnOK;
QPushButton *btnCancel;
QPushButton *btnClose;
void iniUI();//UI 创建与初始化
void iniSignalSlots();//初始化信号与槽的链接
private slots:
void on_chkBoxUnder(bool checked); //Underline 的clicked(bool)信号的槽函数
void on_chkBoxItalic(bool checked);//Italic 的clicked(bool)信号的槽函数
void on_chkBoxBold(bool checked); //Bold 的clicked(bool)信号的槽函数
void setTextFontColor(); //设置字体颜色
public:
QWDlgManual(QWidget *parent = 0);
~QWDlgManual();
};
#endif // QWDLGMANUAL_H
2、界面组件的创建于布局
（1）iniUI()实现界面组件的创建与布局
void QWDlgManual::iniUI()
{
//创建 Underline, Italic, Bold三个CheckBox，并水平布局
chkBoxUnder=new QCheckBox(tr("Underline"));
chkBoxItalic=new QCheckBox(tr("Italic"));
chkBoxBold=new QCheckBox(tr("Bold"));
QHBoxLayout *HLay1=new QHBoxLayout;
HLay1->addWidget(chkBoxUnder);
HLay1->addWidget(chkBoxItalic);
HLay1->addWidget(chkBoxBold);
//创建 Black, Red, Blue三个RadioButton，并水平布局
rBtnBlack=new QRadioButton(tr("Black"));
rBtnBlack->setChecked(true);//缺省被选中
rBtnRed=new QRadioButton(tr("Red"));
rBtnBlue=new QRadioButton(tr("Blue"));
QHBoxLayout *HLay2=new QHBoxLayout;
HLay2->addWidget(rBtnBlack);
HLay2->addWidget(rBtnRed);
HLay2->addWidget(rBtnBlue);
//创建 确定, 取消, 退出 三个 QPushButton, 并水平布局
btnOK=new QPushButton(tr("确定"));
btnCancel=new QPushButton(tr("取消"));
btnClose=new QPushButton(tr("退出"));
QHBoxLayout *HLay3=new QHBoxLayout;
HLay3->addStretch();
HLay3->addWidget(btnOK);
HLay3->addWidget(btnCancel);
HLay3->addStretch();
HLay3->addWidget(btnClose);
//创建 文本框,并设置初始字体
txtEdit=new QPlainTextEdit;
txtEdit->setPlainText("Hello world\n\nIt is my demo");
QFont font=txtEdit->font(); //获取字体
font.setPointSize(20);//修改字体大小为20
txtEdit->setFont(font);//设置字体
//创建 垂直布局，并设置为主布局
QVBoxLayout *VLay=new QVBoxLayout;
VLay->addLayout(HLay1); //添加字体类型组
VLay->addLayout(HLay2);//添加字体颜色组
VLay->addWidget(txtEdit);//添加PlainTextEdit
VLay->addLayout(HLay3);//添加按键组
setLayout(VLay); //设置为窗体的主布局
}
（2）信号与槽的关联
void QWDlgManual::iniSignalSlots()
{
//三个颜色 QRadioButton的clicked()事件与setTextFontColor()槽函数关联
connect(rBtnBlue,SIGNAL(clicked()),this,SLOT(setTextFontColor()));//
connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTextFontColor()));//
connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTextFontColor()));//
//三个字体设置的 QCheckBox 的clicked(bool)事件与 相应的槽函数关联
connect(chkBoxUnder,SIGNAL(clicked(bool)),this,SLOT(on_chkBoxUnder(bool)));//
connect(chkBoxItalic,SIGNAL(clicked(bool)),this,SLOT(on_chkBoxItalic(bool)));//
connect(chkBoxBold,SIGNAL(clicked(bool)),this,SLOT(on_chkBoxBold(bool)));//
//三个按键与窗体的槽函数关联
connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));//
connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));//
connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));//
}测试效果
