第4章可视化UI设计

之前我们通过一个简单的示例分析了Qt创建的GUI项目的各个文件的作用，剖析了可视化设计的UI文件是如何被转换为C++类定义文件创建窗口界面的。这些是使用Qt Designer可视化设计UI并使各个部分融合起来运行的基本原理。
UI可视化设计布局管理问题。使用布局管理可以使界面上各个组件合理的分布，并可随窗口大小变化自动自用调整大小和位置。
在可视化设计UI时，设置组件的内建信号与窗体上其他组件的公有槽函数关联、
在可视化设计UI时，为组件的内建信息号创建槽函数，并使用与组件的信号自动关联。
创建资源文件，将图片文件导入资源文件，为界面上组件设置图标。

4.1窗口界面设计

1、创建项目和资源文件，创建一个新项目命名为GUI_test2,选择qmake构建系统，窗口基类选择QDialog,勾选Cenerate form复选框，QtDialog会自动创建U文件 dialog.ui
①在 Qt Creator 的项目导航栏中，右键点击项目名称→添加新文件
②在弹框对话框中选择Qt→ Qt Resource File →点击选择按钮
③输入文件名res,选择保存，点击下一步，项目管理目录树理会自动创建一个资源文件组。在资源文件名节点的快捷菜单中选择Open inEditor菜单项可以打开资源文件编译器，如图4-1所示
图片[1] - 第4章可视化UI设计 - 宋马
资源文件的主要功能是存储图标和图片，以便在程序中使用，在资源文件里首先需要建一个前缀（prefix）例如icons,表示资源的分组，如果选择的图标文件不在本项目中，会提示复制到本项目中，所以，最好提前将图标文件放在项目子目录下。
添加完成后如图4-2所示
图片[2] - 第4章可视化UI设计 - 宋马
2.窗口界面设计
在图4-2的项目管理树上双击，dialog.ui打开Qt Designer对窗口进行可视化设计。图4-3是已经设计好的窗口，在界面设计中使用了布局管理功能。窗体中间的文本框是一个QPlainTextEdit组件，在组件面板的Input Widgets分组里有这种组件。
图片[3] - 第4章可视化UI设计 - 宋马
在UI可视化设计中，对于需要再程序中访问的界面组件，例如按钮、需要读取输入的编辑框，需要在显示结果的标签等，应该修改其对象的名称，以便在程序里区分。对于不需要再程序里访问的界面组件，例如用于组件分组的分组框、布局等，无需修改其对象名称，由Qt Designer自动命名即可。
图4-3所设计窗口上各种主要组件的名称、属性设置和说明如表4-1所示。

表4-1 dialog.ui中各主要组件的名称、属性设置和说明

对象名称	类名	属性设置	说明
plainTextEdit	QPlainTextEdit	text=“Qt 6 C++开发指南” font.PointSize=20	简单的多行文本编辑器。设计时双击组件可设置其显示文字
chkUnderline	QCheckBox	text=“Underline”	设置文字带有下划线
chkItalic	QCheckBox	text =“Italic”	设置文字为斜体
chkBold	QCheckBox	text =“Bold”	设置文字为粗体
radioBlack	QRadioButton	text =“Black” checked=true	设置文字颜色为黑色
radioRed	QRadioButton	text =“Red” checked=true	设置文字颜色为红色
radioBlue	QRadioButton	text =“Blue” text =“Red” checked=true	设置文字颜色为蓝色
btnClear	QPushButton	text =“清空”	清除编辑器中的文字
btnOK	QPushButton	text =“确定”	返回确定，并关闭窗口
btnExit	QPushButton	text =“退出”	退出程序
Dialog	Dialog	windowTitle=“信号与槽的使用”	窗体，其对象与窗口类同名

要为QPushButton 按钮设置图标，只需要在属性编辑器里修改其icon属性。在icon属性值输入框的右端下拉表框里选择Choose Resource，就可以从项目的资源文件中选择图标。
对于界面的组件的属性设置，需要注意以下几点。
①对象名称是窗口上的组件的实例名称，界面上的每个组件需要有一个唯一的对象名称，程序里访问界面组件时都是通过其对象名称进行的，自动生产的槽函数名称里也有对象名称。所以，组件的对象名称设置好之后一般不要改动，如果进行修改，涉及到的代码都需要进行相应的调整。
②窗体的对象名称会影响窗口UI类的名称。dialog.ui被UIC编译生成的问津ui_dialog.h,窗口的对象名称与文件ui_dialog.h中定义的窗口UI类有关。一般不在Qt Designer里面修改窗体的对象名称，除非是要重命名一个窗口，那么需要对窗口相关的4个文件都要进行重命名。
③设置窗体的font属性后，界面上其他组件的默认字体就是窗体的字体，无需在重新设置，除非为某个组件设置单独的字体。
④组件的属性都有默认值，一个组件的某个属性被修改后，属性编辑器的属性名称会以粗体显示。如果恢复默认值，点击属性值有端的还原按钮即可。

4.2界面组件布局管理

Qt的UI设计具有布局（layout）功能。所谓布局，就是指界面上组件的排列方式。使用布局可以使组件有规则地分布，并且使其随着窗口大小变化自动调整大小和相对位置。布局管理是UI 设计的必备技巧。
1.界面组件的层次关系
为了将界面上的各个组件的分布设计得更加美观，我们经常使用一些容器类组件。例如，将3个复选框（QCheckBox类）放置在一个分组框（QGroupBox类）里，这个分组框就是这3个复选框的容器，移动这个分组框就会同时移动其中的3个复选框。
2.布局管理
Qt为UI设计提供了丰富的布局管理功能。在Qt Designer里，组件面板里有Layouts和Spacers 两个分组，在上方的工具栏里有布局管理的按钮。

表4-2组件面板上Layouts和Spacers两个分组里面的布局组件的说明

组件名称	说明	使用场景示例
Vertical Layout (垂直布局)	子控件按垂直方向自动排列	注册表单、设置项列表
Horizontal Layout (水平布局)	子控件按水平方向自动排列	工具栏按钮组、标签+输入框组合
Grid Layout (网格布局)	子控件在网格中自动对齐	数据表格、仪表盘控件
Form Layout (表单布局)	标签和字段的标准两列布局	用户信息表单、配置对话框
Vertical Spacer (间隔器)	创建弹性空白区域	工具栏右侧留白、底部按钮顶起

表4-3工具栏上各按钮的说明

图标	按钮及快捷键	说明
	Edit Widget (F3)	界面设计进入编辑状态，就是正常的设计状态
	Edit Signals/Slots (F4)	进入信号与槽的可视化设计状态
	Edit Buddies	进入伙伴关系编辑状态，可以设置一个标签与一个组件构成伙伴关系