下载掌阅APP，畅读海量书库
立即打开
Qt Designer，即Qt设计师，是一个强大、灵活的可视化GUI设计工具，可以帮助用户加快开发PySide 6程序的速度。Qt Designer是专门用来制作PySide 6程序中UI界面的工具，生成的UI界面是一个后缀为.ui的文件。该文件使用起来非常简单，既可以通过命令将.ui文件转换为.py文件，并被其他Python文件引用，也可以通过Eric 6进行手动转换。本章以命令的方式为主，手动的方式为辅，但是二者的原理和结果是一样的，读者可以根据自己的偏好进行选择。示例如图2-1所示。
图2-1
Qt Designer符合MVC（模型—视图—控制器）设计模式，做到了显示和业务逻辑的分离。
Qt Designer具有以下两方面优点。
· 使用简单，通过拖曳和单击就可以完成复杂的界面设计，并且可以随时预览查看效果图。
· 转换Python文件方便。使用Qt Designer可以将设计好的用户界面保存为.ui文件，这种格式的文件支持XML语法。在PySide 6中使用.ui文件，可以通过pyside6-uic.exe（或第1章介绍的其他方式）将.ui文件转换为.py文件，同时将.py文件导入Python代码中。
Qt Designer默认安装在D:\Anaconda3\Scripts\pyside6-designer.exe目录下。Qt Designer的启动文件为pyside6-designer.exe，如图2-2所示。
图2-2
双击pyside6-designer.exe文件，打开PySide 6的Qt Designer，自动弹出“新建窗体”对话框，如图2-3所示。在模板选项中，最常用的就是Widget（通用窗口）和Main Window（主窗口）。在PySide 6中，Widget被分离出来，用来代替Dialog，并将Widget放入QtWidget模块库中。
图2-3
选择的模板是Main Window，创建一个主窗口，保存并命名为firstMainWin.ui，如图2-4所示，主窗口默认添加了菜单栏、工具栏和状态栏。
图2-4
图2-4中标注了窗口的主要区域，区域1是Widget Box（工具箱）窗格，如图2-5所示，其中提供了很多控件，每个控件都有自己的名称，用于提供不同的功能，如常用的按钮、单选按钮、文本框等，可以直接拖曳到主窗口中。在菜单栏中选择“窗体”→“预览”命令，或者按Ctrl+R快捷键，就可以看到窗口的预览效果。
图2-5
可以将Buttons栏中的一个按钮拖曳到主窗口（区域2），如图2-6所示。
图2-6
在“对象查看器”面板（区域3）中，可以查看主窗口中放置的对象列表，如图2-7所示。
图2-7
区域4是Qt Designer的“属性编辑器”面板，其中提供了对窗口、控件、布局的属性编辑功能，如图2-8所示。
图2-8
· objectName：控件对象的名称。
· geometry：相对坐标系。
· sizePolicy：控件大小策略。
· minimumSize：最小宽度和最小高度。
· maximumSize：最大宽度和最大高度。如果想固定窗口或控件的大小，则可以将minimumSize属性和maximumSize属性设置为一样的数值。
· font：字体。
· cursor：指针。
· windowTitle：窗口标题。
· windowsIcon/icon：窗口图标/控件图标。
· iconSize：图标大小。
· toolTip：提示信息。
· statusTip：任务栏提示信息。
· text：控件文本。
· shortcut：快捷键。
区域5是“信号/槽编辑器”面板，其中在“信号/槽编辑器”视图中，可以为控件添加自定义的信号与槽函数，以及编辑控件的信号与槽函数，如图2-9所示。
图2-9
在“资源浏览器”视图中，可以为控件添加图片，如Label、Button的背景图片，如图2-10所示。
图2-10
采用Qt Designer设计的界面默认为.ui文件，描述了窗口中控件的属性列表和布局显示。.ui文件中包含的内容是按照XML格式处理的。
首先，使用Qt Designer打开Chapter02/firstMainWin.ui文件，可以看到在主窗口中放置了一个按钮，其objectName为pushButton，在窗口中的坐标为(490,110)，按钮的宽度为93像素，高度为28像素，如图2-11所示。
图2-11
然后，使用文本编辑器打开firstMainWin.ui文件，显示的内容如图2-12所示。
图2-12
从图2-12中可以看出，按钮的设置参数与使用Qt Designer打开.ui文件时显示的信息是一致的。有了Qt Designer，开发人员就能够更快地开发设计出程序界面，避免使用纯代码来编写，从而不必担心底层的代码实现。
使用Qt Designer设计的用户界面默认保存为.ui文件，其内容结构类似于XML，但这种文件并不是我们想要的，我们想要的是.py文件，所以还需要使用其他方法将.ui文件转换为.py文件。本书提供了如下几种方法，这些方法可以说是第1章的汇总，下面进行简要介绍。
1.使用命令把.ui文件转换为.py文件
PySide 6安装成功后会自动安装pyside6-uic.exe，以笔者环境为例，位置为D:\Anaconda3\Scripts\pyside6-uic.exe。pyside6-uic.exe会自动把.ui文件编译为.py文件，从而方便Python调用。以firstMainWin.ui文件为例，使用方法是在当前目录下打开cmd窗口，并执行如下命令：
这是最基础的操作，后续介绍的其他方法都是对这种方法的GUI封装，这几种方法生成的.py文件是一样的。
注意：
（1）如果输入pyside6-uic.exe没有得到正确的结果，而是提示“pyside6-uic.exe不是内部命令或外部命令，也不是可运行的程序或批处理文件”，则是Python环境配置出错导致的，请参考第1章的内容使用正确的Python环境。
（2）如果要生成PyQt 6代码，则需要使用pyuic6.exe程序，位置为D:\Anaconda3\Scripts\pyuic6.exe，执行如下命令：
pyuic6.exe-o firstMainWin.py firstMainWin.ui
如果执行成功，则结果如图2-13和图2-14所示。
图2-13
图2-14
firstMainWin.py文件中的代码如下，由于使用pyside6-uic.exe生成的代码（对应PySide 6）中文使用Unicode字符串，因此不便于查看（如"确定"字符串会显示为u"\u786e\u5b9a"）。这里给出的是使用pyuic6.exe生成的代码（对应PyQt 6），两者的使用效果没有区别，这里只需要把PyQt 6看成PySide 6即可：
2.使用Eric 7把.ui文件转换为.py文件
Eric 7要在工程中使用。如果要编辑PySide 6代码就要创建或使用PySide 6工程；如果要编辑PyQt 6代码就需要使用PyQt 6工程（关于创建和使用工程的相关内容请参考第1章）。这里以PySide 6工程为例展开介绍，通过Eric 7打开工程（选择Project→NEW命令）Chapter02\ericProject\ericPySide6.epj，并执行如图2-15所示的操作。
上述操作完成之后，就会在当前目录下重新生成Ui_ericDemo.py文件。
3.使用PyCharm把.ui文件转换为.py文件
假设已经为PyCharm搭建好Python环境和PySide 6环境，通过如图2-16所示的方法就可以把firstMainWin.ui文件转换为firstMainWinUI.py文件。
图2-15
图2-16
4.使用VSCode把.ui文件转换为.py文件
假设已经为VSCode搭建好Python环境和PySide 6环境，通过如图2-17所示的方法可以把firstMainWin.ui文件转换为firstMainWin.py文件。
图2-17
5.使用Python脚本把.ui文件转换为.py文件
有些读者可能对命令行的使用不熟悉，所以本书介绍了如何使用Python脚本来完成转换，这个脚本从本质上使用Python代码把上述操作封装起来。这是一个 批量脚本，可以把当前目录下所有的xxx.ui文件转换为xxx.py文件 。本案例的文件名为Chapter02/tool.py，代码如下：
如果这个脚本不能执行，则说明系统的PySide/PyQt环境设置存在问题，这时候使用命令行也无法运行，请参考1.2节的内容搭建好环境。
如果要运行PyQt 6程序，则使用pyuic 6命令，注释掉pyside6-uic命令；如果要运行PySide 6程序，则使用pyside6-uic命令，注释掉pyuic 6命令。
只要把tool.py放在需要转换界面文件的目录下，并双击就可以直接运行（或使用其他方式运行），其执行效果和直接执行转换命令的效果是一样的。使用Qt Designer制作的图形界面如图2-18所示，界面文件为firstMainWin.ui。
图2-18
2.6节会详细介绍资源文件（.qrc）的相关内容，这里为了保证流程的完整性只进行简单介绍。基本使用方法如下：
和pyside6-uic.exe一样，可以使用Eric、PyCharm、VSCode把.qrc文件转换为.py文件，读者可以参考2.1.4节和第1章的内容，这里不再赘述。
注意： 如果是开发PyQt 6应用，PyQt 6官方已经放弃了对.qrc文件的支持（即没有pyrcc6.exe工具），则可以使用路径引用的方式设置图片，这种方式不需要编译。
上面介绍了如何制作.ui文件，以及如何把.ui文件转换为.py文件。值得注意的是，由于这里的.py文件是由.ui文件编译而来的，因此当.ui文件发生变化时，对应的.py文件也会发生变化。我们将这种由.ui文件编译而来的.py文件称为界面文件。由于界面文件每次编译时都会初始化，因此需要新建一个.py文件调用界面文件，这个新建的.py文件称为逻辑文件，也可以称为业务文件。界面文件和逻辑文件是两个相对独立的文件，通过上述方法可以实现界面与逻辑的分离（也就是上面提到的“显示和业务逻辑的分离”）。
要实现界面与逻辑的分离很简单，只需要新建一个firstMainWinRun.py文件（这是逻辑文件），并继承界面文件的主窗口类即可。其完整代码如下：
在上面的代码中实现了业务逻辑，代码结构也非常清晰。如果以后想要更新界面，那么只需要先对.ui文件进行更新，然后编译成对应的.py文件即可。
PySide 6支持使用Qt Designer实现界面与逻辑的分离，这也是需要读者学习它的非常重要的原因。另外，也可以通过Qt Designer生成的代码来了解一些窗口控件的用法。
想要做出丰富的界面还需要学一些代码，本书提供了常用的窗口控件的用法，方便读者参考。