「C++ Qt6 开发」Qt 可视化 UI 设计

1 项目资源文件

1.1 创建一个项目资源文件

先创建一个项目，此处创建了一个 Widget Application 项目，基类选择的是 QDialog。

点击 File 列表中的 New File，并选择 Qt 找到 Qt Source File 创建项目资源文件。资源文件的名称设定为 res.qrc。

资源文件主要的功能是存储图标和图片文件，以便在程序中使用。在资源文件中首先需要建一个前缀（.prefix），例如 icons。前缀表示资源的分组。

1.2 项目资源文件的使用

首先可以在项目的根目录下创建一个 imgs 文件夹，用于存储需要用到的图片。

后续可以将这些图片添加到资源文件 res.qrc 的 icons 分组中，便于后续使用。

点击 dialog.ui 文件打开 Qt Designer 界面，创建一些按钮，在按钮中可以修改其属性 icon，在资源文件中选择想要设置的图片作为按钮的图标。

2 界面组件布局管理

2.1 界面组件的层次关系

为了让界面上的各个组件变得整齐美观，通常使用一些容器类组件。例如，将 3 个复选框（QCheckBox）放置在一个分组框（Group Box）中。如下图，groupBox_Font 是 3 个复选框（QCheckBox）的父容器，窗体 Dialog 则是窗体上所有组件的顶层容器。

2.2 布局管理

• Layout 组件

组件名称	对应类	功能描述
Vertical Layout	QVBoxLayout	创建垂直排列的布局容器，子部件按从上到下顺序排列
Horizontal Layout	QHBoxLayout	创建水平排列的布局容器，子部件按从左到右顺序排列
Grid Layout	QGridLayout	创建网格状布局容器，支持多行多列和部件跨单元格
Form Layout	QFormLayout	自动创建两列表单（标签+输入控件），专为数据输入表单优化

---

• Spacer 组件

组件名称	对应类	功能描述
Horizontal Spacer	QSpacerItem	在布局中插入水平弹性空间，推挤两侧部件
Vertical Spacer	QSpacerItem	在布局中插入垂直弹性空间，推挤上下部件

Spacer 核心作用：

[部件A] + [Horizontal Spacer] + [部件B]
└──> 窗口变大时：弹簧扩展 → 部件A左移，部件B右移
└──> 保持部件间距自适应

---

• 工具栏各按钮说明

按钮名称	功能说明	使用场景举例
Edit Widget	直接编辑选中控件的文本内容（如按钮文字、标签文本）	快速修改按钮上的文字“确定”为“提交”
Edit Signals/Slots	可视化建立控件间的信号与槽连接（事件响应关系）	为按钮添加点击事件，连接到窗口的关闭槽函数（close()）
Edit Buddies	建立控件与标签（QLabel）的伙伴关系（快捷键关联）	让标签“&用户名:”与输入框关联，例如可以通过快捷键“Alt + U”聚焦到输入框
Edit Tab Order	设置控件的 Tab 键切换顺序（按 Tab 时焦点的移动路径）	调整表单中输入框的切换顺序，确保按逻辑顺序跳转
Layouts	提供布局管理器快捷按钮（如垂直布局、水平布局、网格布局等）	用网格布局排列多个输入框和标签，确保窗口大小变化时控件自动调整位置
Break Layout	取消选中控件的布局约束，使其恢复自由排列状态	解除误添加的布局，重新调整部分控件的位置
Adjust Size	自动调整所选组件的大小，使其刚好容纳内容（如文本框的文字、按钮的标签）	当按钮文字从 “OK” 改为 “确认提交” 后，点击此按钮自动扩展按钮宽度以完整显示文字

参考

《Qt 6 C++ 开发指南》