02. Qt Designer的使用

一、什么是Qt Designer

  Qt Designer，中文名为 Qt 设计师，它是一个强大的可视化 GUI 设计工具。通过使用 Qt Designer 设计 GUI 程序界面，可以大大地提高开发效率。

  我们可以在终端中使用 pip 安装 PySide6 模块。默认是从国外的主站上下载，因此，我们可能会遇到网络不好的情况导致下载失败。我们可以在 pip 指令后通过 -i 指定国内镜像源下载。

pip install pyside6 -i https://mirrors.aliyun.com/pypi/simple

  国内常用的 pip 下载源列表：

• 阿里云 https://mirrors.aliyun.com/pypi/simple
• 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple
• 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple
• 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple

二、启动Qt Designer

  在用 pip 命令安装完 PySide6 后，在 Python 的安装环境下的【Scripts】文件夹下会出现 PySide6-designer.exe 文件，双击该文件，或者在终端中输入 PySide6-designer 后按 Enter 键，可以启动 Qt Designer。

.\.venv\Scripts\pyside6-designer.exe

• Dialog：基于 QDialog 类的窗体，具有一般对话框的特性，如可以模态显示、具有返回值等。
• Main Window：基于 QMainWindow 类的窗体，具有主窗口的特性，窗口上有主菜单栏、工具栏、状态栏等。
• Widget：基于 QWidget 类的窗体。QWidget 类是所有界面组件的基类，如 QLabel、QPushButton 等界面组件都是从 QWidget 类继承而来的。QWidget 类也是 QMaiWindow 和 QDialog 的父类，基于 QWidget 类创建的窗体可以作为独立的窗口运行，也可以嵌入到其它界面组件内显示。

三、设计窗口

3.1、Qt Designer窗口

  在 Qt Designer 设计器的 “新建窗体” 窗口中选择 "Widget"，即可创建一个通用窗口，Qt Designer 设计器的主要组成部分如下：

• 窗口左侧是 窗口部件盒，它分为按功能分为多个组，如 Layouts（布局）、Spacers（弹簧）、Buttons（按键）等。
• 窗口中间区域是 待设计的窗体。我们可以从窗口部件盒中拖拽控件到窗体中。
• 窗口右侧上方区域是 对象检测器，它用 树状图 显示窗体上 各组件之间的布局和包含关系，视图有两列，用于显示每个组件的 对象名称 和 类名称。
• 窗口右侧中间区域是 属性编辑器，用于显示某个选中组件或窗体的各种 属性 及其 属性值。我们可以在属性编辑器中修改这些属性值。
• 窗口右侧下方区域的第一个选项卡是 信号/槽编辑器，它用于可视化的进行 信号与槽的关联。

3.2、拖拽控件到窗体

  创建完窗口后，主窗口默认只有一个菜单栏和一个状态栏，要设计主窗口，只需要根据自己的需求，在左侧 “Widget Box”（窗口部件盒）中选择响应的组件，然后按住鼠标左键，将其拖放到主窗口的指定位置即可。

  然后，我们将要使用的控件拖拽到窗体中。在设计界面时，我们要随机保存（Ctrl+S），以避免因软件崩溃等问题造成文件丢失。

3.3、修改控件的属性名

  在设计窗口的过程中，我们可以在对象检查器中选中指定的窗口，然后鼠标左键双击，即可修改对应控件在生成代码中属性名，同样我们可以在属性编辑器中直接修改属性名。

3.4、修改控件的显示文本

  我们还可以选中控件直接双击修改显示文本，同样我们可以在属性编辑器中直接修改显示的文本。

3.5、修改控件的位置和大小

  我们还可以选中控件直接拖拽修改控件的大小，同样我们可以在属性编辑器中直接修改控件的大小。

3.6、添加布局

  我们框选控件，右键单击，然后选中布局。所谓布局，就是界面上的控件的排列方式。使用布局管理功能可以使组件有规则地分布，并且随着窗体大小变化自动地调整大小和相对位置。

  使用工具栏上的布局设计按钮时，只需在窗体上选中需要设计布局的控件，然后点击某个布局按钮即可。在窗体上选择控件时同时按住 Ctrl 键，可以实现组件多选。选择某个容器类控件，相当于选择了其内部的所有控件。

  每个布局还有 layoutTopMargin、layoutBottomMargin、layoutLeftMargin、layoutRightMargin 这 4 个属性用于 调整布局边框与内部组件之间的上、下、左、右的边距大小。

3.7、设置伙伴关系

  我们还可以设置控件的伙伴关系。伙伴关系（Buddy）是指界面上 一个 Label 和一个具有输入焦点的控件相关联。伙伴关系 是为了在程序运行时，在窗体上用快捷键快速将输入焦点切换到某个控件上。

  这里，我们设定 “姓名” 标签的 text 属性为 姓名(&N)，其中符号 &用来指定快捷字符，界面上并不显示 &。这里指定快捷字母为 N，那么程序运行时，如果用户按下 Alt + N，输入焦点就会快速切换到 “姓名” 标签关联的文本框内。

  在 Qt Designer 设计器的菜单栏上单击 编辑 菜单，在弹出的菜单项中选中 编辑伙伴 菜单项即可进入伙伴关系编辑状态。

  单击 Label，按住鼠标左键，然后拖向一个控件，就建立了 Label 和控件之间的伙伴关系。

