PyQt - 使用 Qt Designer



理解 Qt Designer

Qt Designer 是 Qt 框架提供的一个强大的可视化工具,用于快速有效地设计和构建用户界面 (UI)。它提供了一个拖放界面,用于添加和配置各种小部件,例如按钮、标签、文本字段等。当与 PyQt5 结合使用时,Qt Designer 可以简化 UI 设计和生成 Python 代码的过程,从而显著减少开发时间和工作量。

Qt Designer 通常包含在 Qt 框架安装中。要将 Qt Designer 与 PyQt5 一起使用,请确保已在系统上安装 PyQt5。您可以通过运行以下命令从命令行启动 Qt Designer:

designer

Qt Designer 窗口如下所示:

PyQt Designer Window

创建新的 UI

要在 Qt Designer 中创建新的 UI,首先选择“文件”菜单并选择“新建窗体”。您可以根据要设计的 UI 类型,从各种模板中进行选择,例如“带底部按钮的对话框”、“主窗口”、“控件”等。

PyQt New UI

设计 UI

创建窗体后,您可以通过将小部件从部件框拖放到窗体上来开始设计用户界面 (UI)。Qt Designer 提供了一系列可根据您的需求进行个性化和组织的小部件。您可以使用鼠标或 Qt Designer 中的布局工具来调整大小、移动和对齐小部件。

PyQt UI Design

生成 Python 代码

设计完 UI 后,您可以从 Qt Designer 生成 Python 代码,以将 UI 与 PyQt5 应用程序集成。在 Qt Designer 中,选择“文件”菜单并选择“另存为...”将 UI 文件 (.ui) 保存到您的项目目录。

设计的窗体将保存为 demo.ui。此 ui 文件包含设计中小部件及其属性的 XML 表示形式。此设计通过使用 pyuic5 命令行实用程序转换为 Python 等效项。此实用程序是 Qt 工具包 uic 模块的包装器。pyuic5 的使用方法如下:

pyuic5 -x demo.ui -o demo.py

在上述命令中,-x 开关会向生成的 Python 脚本(来自 XML)添加少量额外的代码,使其成为一个可独立执行的应用程序。

if __name__ == "__main__":
   import sys
   app = QtGui.QApplication(sys.argv)
   Dialog = QtGui.QDialog()
   ui = Ui_Dialog()
   ui.setupUi(Dialog)
   Dialog.show()
   sys.exit(app.exec_())

输出

以上代码产生以下输出:

PyQt Qt Designer Example

用户可以在输入字段中输入数据,但点击“添加”按钮不会产生任何操作,因为它没有与任何函数关联。对用户生成的响应做出反应称为事件处理。

使用 Qt Designer 的优势

Qt Designer 是一个用于为使用 Qt 框架构建的应用程序设计图形用户界面 (GUI) 的强大工具。以下是使用 Qt Designer 的一些优势:

  • 可视化设计 - Qt Designer 提供了一个可视化界面来设计 GUI,允许开发人员将 UI 组件(如按钮、标签、文本框等)拖放到画布上。这种可视化设计方法使创建复杂的布局变得容易,而无需手动编写代码。
  • 快速原型设计 - 凭借其拖放界面,Qt Designer 促进了快速原型设计,使开发人员能够快速创建 UI 设计的模型并有效地对其进行迭代。
  • 平台独立性 - Qt 是一个跨平台框架,使用 Qt Designer 设计的 GUI 本质上是平台独立的。这意味着使用 Qt Designer 创建的 UI 在不同的操作系统(包括 Windows、macOS、Linux 等)上将具有相同的外观和行为。
  • 与 Qt 框架集成 - Qt Designer 与 Qt 框架无缝集成,允许开发人员使用信号和槽轻松地将 UI 组件连接到应用程序逻辑。这种集成简化了开发过程,并促进了 UI 设计和应用程序逻辑的清晰分离。
  • 自定义控件支持 - Qt Designer 支持使用自定义控件,使开发人员能够通过集成第三方或自定义设计的 UI 组件来扩展其应用程序的功能。
  • 国际化 (i18n) 支持 - Qt Designer 通过提供轻松将 UI 元素翻译成不同语言的工具来促进国际化。这允许开发人员以最小的努力创建多语言应用程序。
  • 促进 MVC 架构 - Qt 遵循模型-视图-控制器 (MVC) 架构,Qt Designer 通过促进 UI 设计 (视图) 与应用程序逻辑 (控制器/模型) 的分离来鼓励遵守此模式。这种分离增强了代码的可维护性和可扩展性。
  • UI 文件序列化 - Qt Designer 将 UI 设计保存在基于 XML 的 .ui 文件中,这些文件可以轻松地序列化和反序列化。这种文件格式是人类可读的,并且可以进行版本控制,从而促进团队成员之间的协作并实现对 UI 设计文件的有效管理。
  • 与 Qt Creator 集成 - Qt Designer 集成到 Qt Creator 中,Qt Creator 是 Qt 开发的官方 IDE。这种集成为设计 UI、编写应用程序逻辑、调试和测试提供了无缝的工作流程,所有这些都在单个开发环境中完成。
  • 社区和资源 - Qt 拥有一个充满活力的社区,以及大量在线文档、教程和资源。开发人员可以利用这些资源快速学习 Qt Designer,解决问题,并了解有关 Qt UI 设计最佳实践和技巧的最新信息。
广告