Qt Designer 快速上手 – wiki大全

作者： /

Qt Designer 快速上手教程

引言

Qt Designer 是一个强大的图形用户界面（GUI）设计工具，它是 Qt 框架的一部分，允许开发者通过拖放的方式，无需编写大量代码即可快速构建出精美且功能丰富的用户界面。它极大地简化了 UI 开发过程，使得设计与代码逻辑能够有效分离，提高了开发效率和代码的可维护性。本文将指导您如何快速上手使用 Qt Designer，并将其与 Python（特别是 PyQt 或 PySide）应用程序结合使用。

1. 安装与启动 Qt Designer

要使用 Qt Designer，您需要先安装 Python 的 Qt 绑定库，如 PyQt 或 PySide。Qt Designer 通常作为这些库的工具集的一部分提供。

安装 PyQt5/PyQt6 或 PySide2/PySide6：

打开您的命令行或终端，并根据您选择的库运行以下命令：

  • 对于 PyQt5:
    bash
    pip install PyQt5 PyQt5-tools
  • 对于 PyQt6:
    bash
    pip install PyQt6 PyQt6-tools
  • 对于 PySide2:
    bash
    pip install PySide2
  • 对于 PySide6:
    bash
    pip install PySide6

PyQt5-tools 或 PyQt6-tools 通常包含了 Qt Designer 的可执行文件。对于 PySide，Qt Designer 通常直接包含在 PySide2 或 PySide6 包中。

启动 Qt Designer：

安装完成后，Qt Designer 的启动方式取决于您的操作系统和安装方式：

  • Windows 用户：
    • 您可以在 Python 安装目录下的 Lib/site-packages/PyQt5_tools/designer.exe (对于 PyQt5) 或 Lib/site-packages/PySide6/designer.exe (对于 PySide6) 等路径找到并双击 designer.exe 启动。
    • 如果已将相关目录添加到系统 PATH，或者使用了特定的安装器，您可能可以直接在命令行中输入 designer 或 pyside6-designer 来启动。
  • 其他操作系统用户：
    • 在 Linux/macOS 上，您可能需要查找对应的可执行文件，或者通过安装 Qt 官方 SDK 来获取。
    • 某些 IDE（如 PyCharm）的插件也可能提供直接启动 Qt Designer 的选项。

2. 创建第一个 UI

启动 Qt Designer 后，您将看到一个欢迎界面或“新建窗体”对话框。

  1. 选择模板： 在“新建窗体”对话框中，选择一个适合您应用程序类型的模板。对于常见的桌面应用，通常选择 Main Window (主窗口) 或 Widget (小部件)。我们这里选择 Main Window。
  2. 拖放控件：
    • 在 Qt Designer 界面的左侧是“Widget Box”（控件工具箱），其中包含了各种可用的 UI 控件（Widgets），如按钮、标签、文本框等。
    • 从“Widget Box”中，拖动一个 QLabel (标签) 到主窗口的中央。
    • 再拖动一个 QPushButton (按钮) 到主窗口下方。
  3. 修改属性：
    • 选中您拖放到窗口上的 QLabel 控件。在界面的右侧是“Property Editor”（属性编辑器），您可以在这里修改选中控件的各种属性。
    • 找到 QLabel 的 text 属性，将其值修改为“Hello, Qt Designer!”。
    • 选中 QPushButton，将其 text 属性修改为“点击我”。
    • 您还可以调整控件的 geometry (几何尺寸)、font (字体) 等属性，使其符合您的设计要求。
  4. 应用布局 (推荐)： 为了让您的界面在不同窗口尺寸下都能保持良好的显示效果，强烈建议使用布局管理器。
    • 点击主窗口的空白区域，确保选中了整个窗口。
    • 在菜单栏中选择 Form (窗体) -> Lay Out (布局) -> Lay Out Vertically (垂直布局) 或 Lay Out Horizontally (水平布局)。这将自动根据控件的排列方向进行布局，并使其在窗口大小改变时自动调整。

3. 保存 .ui 文件

完成界面设计后，您需要将其保存为一个 .ui 文件。这个文件实际上是一个 XML 格式的描述文件，包含了您设计的界面结构和控件属性。

  1. 点击菜单栏中的 File (文件) -> Save As... (另存为…)。
  2. 选择一个合适的保存路径和文件名，例如 my_first_ui.ui。

4. Python 中使用 .ui 文件

有以下两种主要方法可以在 Python 应用程序中使用您设计好的 .ui 文件：

方法一：将 .ui 文件转换为 .py 文件

