【PySide6】3. Designer 的用法

QT Designer 的介绍

QT Designer，即 Qt 设计师，是一个可视化的 GUI 设计工具，是专门用来制作 PySide6 程序中 UI 界面的工具，生成的 UI 界面是一个后缀为 .ui 的文件。我们可以使用之前配置的 uic 工具，将其转换为 .py 文件，并在 python 项目中引用。

新建主窗口 （Main Window）

通过之前的配置，鼠标右键 -> 外部工具，打开 Qt Designer（也可以通过 Pycharm 上方菜单栏 工具 -> 外部工具，打开），会自动弹出新建窗体的对话框，对话框如下图：

选择 Main Window，点击新建，即可创建一个窗口。
整个 designer 的布局如下：

1. 窗口部件盒（工具箱），最右边的窗口，它提供了很多控件，用于提供不同的功能，如：按钮、文本框、列表等等。它可以直接拖拽到主窗口中。
2. 中间的标题为 Main Window（标题可修改） 的就是我们创建的主窗口
3. 对象检查器，可以用来查看主窗口放置的对象列表
4. 属性编辑器，它主要提供了对窗口、控件、布局的属性设置编辑。主窗口的标题可以通过这里来修改。
5. 信号/槽编辑器、用来编辑控件的信号和槽函数，也可以为控件添加自定义的信号与槽函数
6. 动作编辑器，管理和配置菜单栏、工具栏和上下文菜单中的动作。通过动作编辑器，可以添加、修改和删除各种动作，并为它们设置相应的属性和快捷键
7. 资源浏览器可以为控件添加图片等。

选中 Main Window，在主窗口中，我们添加几个菜单，然后从右边窗口部件盒中拖入一个 按钮(Push Button) 和 文本框(Line Edit)。然后创建，ctrl + s 快捷键保存，文件名 MainWin.ui。
注意：上面菜单栏可以直接输入中文，但是子菜单栏不能直接输出中文，输入法锁死英文了，这里可以先随便输入一个英文，然后编辑属性编辑器的 text 一栏，这里输入中文即可，text 表示控件文本。

保存后，可以在 ui 目录下，看到保存的文件。鼠标选中这个文件，右键 -> 外部工具 -> uic，然后就在 uipy 目录下生成了一个 .py 的文件，如下图：

可以查看生成的代码，它里面有一些窗口控件的用法，我们可以通过查看它，来学习一些常用的窗口控件方法。
注意：每次窗口发生改变，都需要重新编译一次 .ui 文件

显示新建的主窗口

为了使界面与逻辑分离，可以新建一个类，并继承自界面文件的主窗口类即可。代码如下：

# -*- coding: utf-8 -*-
import sys
from PySide6.QtWidgets import QApplication, QMainWindow
from uipy.MainWin_ui import Ui_MainWindow

class MyWindow(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.show()
    app.exec()

运行代码，即可显示创建的窗口。

布局管理

布局

designer 提供了 4 中布局方式：

1. Vertical Layout: 垂直布局，控件默认安装从上到下的顺序进行纵向添加
2. Horizontal Layout: 水平布局，控件默认安装从左到右的顺序进行横向添加
3. Grid Layout: 网格布局，会将控件合理的划分为若干行列
4. Form Layout: 表单布局，控件以两列的形式布局在其中
   

这里可以使用刚刚创建的窗口来试一试这些布局，网格布局和表单布局需要多拖入几个控件，这样才能看到效果。
双击 .ui 文件，会自动打开 designer，并显示这个窗口，鼠标选中里面的控件 -> 鼠标右键 -> 布局，选择自己想要尝试的布局，我这里选择的是一个水平布局，效果如下：

Ctrl + s 保存，记得重新编译 .ui 文件，然后运行程序即可。（别忘记看一看编译后的 .py 文件，能学到不少的控件操作方式）

容器

所谓容器，是指能够容纳子控件的控件。使用这个控件的目的就是将容器控件中的控件归为一类，与其他控件做区分。

以水平布局为例，从designer左侧 containers 栏中拖入一个Frame控件，然后在这个控件中放入 Label 控件、LineEdit 控件、 Button 控件，然后对其进行重命名。
选中 Frame 控件，鼠标右键 -> 布局 -> 水平布局。结果如下所示：