可视化设计窗体Qt Designer设计GUI单窗体程序

Qt提供了可视化界面设计工具Qt Designer，可视化设计UI窗体可大大提高GUI应用程序开发的工作效率。本例演示如何用Qt Designer可视化设计UI窗体，然后转换为Python程序，再构建GUI程序。主要工作步骤如下：

1. 在Qt Designer中设计可视化窗体
2. 用工具软件pyuic5将窗体文件(.ui)文件转换为Python程序文件, pyuic5工具的配置方法参见这里
3. 使用转换后的窗体文件Python类构建GUI应用程序

1. 用Qt Designer可视化设计窗体

在Qt Designer中选择窗体模板，窗体模板主要有以下3种

1. Dialog模板，基于QDialog类的窗体，具有一般对话框的特性，如可以模态显示、具有返回值等
2. Main Window模板，基于QWidget类窗体，具有主窗口特性，窗口上有主菜单栏、工具栏、状态栏等
3. Widget模板，基于QWidget类的窗体。QWidget类是所有界面组件的基类，如QLabel, QPushButton等界面组件都是从QWidget类继承而来的。QWidget类也是QDialog和QMainWindow的父类，基于QWidget类创建的窗体可以作为独立的窗口运行，也可以嵌入到其他界面组件内显示。
   
   设计如下窗体，文件命名为FormHello.ui，保存在project目录下
   
   窗体文件FormHello.ui实际上是一个XML文件，它记录了窗体上各组件的属性以及位置分布，如下
   

2. 将.ui文件编译为.py文件

将.ui文件转为.py文件，参加这里，转换后，在project目录下多出一个.FormHello.py文件，如下：

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_FormHello(object):
    def setupUi(self, FormHello):
        FormHello.setObjectName("FormHello")
        FormHello.resize(283, 151)
        self.LabHello = QtWidgets.QLabel(FormHello)
        self.LabHello.setGeometry(QtCore.QRect(45, 40, 189, 16))
        font = QtGui.QFont()
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.LabHello.setFont(font)
        self.LabHello.setScaledContents(False)
        self.LabHello.setObjectName("LabHello")
        self.btnClose = QtWidgets.QPushButton(FormHello)
        self.btnClose.setGeometry(QtCore.QRect(105, 90, 75, 23))
        self.btnClose.setObjectName("btnClose")

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

    def retranslateUi(self, FormHello):
        _translate = QtCore.QCoreApplication.translate
        FormHello.setWindowTitle(_translate("FormHello", "Demo2_2"))
        self.LabHello.setText(_translate("FormHello", "Hello, by UI Designer"))
        self.btnClose.setText(_translate("FormHello", "关闭"))

分析上述这段自动生成的代码，可以看出该文件定义了一个类Ui_FormHello, 其原理和功能如下：
（1）Ui_FormHello的父类是Object, 而不是QWidget
（2）Ui_FormHello类定义了一个函数setupUi(),其接口定义为def setupUi(self, FormHello), 其传入参数有两个，self和FormHello。
分析setupUi()的前两句，

FormHello.setObjectName("FormHello")
FormHello.resize(283, 151)

可以看出，FormHello是窗体，是一个QWidget对象，对象名就是在Qt Designer中设计的窗体的objectName。这个FormHello是从外部传入的。
注意下面两句

self.LabHello = QtWidgets.QLabel(FormHello)
self.btnClose = QtWidgets.QPushButton(FormHello)

创建了一个QLabel对象LabHello，它的父类容器是FormHello窗体。创建了一个QPushButton对象btnClose，它的父类容器也是FormHello窗体。

总计：经过pyuic5编译后，FormHello.ui文件转换为了一个对应的python的类定义文件Ui_FormHello.py文件，类的名称是Ui_FormHello，有如下功能和特点：

1. 类名与对应的.ui文件里窗体的ObjectName有关联，是ObjectName名称前面加“Ui_”自动生成
2. 类的函数setupUi()用于窗体的初始化，它创建了窗体上的所有组件并设置其属性
3. Ui_FormHello这个类并不创建窗体，窗体FormHello是有外部传入的，做为所有组件的父类容器
4. Ui_FormHello.py文件只定义了一个类Ui_FormHello,这个文件并不能直接运行。

3. 使用Ui_FormHello类的GUI程序框架

编写文件appMain1.py，它演示了使用Ui_FormHello.py类创建GUI程序的基本框架，注意步骤如下
（1）首先用QApplication类创建应用程序实例app
（2）创建一个QWidget类的对象baseWidget，注意baseWidget为引用
（3）使用FormHello模块中的Ui_FormHello类创建一个对象，并用引用ui指向它
（4）调用Ui_FormHello类的setupUi，传递QtWidget类型的对象baseWidget，创建完整窗体。根据前面的分析，Ui_FormHello类的setupUi函数只是创建窗体上的组件，如LabHello，btnClose，而作为组件容器的窗体是靠外部传入的。这里baseWidget就是作为一个基本的QtWidget窗体传入，执行了这条语句，就在窗体baseWidget上创建了标签和按钮。
（5）显示窗体，使用的语句是baseWidget.show()，注意此处不是ui.show()，因为ui是Ui_FormHello类的对象，而Ui_FormHello的父类是object，根本就不是Qt的窗体界面类

import sys
import FormHello
from PyQt5 import QtWidgets

#首先用QApplication类创建应用程序实例app
app = QtWidgets.QApplication(sys.argv)
#创建一个QWidget类的对象baseWidget，并用QWidget类型的引用baseWidget指向它，
# 它是基本的QWidget窗体，没有任何设置
baseWidget = QtWidgets.QWidget()
# 使用FormHello模块中的Ui_FormHello类创建一个对象，并用引用ui指向它
ui = FormHello.Ui_FormHello() # 调用该类默认的无参构造函数
ui.setupUi(baseWidget) #调用setupUi，传递给setupUi QtWidget类型的对象baseWidget，创建完整窗体
baseWidget.show()
ui.LabHello.setText("Hello，被程序修改")

sys.exit(app.exec_())

注意这一句ui.LabHello.setText("Hello，被程序修改")不能替换成baseWidget.LabHello.setText("Hello，被程序修改")。因为baseWidget只是LabHello的父类容器，并没有定义公共属性LabHello. 而ui是Ui_FormHello类的实例对象，窗体上的所有界面组件都是ui的实例属性，因此，访问窗体上的组件只能通过ui.

整个project的目录如下