18 将 Qt Designer 生成的代码与应用整合

在上一篇中，我们学习了如何使用 Qt Designer 创建用户界面（UI）。在本篇中，我们将探讨如何将 Qt Designer 生成的代码与实际的 Python 应用程序整合，确保我们的 UI 能够与逻辑层互相配合。我们将通过一个简单案例来说明这一过程。

环境准备

首先，请确保你已经安装了以下工具：

• Python
• PyQt5
• Qt Designer

接下来，你需要使用 Qt Designer 创建一个简单的 UI，并将其保存为 .ui 文件。我们将用这个 .ui 文件生成 Python 代码。

使用 Qt Designer 创建 UI

1. 打开 Qt Designer。
2. 创建一个新窗口（Main Window）或对话框（Dialog）。
3. 在界面上添加一些控件，例如一个 QPushButton 和一个 QLabel。
4. 设置控件的对象名称（例如 my_button 和 my_label）。
5. 保存文件为 my_ui.ui。

完成这些步骤后，你就可以生成相应的 Python 代码。

从 UI 文件生成 Python 代码

使用以下命令可以将 my_ui.ui 文件转换为 Python 代码：

pyuic5 my_ui.ui -o my_ui.py

生成的 my_ui.py 文件包含了由 Qt Designer 生成的 Python 类。现在我们来整合这个文件与应用程序代码。

整合代码示例

以下是一个完整的示例，演示如何使用生成的 UI 代码以及如何将其与应用逻辑整合在一起：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from my_ui import Ui_MainWindow  # 导入从 Qt Designer 生成的代码

class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        # 连接按钮点击事件
        self.my_button.clicked.connect(self.on_button_click)

    def on_button_click(self):
        self.my_label.setText("按钮被点击了！")  # 更新标签的文本

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

代码解读

1. 导入模块：我们从 PyQt5 库导入所需的类，并从 my_ui 模块导入生成的 Ui_MainWindow 类。

2. 创建主窗口类：我们定义了 MainWindow 类，继承自 QMainWindow 和 Ui_MainWindow，允许我们使用 Qt Designer 定义的界面。

3. 初始化方法：在 __init__ 中，调用 setupUi(self) 方法来设置 UI，并连接 my_button 的点击事件到 on_button_click 方法。

4. 按钮点击事件：在 on_button_click 方法中，我们更新 my_label 的文本，实现了简单的事件响应。

运行程序

确保你在同一目录下拥有 my_ui.py 和上述代码文件。运行程序后，你应该能看到创建的窗口，点击按钮后标签内容会更新。

总结

在本篇中，我们学习了如何将 Qt Designer 生成的代码与 PyQt5 应用整合。通过创建 UI、生成 Python 代码以及在应用中实现控件事件的处理，我们构建了一个简单的交互式界面。下一篇中，我们将继续深入了解 PyQt5 中的常用组件，以及它们如何帮助我们更好地设计用户界面。