1.5　用Qt Designer设计界面

前面用纯代码的方式创建了一个简单的窗口和窗口上的控件，这种用纯代码从无到有的方式开发界面需要用户对界面控件的代码非常熟悉。本节讲解用Qt Designer可视化地开发界面，然后再把Qt Designer设计的界面文件ui转换成Python的py文件的方法。

1.5.1　窗口界面设计

在用pip命令安装完PySide6后，在Python的安装目录\Scripts下会出现PySide6-designer.exe文件，双击该文件，或者在Windows的cmd窗口中输入PySide6-designer后按Enter键，可以启动Qt Designer。

启动Qt Designer后，首先出现“新建窗体”对话框，如图1-11所示，从templates\forms中选择Widget，然后单击“创建”按钮，进入Qt Designer界面中。Qt Designer界面的左侧是控件区Widget Box，中间是设计窗口，可以把控件拖拽到窗口上，右边是控件的属性设置区（对象查看器）。

下面通过建立一个输入学生成绩，计算总成绩和平均成绩并保存成绩的简单界面，说明Qt Designer的使用方法。

第1步，从左边的Containers控件中拖拽两个Group Box控件到设计窗口中，并调整大小和位置，如图1-12所示。在设计窗口上选择左边的Group Box，然后在右边的属性编辑区将title属性改成“学生成绩”，在设计窗口上选择右边的Group Box，然后在右边的属性设置区将title属性改成“成绩统计”。

第2步，从左侧的Display Widgets拖拽3个Label控件到设计窗口的左侧“学生成绩”Group Box中，拖拽两个Label控件到设计窗口的右侧“学生成绩”Group Box中，并排列Label的位置，如图1-13所示。在右侧属性设置区将这5个Label的text分别修改成“语文”“数学”“英语”“总成绩”“平均分”，并可以设置alignment下的“水平的”为AlignRight。

第3步，从左侧Input Widgets中拖拽3个Spin Box到设计窗口的“学生成绩”Group Box中，拖拽两个Line Edit控件到设计窗口的“成绩统计”Group Box中，并排列位置和大小，如图1-14所示。在右侧的属性设置区将3个Spin Box的objectName分别修改成chinese、math和english，将两个Line Edit的objectName分别修改成total和average，并勾选readOnly属性。objectName是设置控件的名称，编程时通过objectName引用控件，而title或text属性是界面显示的文字。

第4步，从右侧的Buttons控件中拖拽两个Push Button按钮到设计窗口中，并调整大小和位置，如图1-15所示。在右侧属性设置区将第1个Push Button的ObjectName设置成btnCalculate，将text设置成“计算”，将第2个Push Button的ObjectName设置成btnSave，将text设置成“保存”。

第5步，单击工具栏上的“存盘”按钮，将设置好的文件保存到Python可以搜索到的本机硬盘路径中，例如d：\python目录下的student.ui文件中。

1.5.2　ui文件编译成py文件

前面用Qt Designer设计的图形界面存盘后是ui文件，用记事本打开该文件，可以看出ui文件的内容是xml格式的文本文件，还不是Python能识别的文件，因此需要把ui文件转换成py文件。下面介绍几种将ui文件转换成py文件的方法。PySide6安装完成后，在Python的安装路径的Scripts路径下有PySide6-uic.exe文件，PySide6-uic.exe可以将Qt创建的界面文件（∗.ui）转换成Python语法格式的文件（∗.py）。

1．用Windows操作系统的cmd窗口转换

启动cmd窗口，先用“cd /d”命令将ui文件所在的路径设置成当前路径，然后输入“pyside6-uic student.ui -o student.py”命令，如图1-16所示，在ui所在的文件夹中将会得到student.py文件。

用记事本或用Python的IDLE文件环境打开转换后的py文件，可以看到已经创建Ui_Form类，并在类内建立setupUi()函数，函数中建立各个控件的实例、名称、尺寸、位置等，代码中retranslateUi()函数的作用是修改控件的标题，将unicode编码的字符串进行解码，读者不用关心该函数。

2．用批处理形式转换

用记事本建立一个扩展名为bat的文件，如translate.bat，并输入如图1-17所示的内容，双击translate.bat即可完成ui文件到py文件的转换。

3．编写Python程序转换

建立如下所示的Python程序，运行该程序后可以把ui文件转换成py文件，实际使用时把ui、py和path变量修改一下即可。

1.5.3　ui文件转换后的编程

完成上面的转换后，需要对其进一步编程才能完成界面的功能。界面中有两个按钮：一个是“计算”按钮，可以完成总成绩和平均分的计算；另一个是“保存”按钮，可以把输入的数据保存到一个文件中。

1．完成界面的显示

按照下面的程序进行编程，程序内各行的意义前面都已经讲过，运行该程序即可得到设计的界面，不过这个界面中的两个按钮的功能还不能用。读者可以将下面的程序作为一个模板，在后面编程的时候稍做修改即可用于新的界面。

2．对“计算”按钮进行编程

“计算”按钮可以完成总成绩、平均成绩的计算和显示，并把各科成绩、总成绩和平均成绩保存到一个列表中，同时记录单击“计算”按钮的次数。下面是对“计算”按钮的编程。

第1步，用from PySide6.QtCore import Slot导入槽，其目的是为定义按钮事件做准备，后面会详细介绍槽的内容。

第2步，在初始化函数“__init__()”中增加两个私有变量“__count”和“__score”，分别记录单击“计算”按钮的次数和计算总成绩和平均成绩。

第3步，定义“计算”按钮的函数。在Python中对于按钮类可以用“on_按钮名称_clicked()”形式定义按钮的单击事件，在函数前需要加入“@Slot()”修饰，关于这部分内容后面还会详细介绍。

第4步，计算和显示总成绩、平均分。程序中用“s=self.ui.chinese.value()+self.ui.math.value()+self.ui.english.value()”语句计算总成绩，通过控件的value()方法获取输入的各科成绩。由于平均成绩可能是很长的小数，因此程序中用格式化的形式保留1位小数，用控件的setText()方法设置显示控件的值。

第5步，把单击“计算”按钮的次数和各科成绩加入到临时列表temp中，最后把临时列表temp加入到“__score”列表中。

3．对“保存”按钮进行编程

“保存”按钮用于将列表“__score”变量中的数据保存到文件中。程序中首先定义了一个模板template=＂{}：语文{}数学{}英语{}总成绩{}平均分{}\n＂用于格式化成绩；接下来打开文件并往文件中输出数据。