Python 与 Qt Designer：更快的 GUI 应用程序开发

你有两个主要选项来为你的 PyQt 窗口和对话框构建 GUI：要么使用 Qt Designer，要么在纯 Python 代码中手动设计 GUI。虽然第二种方法可以让你完全控制应用程序的代码，但第一种方法可以显著提高生产力。

大多数 GUI 应用程序都有一个主窗口和多个对话框。如果你正在尝试以有效且用户友好的方式制作这些图形组件，那么 Qt Designer 就是适合你的应用程序。在本教程中，你将学习如何有效地使用 Qt Designer 开发你的 GUI。

Qt Designer 简介

Qt Designer 概述 Qt Designer 的 WYSIWYG（所见即所得）用户界面，可以让你快速轻松地为 PyQt 应用程序开发 GUI。此应用程序允许你通过拖放 QWidget 组件到空白表单来构建 GUI。之后，你可以使用各种布局工具将它们排列成一个逻辑界面。

此外，Qt Designer 使你能够连接信号和槽、构建菜单和工具栏、以各种样式和分辨率检查你的 GUI，以及做更多的事情。

Qt Designer 具有平台和编程语言独立性。它生成 .ui 文件，而不是任何特定编程语言的代码。这些文件是 XML 文档，提供有关如何创建基于 Qt 的 GUI 的全面说明。

如何安装和启动 Qt Designer

根据你当前的平台，有几种不同的方法可以下载和安装 Qt Designer。无论你使用 Windows 还是 Linux，你都可以从终端或命令行执行以下命令

在这种情况下，你设置了一个虚拟 Python 环境，将其打开，并安装 PyQT5 和 PyQT5-tools。Pyqt5 安装 PyQt 和必要的 Qt 库的副本，而 pyqt5-tools 安装了一系列 Qt 工具，包括 Qt Designer。

从官方下载站点获取适用于你当前平台的 Qt 安装程序后，你可以继续。在这种情况下，你必须建立一个 Qt 账户才能完成安装。

如果你已经使用前面介绍的方法之一安装了 Qt Designer，请启动该程序。以下两个窗口应该会出现在你的屏幕上

背景中的窗口是 Qt Designer 的主窗口。Qt Designer 的“新建表单”对话框窗口显示在前景中。你将在接下来的两部分中学习如何使用这些 Qt Designer 界面元素的基础知识。

在 Qt Designer 中使用“新建表单”对话框

程序启动时会显示 Qt Designer 的主窗口和“新建表单”对话框。在此对话框中，你可以选择五种可用的 GUI 模板。这些模板提供了构建自定义小部件、主窗口和对话框的机会。Qt Designer 启动时，“新建表单”对话框始终默认占据焦点。如果它没有，你可以从 Qt Designer 的工具栏中选择“新建”。主菜单的“文件”>“新建”选项和键盘快捷键 Ctrl+N 是其他选项。

要启动新表单，请从“新建表单”对话框中选择要使用的模板，然后单击“创建”。要使用 Qt Designer 模板创建新的空白表单，请从“新建表单”菜单中选择所需的模板，单击“创建”或按键盘上的 Alt+R。请记住，前两个对话框模板都带有一组预定义按钮。这些是 QDialogButtonBox 中常见按钮。此类会自动处理不同平台上按钮的放置或层次结构。

例如，如果你使用“取消”和“确定”按钮，Linux 和 macOS 要求按钮以相同的顺序显示。但在 Windows 中，按钮顺序是反过来的，先是“确定”，然后是“取消”。QDialogButtonBox 会自动解决此问题。

使用 Qt Designer 的主窗口

Qt Designer 的主窗口有一个菜单栏，其中包含用于管理和保存表单、编辑表单和切换编辑模式、布局和预览表单，以及配置应用程序和访问其帮助文件的选项

此外，主窗口还有一个包含常用设置的工具栏。其中大多数功能在更新和组织表单时会很有用。此外，以下选项可以在主菜单中找到，特别是在“文件”、“编辑”和“表单”菜单中

Qt Designer 的主窗口还有几个停靠窗口，提供各种功能和工具

• 小部件箱
• 对象检查器
• 属性编辑器
• 资源浏览器
• 动作编辑器
• 信号/槽编辑器

你可以使用小部件箱中的布局管理器、间隔符、标准小部件和其他项目来为你的对话框和窗口设计 GUI

窗口顶部的小部件箱有一个筛选选项。你可以通过输入其名称快速访问对象或小部件。这些项目根据其预期用途进行分组。通过单击其标签旁边的手柄，类别中的每个对象成员都可以可见或不可见。

