前言

本系列第三篇文章（Qt for Python学习笔记—应用程序初探 ）、第四篇文章（Qt for Python学习笔记—应用程序再探 ）中均是使用纯代码方式来开发 PySide6 GUI 应用程序的。

本文是本系列第五篇文章，图文方式介绍可视化界面设计工具——Qt Designer。

1. 简介

Qt 提供了一款名叫 Qt Designer 的工具，该工具提供了 Qt 基本的可绘制窗口部件（如 QLabel 、 QPushButton 等）或布局（如：QVBoxLayout 、 QGridLayout 等），通过鼠标直接拖曳这些窗口部件，放置在窗体的相关位置，按所见即所得的方式，来进行窗体设计，并可以设计的窗体效果进行快速预览。

借助 Qt Designer 工具，能够高效、快速地以可视化方式完成窗体 UI 的设计，界面直观形象，所见所得。

文中会涉及到如下术语，简介如下：

• Widget：部件（也称组件、控件），用于 GUI 的图形界面元素，如按钮、标签等。
• Form：窗体，本文用于指 GUI 窗口的统称。

2 启动 Qt Designer

在本系列第二篇文章（Qt for Python学习笔记—搭建开发环境 ）中有介绍到在安装完成 PySide6 模块后，会在安装路径（如： C:\Develop\Python\Lib\site-packages ）下新增 PySide6 模块，其中就有一组可执行文件（如：designer.exe 、uic.exe 、 rcc.exe 等），其中 designer.exe 就是 Qt Designer 工具的可执行文件。通常为了便于后续启动 Qt Designer，我们会将 designer.exe 创建为桌面快捷方式（可通过鼠标右键，点【发送到】–>【桌面快捷方式】完成）。

单击桌面上的 Qt Designer 快捷方式，然后启动 Qt Designer。在 Qt Designer 窗口出现后，通常会自动弹出一个【新建窗体】的对话框窗口，在该窗口中选择一个窗体模板（如：Main Window），然后点击【创建】按钮，即可进入 Qt Designer 设计窗口。

3. Qt Designer 简介

3.0 窗口界面概览

下图为 Qt Designer 6.0.0 的一个典型设计窗口界面：

整个设计窗口除了窗体标题栏和边框外，可以划分为8个区域：

• 第1个区域：顶部的菜单栏
• 第2个区域：顶部菜单栏下方的工具栏（也称菜单快捷选项）
• 第3个区域：底部的状态栏
• 第4个区域：左侧的窗口部件盒
• 第5个区域：中间的窗体编辑器
• 第6个区域：右侧上方的对象检查器
• 第7个区域：右侧中部的属性编辑器
• 第8个区域：右侧下方的区域，该区域实际上包含3个Tab区域（信号/槽 编辑器、资源浏览器、动作编辑器）

3.1 菜单栏（Menu Bar）

菜单栏提供了 Qt Designer 设计窗口的大多数功能入口，共包括7组主菜单（如下图示）。

3.1.1【文件】主菜单项

该主菜单项下的子菜单项如下图示：

其中常用子菜单项介绍如下：

• 点击【新建…】子菜单项（或按快捷键 Ctrl + N）后，弹出【新建窗体】对话框。

• 点击【打开】子菜单项（或按快捷键 Ctrl + O）后，弹出【打开窗体】对话框，从相关路径中选择要打开的窗体文件（后缀名为 .ui）
• 点击【保存】子菜单项（或按快捷键 Ctrl + S）后，弹出【窗体另存为】对话框，选择保存路径，将当前窗体保存为指定文件名的窗体文件（后缀名为 .ui）

注1：通常情况，保存的窗体文件名与窗体的 objectName 保持一致（这样通过文件名就可以直接知道窗体的名称）。

注2：窗体文件（.ui）实际上一个 xml 文件，它记录了窗体上各部件的属性和位置分布。

扩展：【新建窗体】对话框中提供有三种类型（5种模板）的窗体供选择：

1) Main Window类型的窗体模板：该模板是一个基于 QMainWindow 类的窗体，具有主窗口的特性，顶部通常显示标题栏和边框，窗口上有主菜单栏、工具栏、状态栏等。

2) Widget 类型的窗体模板：该模板是一个基于 QWidget 类的窗体。QWidget 类是所有界面组件的基类，如 QLabel、QPushButton 等界面组件都是从 QWidget 类继承而来的。QWidget 类也是 QDialog 和 QMainWindow 的父类，基于 QWidget 类创建的窗体可以作为独立的窗口运行，也可以嵌入到其他界面组件内显示。

3) Dialog 类型的窗体模板：该模板是一个基于 QDialog 类的窗体，具有一般对话框的特性，如可以模态显示、具有返回值等。可以设置不同的标题栏外观，主要用于通知或收集输入窗口，如颜色对话框、字体对话框等，具体以下有3种：，

——(1) 底部带有对话框按钮的对话框

——(2) 右侧带有对话框按钮的对话框