这是最常见和推荐的方法之一。它将 .ui 文件中的 XML 定义转换为等效的 Python 类代码。

  1. 打开命令行/终端，导航到您保存 my_first_ui.ui 文件的目录。

  2. 运行转换命令：

    • 对于 PyQt5:
      bash
      pyuic5 -x my_first_ui.ui -o my_first_ui.py
      这里的 -x 选项会生成一个包含 main 函数的可执行 Python 文件，可以直接运行以显示界面。
    • 对于 PyQt6:
      bash
      pyuic6 -x my_first_ui.ui -o my_first_ui.py
    • 对于 PySide6:
      bash
      pyside6-uic my_first_ui.ui -o my_first_ui.py
      请注意，pyside6-uic 默认不生成 -x 选项那样的可执行代码，您可能需要手动添加运行逻辑。

    执行此命令后，会在当前目录下生成一个名为 my_first_ui.py 的 Python 文件。

  3. 查看生成的 Python 代码：
    打开 my_first_ui.py 文件，您会看到一个名为 Ui_MainWindow (如果您选择了 Main Window 模板) 的 Python 类。这个类包含了您在 Designer 中设计的所有界面元素及其初始化代码。

  4. 创建并运行您的 Python 应用程序：
    创建一个新的 Python 文件 (例如 app.py)，并写入以下代码：

    “`python
    import sys
    from PyQt5 import QtWidgets # 或者 PyQt6, PySide6
    from my_first_ui import Ui_MainWindow # 导入生成的UI类

    class MyWindow(QtWidgets.QMainWindow):
    def init(self):
    super().init()
    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)

        # 连接信号与槽 (下一步将详细介绍)
    # 假设你在 Designer 中按钮的 objectName 是 pushButton，标签的 objectName 是 label
    self.ui.pushButton.clicked.connect(self.on_button_click)

def on_button_click(self):
    """当按钮被点击时调用的槽函数"""
    self.ui.label.setText("按钮被点击了！") # 修改标签文本

    if name == “main“:
    app = QtWidgets.QApplication(sys.argv)
    window = MyWindow()
    window.show()
    sys.exit(app.exec_())
    ``
    运行    python app.py`，您将看到在 Qt Designer 中设计的界面。

方法二：直接加载 .ui 文件

这种方法在运行时直接加载 .ui 文件，而不需要将其转换为 .py 文件。这在某些情况下提供更大的灵活性，您可以在不重新生成 Python 代码的情况下修改 UI 设计。

“`python
import sys
from PyQt5 import QtWidgets, uic # 或者 PyQt6, PySide6

class MyWindow(QtWidgets.QMainWindow):
def init(self):
super().init()
# 直接加载 .ui 文件
uic.loadUi(“my_first_ui.ui”, self)

    # 现在可以通过 self.控件名称 访问 Designer 中的控件
    # 假设按钮的 objectName 是 pushButton，标签是 label
    self.pushButton.clicked.connect(self.on_button_click)

def on_button_click(self):
    """当按钮被点击时调用的槽函数"""
    self.label.setText("按钮被点击了！") # 修改标签文本

if name == “main“:
app = QtWidgets.QApplication(sys.argv)
window = MyWindow()
window.show()
sys.exit(app.exec_())
“`

5. 信号与槽 (Signals & Slots)

信号与槽是 Qt 框架中特有的、用于对象间通信的强大机制。当一个特定事件发生时（例如用户点击了按钮），发出事件的控件会发射一个“信号”。您可以将这个信号连接到另一个对象上的一个“槽”（一个函数或方法），当信号被发射时，与之相连的槽就会自动被调用。

在上面的 Python 代码示例中，我们演示了如何连接信号与槽：

python
self.ui.pushButton.clicked.connect(self.on_button_click)

  • self.ui.pushButton：这是您在 Qt Designer 中创建并命名为 pushButton 的按钮对象。
  • .clicked：这是 QPushButton 控件发出的一个内置信号，表示按钮被点击。
  • .connect()：这是一个用于连接信号和槽的方法。
  • self.on_button_click：这是我们自定义的一个槽函数，当 pushButton 的 clicked 信号发出时，这个函数就会被执行。在示例中，它用于更新 QLabel 的文本。

总结

通过上述步骤，您已经掌握了 Qt Designer 的快速上手方法：从界面的可视化设计，到将设计保存为 .ui 文件，再到如何在 Python 应用程序中集成和运行这些界面，以及如何使用信号与槽机制来实现交互逻辑。Qt Designer 极大地降低了 GUI 开发的门槛，让您可以更专注于应用程序的核心功能，而不是繁琐的界面布局代码。

滚动至顶部