在创建用户界面 (GUI) 时，你可以将小部件箱中的元素拖放到你的表单上。

窗口底部的小部件箱还有一个便笺本部分。你可以在此部分中将常用项目分类到不同的部分。将表单上的任何当前小部件拖放回小部件箱，即可将其添加到便笺本类别中。当你右键单击便笺本类别中的小部件时，你可以通过从上下文菜单中选择“删除”来将其删除。

对象检查器以树状视图显示活动表单上的所有对象。对象检查器顶部还有一个筛选框，用于在树中查找对象。表单及其小部件的名称和其他特性可以使用对象检查器进行更改。每个小部件都可以右键单击以打开一个包含更多选项的上下文菜单

你可以使用对象检查器控制表单上的小部件。它们可以被赋予新名称、更改某些属性、从表单中删除等等。使用对象检查器的树状视图，可以查看小部件和对象在当前配置中的父子关系。

Qt Designer 主窗口中的另一个停靠窗口是属性编辑器。此窗口以两列表显示活动对象的属性和值。顾名思义，属性编辑器允许你更改对象的属性值

属性编辑器简化了访问和修改活动对象的名称、大小、字体、图标和其他属性。你在表单上选择的任何项目都会影响编辑器提供的属性。

属性按类层次结构顺序显示。例如，如果你在表单上选择一个 QPushButton，属性编辑器首先显示 QWidget 的属性，然后是 QAbstractButton，最后是 QPushButton 本身。请记住，编辑器的行显示不同的颜色以在视觉上区分底层类。

最后，有三个停靠窗口，它们通常以选项卡的形式显示在右下角

1. 借助资源浏览器，你可以快速将资源添加到你的应用程序中，例如图标、翻译文件、照片和其他二进制文件。
2. 动作编辑器提供了一种向你的表单添加动作的方法。
3. 信号/槽编辑器使你能够连接表单中的信号和槽。

GUI 开发：Qt Designer vs. 手写代码

你可以使用 PyQt 以两种方式之一创建窗口或对话框的 GUI：手动用纯 Python 代码编写 GUI 或使用 Qt Designer。这两种选择都有优缺点。有时选择何时使用其中一个可能具有挑战性。

Qt Designer 提供的用户友好图形界面使其可以轻松快速地开发 GUI。作为开发人员，这可以提高生产力并缩短开发周期。

另一方面，手动编码你的 GUI 可以让你对它们拥有更多的控制权。通过这种方法，你除了代码编辑器或集成开发环境 (IDE) 之外不需要任何工具，这对于在某些开发环境中添加新组件和功能很有用。

使用 Python 和 Qt Designer 创建主窗口

你可以使用 PyQt 创建主窗口样式和对话框样式程序。主窗口样式程序中常见的特点是：一个带有状态栏、中心小部件、菜单栏和一个或多个工具栏的主窗口。它们还可能包含几个独立于主窗口的对话框。

使用 Qt Designer 中预配置的“主窗口”模板，你可以轻松构建主窗口的界面。一旦你使用该模板生成了一个表单，你将拥有执行以下任务所需的资源

• 制作主菜单
• 创建和填充工具栏
• 排列小部件

Qt Designer 创建的表单保存为 .ui 文件。你以后在应用程序中重新创建 GUI 所需的所有数据都包含在这些 XML 文件中。

转到“文件”>“保存”并输入主窗口以保存你的表单。

使用“另存为”弹出窗口选择一个目录来保存文件，然后单击“保存”。按键盘上的 Ctrl+S 也会弹出“另存为”窗口。

留在 Qt Designer 中，以便你可以继续向新创建的主窗口添加菜单和工具栏。

主菜单的创建

Qt Designer 的主窗口模板在表单顶部有一个空导航栏。要向菜单栏添加菜单，请使用菜单编辑器。应用程序的选项可以通过下拉菜单快速访问。在 Qt Designer 中重新打开你新创建的主窗口。你会注意到表单顶部有一个带有占位符文本“在此处键入”的导航栏。

你可以通过双击或按 Enter 键在此占位符文本上键入你的第一个菜单的名称。按 Enter 键确认菜单名称。

想象一下，你希望设计你的文本编辑器。通常，此类应用程序有一个“文件”菜单，其中至少包含以下一些选项

• 正在创建新文档
• 打开以启动当前文档
• 打开以通过最近访问最近查看的文档
• 保存文档
• 退出程序