——(3) 不带对话框按钮的对话框

3.1.2【编辑】主菜单项

该主菜单项下的子菜单项如下图示：

其中前9个子菜单项意思很容易理解，就不作介绍了。

最后4个子菜单项表示4种 GUI 窗口部件编辑模式：

• 【编辑窗口部件】子菜单项：对应部件编辑模式，此模式下可以在 Qt Designer 中添加 GUI 窗口部件，以及修改它们的属性和外观。
• 【编辑信号/槽】子菜单项：对应信号和槽编辑模式，此模式下可以在 Qt Designer 中的窗口部件上关联 Qt 已经定义好的信号和槽。
• 【编辑伙伴】子菜单项：对应伙伴编辑模式，此模式下可以在 Qt Designer 中的窗口部件上建立某个部件和其他窗口部件的伙伴关系。
• 【编辑 Tab 顺序】子菜单项：对应 Tab 编辑模式，此模式下可以在 Qt Designer 中的窗口部件上设置 Tab 键在窗口部件上的焦点顺序。

3.1.3【窗体】主菜单项

该主菜单项下的子菜单项如下图示：

其中：

• 前9个子菜单项，均为布局相关的，会在后续文章中详细介绍。
• 点击【预览于】子菜单项，会显示3个下级子菜单项（【windowsvista 风格】、【Windows 风格】、【Fusion 风格】），在预览时分别对应三种风格的窗体。

• 点击【预览…】子菜单项（或按快捷键 Ctrl + R）后，可以对所创建的窗体进行预览。

• 点击【View C++ Code…】子菜单项后，可以查看该窗体对应的 C++ 代码。
• 点击【View Python Code…】子菜单项后，可以查看该窗体对应的 Python 代码。

• 点击【窗体设定…】子菜单项后，弹出【窗体设定】对话框窗口。

3.1.4【视图】主菜单项

该主菜单项下的子菜单项如下图示：

其中：

• 勾选【窗口部件盒】子菜单项后，在主窗口的停靠区出现【窗口部件盒】
• 勾选【对象检查器】子菜单项后，在主窗口的停靠区出现【对象检查器】
• 勾选【属性编辑器】子菜单项后，在主窗口的停靠区出现【属性编辑器】
• 勾选【资源浏览器】子菜单项后，在主窗口的停靠区出现【资源浏览器】
• 勾选【动作编辑器】子菜单项后，在主窗口的停靠区出现【动作编辑器】
• 勾选【信号/槽 编辑器】子菜单项后，在主窗口的停靠区出现【信号/槽 编辑器】

• 【工具栏】子菜单项，可以对启用哪些快捷按钮进行设置。

3.1.5【设置】主菜单项

该主菜单项下的子菜单项如下图示：

其中：

• 点击【首选项…】子菜单项后，出现【首选项】对话框（如下图示），可根据需要进行相关设置。

• 【其他字体】子菜单项

3.1.6【窗口】主菜单项

该主菜单项下的子菜单项如下图示：

其中：

• 点击【最小化】子菜单项后，将当前窗体设置为最小化。
• 下面列示出 Qt Designer 中已经打开的窗体（当前正在编辑的窗体名前会有个圆点）

3.1.7【帮助】主菜单项

该主菜单项下的子菜单项如下图示：

各子菜单项功能一目了然，就不作进一步介绍了。

3.2 工具栏（Tool Bar）

在编辑窗体时经常会用到工具栏上的快捷按钮，实际上所有工具栏上的快捷按钮均可以通过菜单栏获得。

下图是缺省配置的工具栏：

共分为四组：

• 第一组（3个）：依次对应主菜单项【文件】下的【新建】、【打开】、【保存】子菜单项。

• 第二组（2个）：依次对应主菜单项【编辑】下的【放到后面】、【放到前面】子菜单项。

• 第三组（4个）：依次对应主菜单项【编辑】下的【编辑窗口部件】、【编辑信号/槽】、【编辑伙伴】、【编辑 Tab 顺序】子菜单项。

• 第四组（8个）：依次对应主菜单项【窗体】下的【水平布局】、【垂直布局】、【使用拆分器水平布局】、【使用拆分器垂直布局】、【网格布局】、【在窗体布局中布局】、【分拆布局】、【调整大小】子菜单项。

因工具栏上的按钮均对应菜单栏下的各子菜单项，其功能就请参见菜单栏部分了。

3.3 状态栏（Status Bar）

在状态栏中通常会显示一些跟当前操作相关的信息。

3.4 窗口部件盒（Widget Box）

窗口部件盒提供了用于设计窗体的一些标准的通用部件和布局。窗口部件盒中提供了8个分组类别，每个分组类别都包含具有相似用途或相关功能的部件。

通过单击窗口部件盒中的分组类别标签旁边的手柄，可以显示该分组类别中的所有可用对象（组件或布局）。当窗口处于【编辑部件模式】时，可以从窗口部件盒中选择适当的部件拖动到窗体编辑器中，然后将其拖放到所需的位置来将该组件添加设计到窗体。

