【PyQt5】（02）Qt Designer：快速设计GUI界面的利器

系列文章目录

【PyQt5】（01）PyQt的详细介绍

---

---

前言

  Python Qt Designer 是一个图形界面设计工具，用于创建Qt应用程序的用户界面。它支持创建典型的窗口和对话框，并允许使用各种小部件（widget）和布局管理器（layout manager）。
  Qt Designer是一个可视化编辑器，用户可以使用它在GUI界面中定义控件和布局，并将其保存为.ui文件。

本文将详细介绍 Python Qt Designer 的使用方法。

一、安装Qt Designer

  Python Qt Designer 可以通过 PyQt5 软件包进行安装。请运行以下命令：

pip install pyqt5-tools

  安装成功后，可以通过命令行启动 Python Qt Designer：

designer

  如果你使用的Pycharm开发环境，可以在 Pycharm 中安装 PyQt5 工具箱（PyQt5 Tools）可以获得 Qt Designer、PyUIC 和 Pyrcc。

  在 PyCharm 中安装 Qt Designer、PyUIC 和 Pyrcc 可以通过以下步骤完成：

1. 安装 PyQt5 工具包

首先需要安装 PyQt5 工具包，可以通过以下命令行在 PyCharm 中安装：

pip install pyqt5

  如果已经安装了 PyQt5 但是没有安装 Qt Designer、PyUIC 或 Pyrcc，则需要使用以下命令行安装：

pip install pyqt5-tools

2. 将 Qt Designer 添加到 PyCharm

  打开 PyCharm，选择 “File->Settings”，在左侧面板中选择 “Tools->External Tools”，然后单击右侧面板中的 “+” 按钮。

  在弹出的对话框中，在"Name"字段中输入 “Qt Designer”，在 “Description” 字段中输入 “PyQt5 Qt Designer”，在 “Program” 字段中输入 Qt Designer 的安装路径，其他的如下图所示：

然后，单击 “OK” 按钮保存设置。

3. 添加 PyUIC 工具

  PyUIC是一种Python GUI应用程序的用户界面代码生成器，可以将Qt Designer UI文件生成Python源代码。PyUIC生成的Python代码是基于Qt的PyQt和PySide库。它可以方便地与其他Python库集成，如numpy、matplotlib等。PyUIC生成的代码易于阅读和修改，可以方便地定制应用程序的用户界面。
  与添加 Qt Designer 类似，可以将 PyUIC 工具添加到 PyCharm 中。在 “External Tools” 对话框中单击 “+” 按钮，然后输入以下信息：

实参输入以下内容：
-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py
意思将选中的 xxx.ui 文件转换为同名的 xxx.py文件
需要特别注意的是，执行的时候需要右键选中对应的 xxx.ui 文件，不然会出错的。

3. 添加 Pyrcc 工具

  Pyrcc是一个命令行实用程序，用于将Qt Designer中创建的.qrc文件转换为.py文件。 Pyrcc是Qt开发者的常见工具，因为.qrc文件与Python程序捆绑在一起，例如Qt资源文件，通过PyQt5或PySide2模块在Python脚本中的访问方式。
  与添加 Qt Designer 类似，可以将Pyrcc 工具添加到 PyCharm 中。在 “External Tools” 对话框中单击 “+” 按钮，然后输入以下信息：

)

保存设置后，可以在 PyCharm 中使用这些工具了。只需要右键单击任何 .ui、.qrc 或 .ui 文件，然后选择 “External Tools” 菜单，单击 “Qt Designer”、“PyUIC” 或 “Pyrcc” 即可。

二、Qt Designer的基本用法

2.1 新建窗体

  启动Qt Designer后，可以通过文件（File） -> 新建（New） 或使用快捷键Ctrl + N来创建新的UI文件。在弹出的对话框中选择需要使用的类别（如“Dialog”、“Main Window”等），并选择需要使用的模板（如“Empty”, “Grid”, “Dock Widget”等）。然后点击创建(R)按钮即可创建一个新的UI文件。