这是使用 Qt Designer 制作此菜单的方法

Qt Designer 中的菜单编辑器使向菜单栏添加菜单变得简单。在键入菜单项或菜单选项的名称时，可以使用与号 (&) 作为键盘快捷键。例如，假设你在“文件”菜单中的字母 F 之前添加了一个字符。在这种情况下，你可以通过按 Alt+F 访问该菜单。同样，如果你在启动“文件”菜单后在“新建”菜单中的字母 N 之前添加了一个连字符。按 N 打开“新建”选项。

你还可以使用菜单编辑器向菜单添加分隔符。这是一种逻辑分组和视觉分离菜单选项的有用方法。双击活动菜单末尾菜单编辑器中的“添加分隔符”选项以添加分隔符。通过右键单击现有分隔符并从上下文菜单中选择“删除分隔符”，你可以将其删除。此外，你可以使用此菜单创建新分隔符。

如果你需要将分隔符更改到不同的位置，你可以将其拖到菜单中的所需位置并将其放置在那里。分隔符的位置将显示为一条红线。

可以将子菜单添加到特定的菜单选项。单击要链接子菜单的菜单项旁边的图标，就像在上面的示例中对“打开最近”选项所做的那样。

转到“表单预览”，或按键盘上的 Ctrl+R 以运行表单的预览。

Qt Designer 提供了一个动作编辑器来创建、个性化和管理动作。当你向特定菜单添加菜单选项时，你就创建了一个动作。每当你创建一个类似于示例文本编辑器中“文件”菜单的菜单时，一个新的 QMenu 对象会自动添加到你的菜单栏。你可以在工具中使用以下有用的设置来自定义你的动作

以下选项可以使用动作编辑器进行调整、更改或设置

• 动作的措辞，显示在菜单选项和工具栏按钮上
• 你将在代码中引用动作对象的对象名称
• 将出现在你的工具栏按钮和菜单选项上的符号
• 动作的可选中方面
• 键盘快捷键为用户提供了一种方便地访问动作的方式。

对于不立即执行动作而是打开一个弹出窗口以完成其他动作的选项，通常使用菜单选择文本中的最后省略号 (...) 来命名。

创建工具栏

Qt Designer 允许你根据需要向主窗口的 GUI 添加任意数量的工具栏。为此，请右键单击表单并从上下文菜单中选择“添加工具栏”。这样做会将一个空白工具栏添加到窗口顶部。或者，你可以选择“将工具栏添加到其他区域”以提前指定要添加特定工具栏的工具栏区域。

工具栏设置好后，你可以向其中添加按钮。为此，你使用的是动作，而不是小部件箱中的单个工具栏按钮。使用动作编辑器向你的工具栏添加动作

由于动作可以在工具栏按钮和菜单选项之间共享，因此你可以重用在前面部分填充菜单时创建的动作。在动作编辑器中单击一个动作，然后将其拖放到工具栏中以填充它。请记住，你可以通过右键单击工具栏来添加分隔符，以在工具按钮之间添加视觉分隔。

设置一个中心小部件

Qt Designer 使用 QMainWindow 创建主窗口模板。你可以使用此类提供的基本布局创建菜单栏、一个或多个工具栏、一个或多个停靠小部件、一个状态栏和一个中心小部件。在 Qt Designer 中，QTextEdit 对象是主窗口模板上的主小部件。

使用基本的 QWidget 对象作为主窗口 GUI 上的主小部件是一个好主意，因为你可以在其顶部以逻辑布局分层单个小部件或多个小部件。

例如，你可以在示例文本编辑器中使用单个小部件，为用户提供一个键入、复制、粘贴和编辑文本的地方。你可以通过使用 QTextEdit 对象并将垂直（或水平）布局作为主小部件的布局来实现此目的

在此示例中，你首先将 QTextEdit 拖到表单上。之后，你单击表单以选择你的主小部件。通过从 Qt Designer 工具栏中选择“垂直布局”，你可以将垂直布局应用于你的主小部件。

你使用对象检查器将布局的边距从 9 像素调整到 1 像素，因为 QTextEdit 周围的间距看起来不正确。

使用 Qt Designer，你可以使用各种布局管理器快速组织你的小部件。主工具栏上与布局相关的区域可能是 Qt Designer 中安排 GUI 的最简单方法。

复合中心小部件布局

在设计主窗口时，可能需要将多个小部件以特定布局作为中心小部件。由于 QWidget 对象是 Qt Designer 中主窗口模板的默认中心小部件，你可以使用它来构建你独特的小部件布局，然后将其设置为该中心小部件的顶层布局。

