Qt5.9.1 简单字体设计（UI设计）
最近自学了下Qt,本节讲一下如何进行些简单的字体设计，有什么问题互相交流。
步骤如下：
一：创建一个Widget Application项目samp1,在创建窗体时选择基类QDialog,生成的类命名为QWDialog,并选择生成窗体。
二：布局
双击qwdialog.ui,进入界面设计(左侧有工具）
(1)需要一个PlainText Edit( Iput Widgets里），在Button里的三个check Box(可同时多选),三个Radio Button(多选一），三个Push Button(普通按钮）
各个组件的相关设置
| 对象名 | 类名称 | 属性设置 | 备注 |
|---|---|---|---|
| plaintextEdit | QPlainTextEdit | Text="Hello, World It is my demo. " Font.PointSize=20 |
用于显示文字内容，可编辑 |
| CheckBoxUnder | QCheckBox | Text="Underline" | 设置字体为下划线 |
| QCheckBox Italic | QCheckBox | Text="Italic" | 设置字体为斜体 |
| CheckBox Bold | QCheckBox | Text="Bold" | 设置字体为粗体 |
| rBtnBlack | QRadioButton | Text="Black" | 字体颜色为黑色 |
| rBtnRed | QRadioButton | Text="Red" | 字体颜色为红色 |
| rBtnBlue | QRadioButton | Text="Blue" | 字体颜色为蓝色 |
| btnOK | QPushButton | Text="确定" | 返回确定，并关闭窗口 |
| btnCancel | QPushButton | Text="取消" | 返回取消，并关闭窗口 |
| btnClose | QPushButton | Text="退出" | 退出程序 |
| QWDialog | QWDialog | windowTitle="Dialog by Designer" | 界面窗口的类名称是QWDialog，objectName 不要修改 |
(2）按住"Ctrl"键选中三个checkBox组件，鼠标右击->Layout->Lay out Horizontally(水平布局）；
依次将选中三个RadioButton组件为一组，水平布局；再拖两个Horizontal Layout(水平分隔的空格），将他们与界面上的三个PushBotton组件选中为一组，水平布局。
三. 设计程序功能
（1）字体样式设置
窗体在设计模式下，选中 checkBoxUnder 组件，单击右键调出其快捷菜单。在快捷菜单中单击菜单项“Go to slot…”（中文状态为“转到槽”），出现如图所示的对话框。
该对话框列出了 QCheckBox 类的所有信号，第一个是 clicked()，第二个是带一个布尔类型参数的 clicked(bool)。
选择 clicked(bool)，然后单击“OK”按钮，在 QWDialog 的类定义中，会在 private slots 部分自动增加一个槽函数声明，函数名是根据发射对象及其信号名称自动命名的。
void on_checkBoxUnder_clicked(bool checked);
同时，在 qwdialog.cpp 文件中自动添加了函数 on_chkBoxUnder_clicked(bool) 的框架，在此函数中添加如下的代码，实现文本框字体下划线的控制。
void QWDialog::on_checkBoxUnder_clicked(bool checked)
{
QFont font=ui->plainTextEdit->font();
font.setUnderline(checked);
ui->plainTextEdit->setFont(font);
}
以同样的方法为 Italic 和 Bold 两个 CheckBox设计槽函数，编译后运行.
发现已经实现了修改字体的下划线、斜体、粗体属性的功能，说明信号与槽函数已经关联了。
(2)字体颜色设置
设置字体的 3 个 RadioButton 是互斥性选择的，即一次只有一个 RadioButton 被选中，虽然也可以采用可视化设计的方式设计其 clicked() 信号的槽函数，但是这样就需要生成 3 个槽函数。这里可以简化设计，即设计一个槽函数，将 3 个 RadioButton 的 clicked() 信号关联到这一个槽函数。
为此，在 QWDialog 类的 private slots 部分增加一个槽函数定义如下：
void setTextFontColor();
提示 将鼠标光标移动到这个函数的函数名上面，单击右键，在弹出的快捷菜单中选择“Refactor”→“Add Definition in qwdialog.cpp”，就可以在 qwdialog.cpp 文件中自动为函数 setTextFontColor() 生成一个函数框架。
在 qwdialog.cpp 文件中，为 setTextFontColor() 编写实现代码如下：
void QWDialog::setTextFontColor()
{
QPalette plet=ui->plainTextEdit->palette();
if(ui->rBtnBlue->isChecked())
plet.setColor(QPalette::Text,Qt::blue);
else if (ui->rBtnBlack->isChecked())
plet.setColor(QPalette::Text,Qt::black);
else if(ui->rBtnRed->isChecked())
plet.setColor(QPalette::Text,Qt::red);
else
plet.setColor(QPalette::Text,Qt::black);
ui->plainTextEdit->setPalette(plet);
}
由于这个槽函数是自定义的，所以不会自动与 RadioButton 的 clicked() 事件关联，此时编译后运行程序不会实现改变字体颜色的功能。需要在 QWDialog 的构造函数中手工进行关联，代码如下：
红色框内为添加的代码。编译后运行。
（3）三个按钮的功能设计
界面上还有“确定”“取消”“退出”3 个按钮，这是在对话框中常见的按钮。“确定”表示确认选择并关闭对话框，“取消”表示取消选择并关闭对话框，“退出”则直接关闭对话框。
QWDialog 是从 QDialog 继承而来的，QDialog 提供了 accept()、reject()、close() 等槽函数来表示这三种状态，只需将按钮的 clicked() 信号与相应槽函数关联即可。
下面采用可视化的方式，将按钮的 clicked() 信号与这些槽函数关联起来。在 UI 设计器里，单击上方工具栏里的“Edit Signals/Slots”按钮，窗体进入信号与槽函数编辑状态。
点击Signal&Solts Editor的“+”，添加信号与槽的关联，按下图设置（双击即可选择对应的Sender）：
四：编译运行
这个实例程序的功能全部完成了。采用 UI 设计器设计了窗体界面，采用可视化和程序化的方式设计槽函数，设计信号与槽函数之间的关联。
从以上的设计过程可以看到，Qt Creator 和 UI 设计器为设计应用程序提供了强大的可视化设计功能。下一节说下代码化UI设计。