在新建窗体对话框中，你可以选择创建的窗口类型，主要介绍如下几种：

• Dialog：创建一个对话框窗口，此窗口通常用于显示相对较少的信息或与用户交互。 Main
• Window：创建一个主窗口窗口，此窗口通常用于显示大量信息和多种不同的功能。
• Widget：创建一个普通的窗口控件，此窗口通常只是用来显示信息或数据。
• DockWidget：创建一个浮动窗口控件，此窗口通常用于显示常用的工具或者选项，并且可以随时移动或关闭。
• ToolBar：创建一个工具栏窗口控件，此窗口可以包含多个工具按钮，以方便用户进行操作和导航。

2.2 添加部件

在左侧的“Widget Box”中，可以找到各种类型的控件，比如按钮、文本框、标签、下拉菜单、复选框、单选按钮和进度条等。可以通过拖动控件到窗口中添加。

2.3 编辑属性

在窗口中添加控件后，可以通过“Property Editor”编辑控件的属性。例如，可以更改控件的大小、位置、文本内容、颜色、字体等。

2.4 布局管理

在添加控件时，需要考虑控件的位置和大小。布局管理器可以帮助我们在窗口内按照一定的方式排列控件，使窗口更加美观。Qt Designer提供了以下几种类型的布局管理器：

QVBoxLayout：垂直布局。

QHBoxLayout：水平布局。

QGridLayout：网格布局。

QFormLayout：表单布局。

QStackedLayout：层叠布局。

2.5 设置样式

可以通过“Style Sheet Editor”设置窗口和控件的样式。例如，可以设置控件的背景色、前景色、边框样式等。

2.6 保存文件

最后将窗口保存为.ui文件，可以在“File”菜单中选择“Save”或使用快捷键Ctrl+S。.ui文件是一个XML文件，包含了窗口和控件的布局、属性、事件以及信号槽等信息。

三、将UI文件转化为Python代码并显示

Qt Designer设计好的UI文件可以通过PyQt或PySide中的uic模块将其转换为Python代码，从而使其可以在Python程序中使用。下面介绍一下具体的步骤。

3.1 使用uic将UI文件转换为Python代码

在 PyCharm 中只需要右键单击.ui文件（test_dialig .ui），然后选择 “External Tools” 菜单，单击PyUIC即可。

在Python程序中使用如下代码可以将UI文件转换为Python代码：

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(400, 300)
        self.label = QtWidgets.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(50, 100, 291, 31))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(20)
        self.label.setFont(font)
        self.label.setObjectName("label")

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "test_dialog"))
        self.label.setText(_translate("Dialog", "这是一个测试对话框"))

3.2 创建对话框实例并显示UI

运行Python程序后，UI界面就会显示出来，用户即可使用UI界面中的各种控件。

import sys
from PyQt5.QtWidgets import QApplication, QDialog
from test_dialog import Ui_Dialog  # 导入对话框类


class MyDialog(QDialog):
    def __init__(self):
        super().__init__()

        # 实例化对话框类
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    dialog = MyDialog()
    dialog.show()
    sys.exit(app.exec_())

在上面的代码中，我们导入了PyQt5中的QApplication和QDialog类，并从我们生成的Python代码文件中导入了对话框类。

然后，我们创建一个MyDialog类，继承自QDialog，并在构造函数中实例化对话框类。最后，我们创建一个应用程序（QApplication），实例化MyDialog类，调用show()方法来显示对话框，并启动应用程序的事件循环。

运行上面的代码，就可以显示由Qt Designer生成的对话框了。

总结

Python Qt Designer 是一个强大的图形界面设计工具。它提供了用户友好的界面来创建和编辑窗口和小部件，并帮助用户使用布局管理器自动排列它们。使用 PyQt5，可以将 .ui 文件加载为 Python 应用程序的主窗口，并通过各种控件来交互。