如上一节所示，你可以使用 Qt Designer 中的布局管理器来安排你的小部件。你可以通过执行以下步骤为你的主窗口的 GUI 创建一个复合小部件布局

1. 通过将小部件拖放到表单上，将它们添加到接近其预期位置。
2. 选择特定布局应共同管理的小部件。
3. 使用 Qt Designer 的工具栏、主菜单或上下文菜单应用正确的布局。

推荐的做法是，首先将所有小部件和间隔符拖到表单中，然后重复选择相关的小部件和间隔符，将布局应用于它们。你也可以将布局拖到表单上，并将小部件拖到布局上。

考虑创建一个计算器应用程序作为示例。为了显示操作及其结果，你的表单顶部必须有一个 QLineEdit 对象。对于行编辑下面的数字和操作，你需要一些 QPushButton 对象。这将打开一个如下所示的窗口

这看起来像一个计算器，但用户界面混乱无序。为计算器的顶层布局使用垂直框布局，为按钮使用网格样式，以创建更美观的计算器 GUI

Python 和 Qt Designer 用于对话框创建

小对话框通常用于通过显示错误警告或有关特定操作的一般信息与用户通信，或提供附加功能，例如首选项对话框。此外，对话框可以用于请求用户提供信息或请求确认即将进行的操作。

你现在可以在应用程序中使用 PyQt 广泛的内置对话框集合。它们只需要从 PyQt5.QtWidgets 导入。

你可以立即在代码中使用这些内置对话框中的任何一个。大多数都提供类方法来根据你的需要创建特定的对话框。PyQt 除了这些对话框之外还提供了 QDialog 类。尽管 Qt Designer 是一个更快的选择，但你可以使用此类轻松地在代码中设计你的对话框。

在接下来的部分中，你将学习如何使用 Qt Designer 及其对话框模板来设计、布局和个性化你的对话框。

建立对话框 GUI

从“新建表单”对话框中选择正确的模板，使用 Qt Designer 创建自定义对话框。请将所需的部件拖放到表单上，正确排列它们，然后将表单保存为 .ui 文件，以便以后在你的应用程序中使用。

回到你的示例文本编辑器，假设你希望包含一个如下所示的“查找和替换”对话框

在这里，你首先使用“无按钮对话框”模板构建一个空白对话框，然后在“对象检查器”中将窗口标题更改为“查找和替换”。然后，你使用“小部件箱”将两个 QLabel 对象拖放到表单上。这些标签请求用户要搜索和替换的词。与标签相邻的相应 QLineEdit 对象将填充这些词。

下一步是向表单上放置三个 QPushButton 对象。用户可以使用这些按钮在其打开的文档中搜索和替换词。为了提供“匹配大小写”和“匹配整个单词”选项，你添加了两个 QCheckBox 对象。

添加所有小部件后，请务必在表单中组织它们，使其与你为最终对话框设定的目标相匹配

连接槽和信号

到目前为止，你一直在使用 Qt Designer 的默认模式“修改小部件”。在此模式下，你可以向表单添加小部件、更新小部件的属性、排列表单上的小部件以及执行其他操作。

通过选择工具栏中与模式相关的部分中的必要按钮，Qt Designer 会显示如下所示

你应该切换到“编辑信号/槽”模式来编辑你的小部件和表单的内置信号和槽。

PyQt 中的事件是用户在小部件和表单上的操作，例如按键或点击。每当事件发生时，当前小部件都会发出信号。你可以使用此技术响事件执行操作。这些操作的名称是槽，它们是方法或函数。

选择小部件响应事件发出的信号之一，并将其连接到所选的槽，槽将响应事件执行。

大多数小部件，包括对话框和窗口，都有内置信号，这些信号在小部件上发生特定事件时发出。此外，小部件还具有内置槽，可让你执行预定义任务。

使用 Qt Designer，你必须用鼠标选择信号提供者小部件，然后将其拖放到槽提供者小部件上，以在两个小部件之间创建信号和槽连接。这会在 Qt Designer 中打开“配置连接”对话框。返回“查找和替换”对话框并在 Qt Designer 中选择“编辑信号/槽”模式。然后将“取消”按钮拖到表单上

该链接表示并明确为从槽提供者小部件到信号提供者小部件的活动箭头。此外，你还会注意到信号的名称和你刚刚连接的槽。