3.8、编辑Tab顺序

  Tab 顺序是指在程序运行时，按下键盘上的 Tab 键时输入焦点的移动顺序。

  在 Qt Designer 设计器的菜单栏上单击 编辑 菜单，在弹出的菜单项中选中 编辑伙伴 菜单项即可进入 Tab 顺序编辑状态。

  进入 Tab 顺序编辑状态后，在界面上会显示具有 Tab 顺序的控件的 Tab 顺序编号，依次按希望的顺序单击控件，就可以重排 Tab 顺序了。没有输入焦点的控件是没有 Tab 顺序的。

3.9、信号与槽函数的绑定

  我们还可以编辑信号与槽函数。Qt 的界面控件都是从 QWidget 继承而来的，都支持信号与槽的功能。每个类都有一些内建的信号和槽函数。

  在 Qt Designer 设计器的菜单栏上单击 编辑 菜单，在弹出的菜单项中选中 编辑信号与槽 菜单项即可进入信号与槽函数编辑状态。

  鼠标先选中要编辑信号与槽的控件，再按住鼠标左键拖动到窗体的空白区域后释放左键，这时出现关联设置对话框。此对话框左边的列表框里显示该控件的信号，右边的列表框里显示了该控件的槽函数。如果在对话框中没有对应的信号与槽，需要勾选下方的 显示从 QWidget 继承的信号与槽 才会对应的信号与槽函数。

  设置好控件的信号与槽关联之后，在窗体下方的信号与槽编辑器里就显示了对应的关联信号与槽。实际上，我们还可以直接在信号与槽编辑器进行某个组件的内建信号与其他组件的内建槽函数关联。

3.10、预览窗体

  我们还在 Qt Designer 中预览窗体效果。

3.11、加载UI文件

  使用 Qt Designer 设置好窗体并保存好 .ui 文件之后，我们可以直接在 Python 中使用这个文件。

import sys

from PySide6.QtWidgets import QApplication, QWidget
from PySide6.QtUiTools import QUiLoader
from PySide6.QtCore import QFile

def load_ui_file(ui_file_path, loader:QUiLoader, base_instance=None):
    file = QFile(ui_file_path)
    if not file.open(QFile.OpenModeFlag.ReadOnly):
        raise FileNotFoundError(f"Cannot open {ui_file_path}: {file.errorString()}")
  
    # 如果提供了base_instance，则使用它作为加载UI的父对象，否则，QUiLoader将创建一个新的QWidget实例作为父对象
    window = loader.load(file, base_instance)
    file.close()

    # 检查是否成功加载
    if not window:
        raise RuntimeError(f"Failed to load {ui_file_path}.")
  
    # 返回加载的UI的根widget
    return window

class MyWidget(QWidget):
    def __init__(self, ui_file_path, parent=None):
        super().__init__(parent)
        self.ui_window = load_ui_file(ui_file_path, loader, self)               # 加载UI文件
  
if __name__ == "__main__":
    loader = QUiLoader()                                                        # 1.获取ui文件加载器
    app = QApplication(sys.argv)                                                # 2.创建一个QApplication类的实例
    w = MyWidget("./template.ui")                                               # 2.创建一个窗口
    w.show()                                                                    # 3.显示窗口
    sys.exit(app.exec())                                                        # 4.进入程序的主循环并通过exit()函数确保主循环安全结束import

QUiLoader 的初始化要放到 QApplication 初始化之前，否则程序会卡死。

3.12、生成Python文件

  这里，我们还可以使用 pyside6-uic 工具生成 Python 文件。要使用此工具，需要在终端运行以下命令：

.\.venv\Scripts\pyside6-uic  UI文件 -o Python文件
.\.venv\Scripts\pyside6-uic  template.ui -o template_ui.py

import sys

from PySide6.QtWidgets import QApplication, QMainWindow

from template_ui import Ui_Form

if __name__ == "__main__":
    app = QApplication(sys.argv)                                                # 1.创建一个QApplication类的实例
    w = QMainWindow()                                                           # 2.创建一个窗口
    ui = Ui_Form()                                                              # 3.创建PySide6设计的窗体对象
    ui.setupUi(w)                                                               # 4.调用PySide窗体的方法对窗体对象进行初始化设置
    w.show()                                                                    # 5.显示窗口
    sys.exit(app.exec())                                                        # 6.进入程序的主循环并通过exit()函数确保主循环安全结束

四、VScode配置Qt Designer

  这里，我们还可以借助 VSCode 的插件来快速使用 Qt Designer。

4.1、安装插件

  由于使用 Qt Designer 创建 GUI 图形用户界面程序时，会生成扩展名为 .ui 的文件，该文件需要转换为 .py 文件后才可以被 Python 识别，所以我们需要为 Qt Designer 和 VSCode 开发工具进行配置。这里，我们需要安装 Qt 的插件。这里推荐使用 Qt for Python 插件。

4.2、创建主窗口

  在 VSCode 的资源管理器中，我们单击右键，在弹出的菜单中选中

4.3、将ui文件转换为py文件

  在 VSCode 资源管理器中的选择保存好的 .ui 文件，然后单击右键，在弹出的菜单中选中 Compile Qt UI File(uic)，即可将选择的 .ui 文件转换为 .py 文件（转换后的 Python 文件为 ui文件名+_ui.py）。