界面组件布局
所谓布局，就是界面上组件的排列方式，使用布局可以使组件有规则地分布，并且随着窗体大小变化自动地调整大小和相对位置。
界面组件的层次关系
为了将界面上的各个组件的分布设计得更加美观，经常使用一些容器类，如 QGroupBox、QTabWidget、QFrame 等。
我们可以在UI 设计器的右上方的 Object Inspector 中 看到组件的层次关系。
例如：将多个组件拖动到 GroupBox中，此时拖动GroupBox，其下的所有组件一起动。
布局管理
Qt 为界面设计提供了丰富的布局管理功能，在 UI 设计器中，组件面板里有 Layouts 和 Spacers 两个组件面板，在窗体上方的工具栏里有布局管理的按钮。
Layouts 和 Spacers 两个组件面板里的布局组件的功能见表
| 布局组件 | 功能 |
|---|---|
| Vertical Layout | 垂直方向布局，组件自动在垂直方向上分布 |
| Horizontal Layout | 水平方向布局，组件自动在水平方向上分布 |
| Grid Layout | 网格状布局，网状布局大小改变时，每个网格的大小都改变 |
| Form Layout | 窗体布局，与网格状布局类似，但是只有最右侧的一列网格会改变大小 |
| Horizontal Spacer | 一个用于水平分隔的空格 |
| Vertical Spacer | 一个用于垂直分隔的空格 |
使用组件面板里的布局组件设计布局时，先拖放布局组件到窗体上。布局组件会以红色边框显示。
再拖动组件或者布局组件，到布局组件中，即可。注意，布局组件是可以嵌套的。
例如：先放一个 Horizontal Layout 到窗体上，再往布局组件里拖放 3 个 Push Button 和 2 个 Horizontal Spacer，可以得到对齐效果。
在设计窗体的上方有一个工具栏，用于调整设计器进入不同的状态，以及进行布局设计，工具栏上各按钮的功能见表
| 按钮及快捷键 | 功能 |
|---|---|
| Edit Widget (F3) | 界面设计进入编辑状态，就是正常的设计状态 |
| Edit Signals/Slots(F4) | 进入信号与槽的可视化设计状态 |
| Edit Buddies | 进入伙伴关系编辑状态，可以设置一个Label 与一个组件成为伙伴关系 |
| Edit Tab Order | 进入Tab 顺序编辑状态，Tab 顺序是在键盘上按Tab 键时，输入焦点在界面各组件之间跳动的顺序 |
| Lay Out Horizontally (Ctrl+H) | 将窗体上所选组件水平布局 |
| Lay Out Vertically (Ctrl+L) | 将窗体上所选组件垂直布局 |
| Lay Out Horizontally in Splitter | 将窗体上所选组件用一个分割条进行水平分割布局 |
| Lay Out Vertically in Splitter | 将窗体上所选组件用一个分割条进行垂直分割布局 |
| Lay Out in a Form Layout | 将窗体上所选组件按窗体布局 |
| Lay Out in a Grid | 将窗体上所选组件网格布局 |
| Break Layout | 解除窗体上所选组件的布局，也就是打散现有的布局 |
| Adjust Size(Ctrl+J) | 自动调整所选组件的大小 |
使用工具栏上的布局控制按钮时，只需在窗体上选中需要设计布局的组件，然后点击某个布局按钮即可。在窗体上选择组件时同时按住 Ctrl 键，可以实现组件多选，选择某个容器类组件，相当于选择了其内部的所有组件。
伙伴关系
伙伴关系（Buddy）是指界面上一个 Label 和一个组件相关联。伙伴关系是为了在程序运行时，在窗体上用快捷键快速将输入焦点切换到某个组件上。
在 UI 设计工具栏上单击“Edit Buddies”按钮可以进入伙伴关系编辑状态，单击一个 Label，按住鼠标左键，然后拖向一个组件，就建立了 Label 和组件之间的伙伴关系。
正确的伙伴关系是标签的蓝色箭头指向另外一个组件。
例如，在设定“姓名”标签的 Text 属性为“姓名(&N)”，其中符号“&”用来指定快捷字符，界面上并不显示“&”，这里指定快捷字母为 N。那么程序运行时，用户按下 Alt+N，输入焦点就会快速切换到“姓名”关联的输入框内。
Tab 顺序
在 UI 设计器工具栏上单击“Edit Tab Order”按钮进入Tab 顺序编辑状态（如图 8 所示）。Tab 顺序是指在程序运行时，按下键盘上的 Tab 键时输入焦点的移动顺序。一个好的用户界面，在按 Tab 键时，焦点应该以合理的顺序在界面上移动，而不是随意地移动。
进入 Tab 顺序编辑状态后，在界面上会显示具有 Tab 顺序组件的编号，依次按希望的顺序单击组件，就可以重排 Tab 顺序了。没有输入焦点的组件是没有 Tab 顺序的，如 Label 组件。
项目功能实现
我们通过简单的项目，介绍：
- 采用 UI 设计器设计了窗体界面
- 信号槽的3种实现方式
了解完大概的概念以后，下面开始设计程序功能。
对于该程序，希望它的功能如下：
- 单击 UnderLine、Italic、Bold 3 个 CheckBox(勾选框) 时，根据其状态，设置 PlainTextEdit 里的文字的字体样式；
- Black、Red、Blue 3 个 RadioButton(单选框) 是互斥选择的，单击某个 RadioButton 时，设置文字的颜色；
- 单击“退出”按钮时，关闭窗口，退出程序。
添加界面组件
拖拽3个CheckBox组件、3个RadioButton、1个pushButton。
参考下表，修改对象名以及属性。
设置步骤不是必须的，只是为了规范以及方便对照下文的代码，才建议这么做的。
| 对象名 | 类名称 | 属性设置 | 备注 |
|---|---|---|---|
| txtEdit | QPlainTextEdit | Text="Hello, Text" | 用于显示文字内容，可编辑 |
| chkBoxUnder | QCheckBox | Text="Underline" | 设置字体为下划线 |
| chkBoxItalic | QCheckBox | Text="Italic" | 设置字体为斜体 |
| chkBoxBold | QCheckBox | Text="Bold" | 设置字体为粗体 |
| rBtnBlack | QRadioButton | Text="Black" | 字体颜色为黑色 |
| rBtnRed | QRadioButton | Text="Red" | 字体颜色为红色 |
| rBtnBlue | QRadioButton | Text="Blue" | 字体颜色为蓝色 |
| btnClose | QPushButton | Text="Exit" | 退出程序 |
字体样式设置
针对字体样式的设置，我们采取界面化的操作。
回到Edit Widget(F3) 模式选中 chkBoxUnder 组件，单击右键调出其快捷菜单。在快捷菜单中单击菜单项“Go to slot…转到槽”， 出现一个对话框。
该对话框列出了 QCheckBox 类的所有信号，第一个是 clicked()，第二个是带一个布尔类型参数的 clicked(bool)，还有其他的信号..
- 信号 clicked(bool) 会将 CheckBox 组件当前的选择状态作为一个参数传递，在响应代码里可以直接利用这个传递的参数。
- 信号 clicked()，需要在代码里读取 CheckBox 组件的选中状态。
选择 clicked(bool) 信号。 单击“OK”按钮，在 Widget 的类定义中，会在 private slots 部分自动增加一个槽函数声明，函数名是根据发射对象及其信号名称自动命名的。 我们在函数体中添加以下代码：
void Widget::on_chkBoxUnder_clicked(bool checked)
{
QFont font=ui->plainTextEdit->font();
font.setUnderline(checked); // 设置下划线
ui->plainTextEdit->setFont(font);
}
以此类推，我们完成选择框的这些样式对应的功能
...
font.setItalic(checked); // 设置斜体
...
font.setBold(checked); // 设置加粗
运行程序，可以看到字体的设置已经成功了。
字体颜色设置
为了理解信号槽的开发流程，我们这里不再通过界面生成代码。
我们自定义槽函数，再将3个RadioButton的clicked(bool)信号关联到同一个槽函数。
添加槽
在widget.h中，我们在Widget类中的 private slots:添加一个槽。
void setTextFontColor();
并在widget.cpp中，完成上述方法的实现。
void Widget::setTextFontColor()
{
QPalette plet=ui->plainTextEdit->palette();
if (ui->rBtnBlue->isChecked())
plet.setColor(QPalette::Text,Qt::blue);
else if (ui->rBtnRed->isChecked())
plet.setColor(QPalette::Text,Qt::red);
else if (ui->rBtnBlack->isChecked())
plet.setColor(QPalette::Text,Qt::black);
else
plet.setColor(QPalette::Text,Qt::black);
ui->plainTextEdit->setPalette(plet);
}
如果编译运行程序，点击界面并没有实现有关的效果。这是因为我们现在还没将槽和信号连接(connect)起来。
连接槽与信号
按钮功能实现
剩下点击按钮退出程序这一步骤了。有2种方法：
Signals Slots Editor
回忆起我们在以前通过Signals Slots Editor的方式添加并自动连接信号槽。
界面中间靠下的位置，找到Action Editor那一行，点击Signals Slots Editor
点击绿色的加号，做以下选择：
- 发送者：btnClose
- 信号：
clicked() - 接收者：Widget
- 槽：
close()
Edit Signal/Slots
在 UI 设计器里，单击上方工具栏里的“Edit Signals/Slots(快捷键 F4)”按钮，窗体进入信号与槽函数编辑状态。
将鼠标移动到按钮上方，再按下鼠标左键，移动到窗体的空白区域释放左键；弹出“配置连接”对话框。
勾选显示从QWidget继承的信号和槽，在左侧列表中选择clicked()，在右侧列表选择close()。