3.4.1 布局分组类别（Layouts）

3.4.2 间隔分组类别（Spacers）

3.4.3 按钮分组类别（Buttons）

3.4.4 项目视图分组类别（Item Views）

Item Views 基于模型/视图（Model/View）结构，视图（View）与模型数据（Model Data）关联实现数据的显示和编辑。

3.4.5 项目部件分组类别（Item Widgets ）

Item Widgets 直接将数据存储在每一个项里。一个项存储了文字、文字的格式、自定义数据等。

3.4.6 容器分组类别（Containers）

3.4.7 输入部件分组类别（Input Widgets）

3.4.8 显示部件分组类别（Display Widgets）

3.5 窗体编辑器

窗体编辑器中可以对窗体进行可视化设计，选择左侧窗口部件盒中的相应组件（或布局），通过鼠标拖曳至此区域，放置在相应位置。

上面示例图中分别从左侧窗口部件盒中的【Dispaly Widgets】分组类别中选择了2个 QLabel 部件，从【Input Widgets】分组类别中选择了2个 QLineEdit 部件，从【Buttons】分组类别中选择了2个 QPushButton 部件，通过鼠标拖曳至此区域（主窗体），并进行排列放置。

注1：顶部显示的“Main Window - untitled*” 表示该窗体尚未命名。

注2：此区域也可以通过快捷按钮（Ctrl + R）来对设计后的窗体的效果进行预览。

注3：更多信息会在后续文章中加以介绍。

3.6 对象检查器（Object Inspector）

对象检查器中用树形视图列示出了窗体上所有部件、以及各部件之间的布局和包含关系。

树形视图有两列，分别显示各部件的对象名称（objectName）和对应的类名称。

注：更多信息会在后续文章中加以介绍。

3.7 属性编辑器（Property Editor）

属性编辑器中列出了被选中的窗体或部件的各种属性和对应的值，可以在属性编辑器里修改这些属性的值。

属性编辑器的内容分为两列，其中左侧列是属性的名称，右侧列是该属性对应的值。

属性自上而下分为多个组，实际上代表了类的继承关系。

简单示例介绍：

——上部的 MainWindow : QMainWindow 表示这是一个 QMainWindow 窗体；

——objectName 属性：表示窗体/部件的对象名称，窗体中的每一个部件都需要一个唯一的对象名称，以便在代码中被引用。本例中 objectName 属性的值为“MainWindow”，表示窗体的对象名称为：MainWindow。该值可以进行修改。

——上图可以看出 QMainWindow 类的继承关系为： QObject 类 <– QWidget 类 <- QMainWindow 类。

——其他众多属性本文就不一一说明了，会在后续文章中陆续加以介绍。

注：更多信息会在后续文章中加以介绍。

3.8 信号与槽编辑器（Signal/Slot Editor）

信号与槽编辑器中列出了在 Qt Designer 中关联的信号和槽，通过双击列中的对象或信号/槽，可以进行对象和信号/槽的选择。

注：更多信息会在后续文章中加以介绍。

3.9 资源浏览器（Resource Browser）

资源浏览器中列出了程序使用的资源文件（*.qrc）以及相应的资源。

在该编辑器中可以创建或删除资源文件，也可以添加或取消资源。

注：更多信息会在后续文章中加以介绍。

3.10 动作编辑器（Action Eidtor）

动作编辑器中列出了为窗口部件设计的动作（QAction），并可以创建新动作和删除动作。

动作编辑器提供了一组快捷工具按钮：

• 【新建】按钮

点击该按钮，弹出一个【新建动作】对话框（如下图示），完成相关信息设置，点击【OK】按钮后即可完成创建一个新动作。

注：创建动作后，可以在任何适用的动作处使用它。

• 【删除】按钮

点击该按钮，即可删除被选中的动作。

• 【复制】、【粘贴】按钮

动作编辑器可以在菜单栏、工具栏和窗体之间复制和粘贴动作。

• 【配置动作编辑器】按钮

动作编辑器提供两种视图：图标视图 和 细节视图，点击该按钮，可进行这两种视图的切换。

要将动作添加到菜单栏或工具栏，只需在动作编辑器中在动作上按下鼠标左键，然后将其拖动到首选位置即可。

注：更多信息会在后续文章中加以介绍。

结束语

本系列介绍如何在 Python 中使用 Qt for Python 进行 GUI 应用程序开发。

本文是《Qt for Python 学习笔记》系列第五篇，对可视化设计工具 Qt Designer 进行了一个概览介绍，让读者对 Qt Designer 工具有个初步的认识。

接下来会介绍如何借助 Qt Designer 工具进行可视化界面设计并完成一个 PySide6 GUI 应用程序开发的过程，敬请期待！

希望本文能对您有所帮助！若文中存在疏忽不足或错误，还请不吝赐教！