在这种情况下，你将对话框的 reject() 槽连接到“取消”按钮的 clicked() 信号。现在，如果你单击“取消”，对话框将关闭，忽略你的操作。

双击箭头或其中一个标签以编辑连接。这将打开“配置连接”对话框，你可以在其中根据你的要求修改连接的信号或槽。

应用程序中的窗口和对话框集成

到目前为止，你已经学习了如何使用 Qt Designer 为你的主窗口和对话框构建 GUI。在本节中，你将了解如何将这些 GUI 包含到你的 Python 代码中并创建一个功能性应用程序。使用 PyQt，主要有两种方法可以实现这一点

1. 利用 pyuic5 将你的 .ui 文件的内容转换为 Python 代码
2. 使用 uic.loadUi() 动态加载 .ui 文件的内容

第一种方法使用 pyuic5，它是 PyQt 安装附带的一个实用程序，可以让你将 .ui 文件的内容转换为 Python 代码。由于其出色的工作方式，这种策略经常被使用。它有一个问题：每次使用 Qt Designer 更改 GUI 时，你都必须重新生成代码。

第二种方法使用 uic.loadUi() 将 .ui 文件的内容动态加载到你的应用程序中。这种方法在处理不需要大量加载时间的适度 GUI 时效果很好。

安装窗口和对话框

现在需要设置你的窗口和对话框以在实际应用程序中使用（在本例中，是一个示例文本编辑器）。如果你遵循本教程，你应该至少有两个 .ui 文件

1. 示例文本编辑器程序的 GUI 显示在 main_window.ui 中。
2. “查找和替换”对话框的 GUI 位于 find_replace.ui 中。

立即创建一个名为 sample_editor/ 的新目录。在此目录中创建一个名为 ui/ 的新目录，并将你的 .ui 文件移入其中。另外，将包含菜单选项图标和工具栏按钮的 resources/ 目录复制到 sample_editor/ui/ 目录。

打开你喜欢的 IDE 或代码编辑器，并在 sample_editor/ 目录中创建一个名为 app.py 的新文件。向其中添加以下代码

此 Python 脚本使用 PyQt5 框架创建了一个简单的文本编辑器应用程序。该应用程序允许用户执行基本的文本编辑功能，例如打开和保存文件、查找和替换文本以及退出应用程序。

该脚本导入以下模块

• Sys：提供对解释器使用或维护的一些变量以及与解释器强交互的函数的访问。
• QApplication、QDialog、QMainWindow、QMessageBox：PyQt5.QtWidgets 模块中的类，表示用于构建应用程序的不同 UI 组件。
• loadUi：PyQt5.uic 模块中的一个函数，用于加载使用 Qt Designer 创建的 UI 文件。

该脚本定义了两个类：Window 和 FindReplaceDialog。

1. Window 是 QMainWindow 和 Ui_MainWindow 的子类。Ui_MainWindow 是一个由 pyuic5 实用程序从使用 Qt Designer 创建的 UI 文件 main_window_ui.ui 生成的类。Window 类重写了 __init__ 方法，通过调用 Ui_MainWindow 的 setupUi 方法并使用 connectSignalsSlots 方法将信号连接到槽来设置 UI。connectSignalsSlots 方法将三个动作连接到它们各自的槽：action_Exit 连接到 close，action_Find_Replace 连接到 find and replace，action_About 连接到 about。findAndReplace 方法创建一个 FindReplaceDialog 实例并使用 exec 方法显示它。about 方法使用 QMessageBox.about 方法显示一个信息消息框。
2. FindReplaceDialog 是 QDialog 的子类。它重写了 __init__ 方法，以使用 loadUi 函数加载使用 Qt Designer 创建的 UI 文件 find_replace.ui。

最后，脚本检查它是否作为主程序运行（if __name__ == "__main__"），并创建一个 QApplication、Window 实例，使用 show 方法显示窗口，并通过调用 app.exec() 启动应用程序事件循环。当用户关闭应用程序窗口或使用 action_Exit 动作退出应用程序时，事件循环终止，脚本退出。

启动此程序后，以下窗口将出现在你的屏幕上

结论

你使用 Qt Designer 制作了一个具有基本功能的原型文本编辑器。你应该知道，创建此程序仅需要 44 行 Python 代码，这大大减少了手动从头开始创建类似应用程序的 GUI 所需的代码行数。

使用 Qt Designer，你可以通过将所有必要的部件拖放到空白表单上，快速轻松地构建你的 GUI。这些图形用户界面保存为 .ui 文件，你可以将其转换为 Python 代码并在你的程序中使用。