![[T]](/views/front/img/head.png){kind=avatar}
二、UI文件设计与运行机制
一、UI文件设计与运行机制
1、创建工程
2、添加控件，实现按钮点击
（1）添加控件
（2）添加信号和槽
2、分析项目结构
test_02
test_02.pro Qt工程文件
Headers
widget.h 设计的窗体类的头文件
Sources
main.cpp 主程序入口文件
widget.cpp 窗体类的实现文件
Forms
widget.ui 界面文件，使用XML格式描述远见及布局
../build-xxx/ui_widget.h 组件、信号与槽实现的文件，根据ui界面文件编译自动生成
（1）项目管理文件
后缀为.pro
# 包含的模块
QT += core gui
# 大于Qt4版本才包含widget模块
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
# 应用程序的名称，生成可执行程序的名称
TARGET = test_02
# 模板类型，应用程序模板
TEMPLATE = app
# 定义编译选项
# QT_DEPRECATED_WARNINGS：当Qt的某些功能被标记为过时的，那么编译器会发出警告
DEFINES += QT_DEPRECATED_WARNINGS
# 编译器版本
CONFIG += c++11
# 源文件
SOURCES += \
main.cpp \
widget.cpp
# 头文件
HEADERS += \
widget.h
# Form文件
FORMS += \
widget.ui
（2）ui文件
由UI设计器自动生成，存储了组件和布局
（3）主函数文件
#include "widget.h"
#include （4）widget类
// 头文件
#ifndef WIDGET_H
#define WIDGET_H
#include // 源文件
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this); // 实现了组件的各种设置、信号与槽的关联，即ui_widget.h文件中实现方法
}
Widget::~Widget()
{
delete ui;
}
（5）ui_widget.h文件
#ifndef UI_WIDGET_H
#define UI_WIDGET_H
#include 二、可视化UI设计
实现一个程序实现：一个文本显示；三个复选框分别设置下划线、斜体、粗体；三个单选分别为红、绿、蓝三色；一个关闭按钮。
1、创建工程（基于QDialog，对话框）
2、添加组件
3、添加信号和槽
（1）关闭按钮
（2）通过组件实现复选框槽函数功能
void Dialog::on_checkBoxUnderline_clicked(bool checked)
{
QFont font = ui->plainTextEdit->font();
font.setUnderline(checked);
ui->plainTextEdit->setFont(font);
}
void Dialog::on_checkBoxItalix_clicked(bool checked)
{
QFont font = ui->plainTextEdit->font();
font.setItalic(checked);
ui->plainTextEdit->setFont(font);
}
void Dialog::on_checkBoxBold_clicked(bool checked)
{
QFont font = ui->plainTextEdit->font();
font.setBold(checked);
ui->plainTextEdit->setFont(font);
}
（3）添加自定义槽函数，关联信号
实现槽函数
void Dialog::setTextFontColor()
{
QPalette plet = ui->plainTextEdit->palette();
plet.setColor(QPalette::Text, Qt::black);
if(ui->radioButtonRed->isChecked())
{
plet.setColor(QPalette::Text, Qt::red);
}
else if (ui->radioButtonGreen->isChecked()) {
plet.setColor(QPalette::Text, Qt::green);
}
else if (ui->radioButtonBlue->isChecked()) {
plet.setColor(QPalette::Text, Qt::blue);
}
ui->plainTextEdit->setPalette(plet);
}
关联槽函数和消息
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this);
QObject::connect(ui->radioButtonRed, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
QObject::connect(ui->radioButtonGreen, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
QObject::connect(ui->radioButtonBlue, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
}
三、代码化UI设计
1、创建工程
创建一个Widget Application项目：QDialog作为窗口基类，不勾选“Generate form”(中文：创建界面)，即干部床减ui文件
2、在对话框类（dialog）中添加控件对象
#ifndef DIALOG_H
#define DIALOG_H
#include // 复选框
#include // 单选框
#include // 按钮
#include // 文本编辑框
class Dialog : public QDialog
{
Q_OBJECT
private:
// 复选框
QCheckBox *checkBoxUnderline;
QCheckBox *checkBoxItalic;
QCheckBox *checkBoxBold;
// 单选框
QRadioButton *rBtnRed;
QRadioButton *rBtnGreen;
QRadioButton *rBtnBlue;
// 文本编辑框
QPlainTextEdit *plainTextEdit;
// 按钮
QPushButton *btnOK;
QPushButton *btnChancel;
QPushButton *btnClose;
public:
Dialog(QWidget *parent = 0);
~Dialog();
};
#endif // DIALOG_H
#include "dialog.h"
#include 所有控件已经出现在对话框中，且在拉伸对话框时，所有控件都等比缩放。
3、注册信号与槽
#ifndef DIALOG_H
#define DIALOG_H
#include // 复选框
#include // 单选框
#include // 按钮
#include // 文本编辑框
class Dialog : public QDialog
{
Q_OBJECT
private:
// 复选框
QCheckBox *checkBoxUnderline;
QCheckBox *checkBoxItalic;
QCheckBox *checkBoxBold;
// 单选框
QRadioButton *rBtnRed;
QRadioButton *rBtnGreen;
QRadioButton *rBtnBlue;
// 文本编辑框
QPlainTextEdit *plainTextEdit;
// 按钮
QPushButton *btnOK;
QPushButton *btnChancel;
QPushButton *btnClose;
private:
void initUI();
void initSignalSolts();
private slots:
void on_checkUnderline(bool bChecked);
void on_checkItalic(bool bChecked);
void on_checkBold(bool bChecked);
void on_setTextFontColor();
public:
Dialog(QWidget *parent = 0);
~Dialog();
};
#endif // DIALOG_H
#include "dialog.h"
#include 
四、混合方式UI设计
实现一个文本编辑器
1、创建基于QMainWindow的项目
2、添加资源文件
添加前缀
添加文件（添加前缀之后会出现）
3、添加工具栏
Action：可以创建菜单项，工具栏按钮
添加关闭信号和槽
4、设置文本框布局
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 将编辑框设置为中心布局
setCentralWidget(ui->plainTextEdit);
}
5、工具栏和状态栏添加组件（代码编辑UI）
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include // 进度条
#include // 标签
#include // 数值输入框
#include // 字体选择器
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
private:
QLabel *fLabCurrFile;
QProgressBar *progressBar;
QSpinBox *spinFontSize;
QFontComboBox *comboxFont;
void initUI();
public:
explicit MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
#include "mainwindow.h"
#include "ui_mainwindow.h"
void MainWindow::initUI()
{
// 添加状态栏
fLabCurrFile = new QLabel;
fLabCurrFile->setMidLineWidth(150); //设置最小宽度
fLabCurrFile->setText("当前文件：");
ui->statusBar->addWidget(fLabCurrFile);
// 进度条
progressBar = new QProgressBar;
progressBar->setMinimum(5); //设置最小值
progressBar->setMaximum(50); //设置最大值
progressBar->setValue(ui->plainTextEdit->font().pointSize()); //设置当前值
ui->statusBar->addWidget(progressBar);
// 工具栏添加字体大小
ui->mainToolBar->addWidget(new QLabel("字体大小"));
spinFontSize = new QSpinBox;
spinFontSize->setMinimum(5);
spinFontSize->setMaximum(50);
ui->mainToolBar->addWidget(spinFontSize);
// 工具栏添加字体选择器
ui->mainToolBar->addWidget(new QLabel("字体大小"));
comboxFont = new QFontComboBox;
ui->mainToolBar->addWidget(comboxFont);
}
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 将编辑框设置为中心布局
initUI();
setCentralWidget(ui->plainTextEdit);
}
MainWindow::~MainWindow()
{
delete ui;
}
6、添加剪切复制粘贴信号与槽
7、添加粗体、斜体、下划线的信号与槽
void MainWindow::on_actBold_triggered(bool checked)
{
/*
// 对整个组件生效
QFont font = ui->plainTextEdit->font();
font.setBold(checked);
ui->plainTextEdit->setFont(font);
*/
// 单独对选中内容
QTextCharFormat fmt;
if(checked){
fmt.setFontWeight(QFont::Bold);
}
else {
fmt.setFontWeight(QFont::Normal);
}
ui->plainTextEdit->mergeCurrentCharFormat(fmt);
}
void MainWindow::on_actItalic_triggered(bool checked)
{
/*
// 对整个组件生效
QFont font = ui->plainTextEdit->font();
font.setItalic(checked);
ui->plainTextEdit->setFont(font);
*/
// 单独对选中内容
QTextCharFormat fmt;
fmt.setFontItalic(checked);
ui->plainTextEdit->mergeCurrentCharFormat(fmt);
}
void MainWindow::on_actUnderline_triggered(bool checked)
{
/*
// 对整个组件生效
QFont font = ui->plainTextEdit->font();
font.setUnderline(checked);
ui->plainTextEdit->setFont(font);
*/
// 单独对选中内容
QTextCharFormat fmt;
fmt.setFontUnderline(checked);
ui->plainTextEdit->mergeCurrentCharFormat(fmt);
}
8、添加：根据文本框内容选中修改工具栏状态
选中文本编辑框，右击选择转到槽。
选中selectionChanged。
void MainWindow::on_plainTextEdit_selectionChanged()
{
QTextCharFormat fmt;
fmt = ui->plainTextEdit->currentCharFormat();
ui->actItalic->setChecked(fmt.fontItalic());
ui->actBold->setChecked(fmt.font().bold());
ui->actUnderline->setChecked(fmt.fontUnderline());
}
9、设置字体大小与字体
void MainWindow::initSignalSlots()
{
connect(spinFontSize, SIGNAL(valueChanged(int)), this,
SLOT(on_spinBoxFontSize_valueChanged(int)));
connect(comboxFont, SIGNAL(currentIndexChanged(const QString&)), this,
SLOT(on_comboxFont_currentIndexChanged(const QString&)));
}
void MainWindow::on_spinBoxFontSize_valueChanged(int nFontSize)
{
QTextCharFormat fmt;
fmt.setFontPointSize(nFontSize);
ui->plainTextEdit->mergeCurrentCharFormat(fmt);
progressBar->setValue(nFontSize);
}
void MainWindow::on_comboxFont_currentIndexChanged(const QString &strIndex)
{
QTextCharFormat fmt;
fmt.setFontFamily(strIndex);
ui->plainTextEdit->mergeCurrentCharFormat(fmt);
}
10、设置应用程序图标
工程文件添加配置项，工程目录添加图片文件。
RC_ICONS = AppIcon.ico
