PyQt5保姆级教程-- 从入门到精通

主要内容：

1	Qt Designer
2	PyQt5基本窗口控件(QMainWindow、Qwidget、Qlabel、QLineEdit、菜单、工具栏等)
3	PyQt5高级组件(QTableView、QListView、容器、线程等)
4	PyQt5布局管理(QBoxLayout、QGirdLayout、QFormLayout、嵌套布局等)
5	PyQt5信号与槽(事件处理、数据传递等)
6	PyQt5图形与特效(定制窗口风格、绘图、QSS与UI美化、不规则窗口、设置样式等)
7	PyQt5扩展应用(制作PyQt5安装程序、数据处理、第三方绘图库在PyQt5中的应用、UI自动化测试等)

搭建PyQt5开发环境

工具：

Python

PyQt5模块

PyCharm

在PyCharm里面安装PyQt5

pip install PyQt5 -i https://pypi.douban.com/simple

在PyCharm里面安装Qt的工具包

pip install PyQt5-tools -i https://pypi.douban.com/simple

在安装tools时，报如下错误：

1.pip install PyQt5-tools安装失败

WARNING: Ignoring invalid distribution -yqt5 (e:\venvs\pyqt5_demo1\lib\site-packages)
Installing collected packages: pyqt5, click, qt5-tools, pyqt5-plugins, pyqt5-tools
ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问。: 'e:\\venvs\\pyqt5_demo1\\Lib\\site-packages\\PyQt5\\QtCore.pyd'
Check the permissions.

解决办法：

第一步：

将pip install ...加入--user为pip install --user ...即可

pip install PyQt5-tools  -i https://pypi.douban.com/simple   --user

换个思路

重启电脑，继续输入第一条命令安装

原因分析，可能占用了进程。

2.配置Qt Designer

Working directory：$FileDir$

3.配置PyUIC

Program：python的安装目录下的python.exe文件
Arguments：-m PyQt5.uic.pyuic  $FileName$ -o $FileNameWithoutExtension$.py

4.配置Pyrcc

Program：python的安装目录下的Scripts文件夹的pyrcc5.exe文件
Arguments：$FileName$ -o $FileNameWithoutExtension$_rc.py

展示效果如下：

5.ui转py的过程：

1.点击EXternal Tools里面的QTDesigner，会跳转到QT界面，

拖动组件，调整好界面，保存为first文件，它会默认生成first.ui文件

选中文件，鼠标右击，打开扩展，选择PyUIC,它会生成.py文件

将.ui文件转化为.py文件的命令行方法：

python -m PyQt5.uic.pyuic demo.ui -o demo.py

6.开发第一个基于PyQt5的桌面应用

必须使用两个类: QApplication和QWidget。都在PyQt5.QtWidgets。

第一个类表示应用程序，第二个类表示窗口

输入如下代码：

# 开发第一个基于PyQt5的桌面应用

import sys

from PyQt5.QtWidgets import QApplication,QWidget


if __name__ == '__main__':
    # 创建QApplication类的实例
    app = QApplication(sys.argv)
    # 创建一个窗口
    w = QWidget()
    # 设置窗口尺寸   宽度300，高度150
    w.resize(400,200)
    # 移动窗口
    w.move(300,300)

    # 设置窗口的标题
    w.setWindowTitle('第一个基于PyQt5的桌面应用')

    # 显示窗口
    w.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果如下：

也可以在命令行运行

python 文件名.py

7.基本操作

左侧是可以选择的组件，右侧可以设定属性值，设置完成之后，可以在窗体选择预览，选择查看c++和python代码。

8.在QtDesigner中使用水平布局(Vertical Layout)

两种方式：

(1)先移组件，再布局。

放置五个按钮，让这五个按钮等宽的，水平的排列

（全部选中–>鼠标右键–>布局–>水平布局 预览）

预览：

(2)先布局，再移组件。

生成demo1.ui文件

转成demo2.py文件，转成py文件，才能在程序里面调。

生成的代码如下：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'demo1.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.widget = QtWidgets.QWidget(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(70, 50, 651, 51))
        self.widget.setObjectName("widget")
        self.horizontalLayout = QtWidgets.QHBoxLayout(self.widget)
        self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.pushButton = QtWidgets.QPushButton(self.widget)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout.addWidget(self.pushButton)
        self.pushButton_2 = QtWidgets.QPushButton(self.widget)
        self.pushButton_2.setObjectName("pushButton_2")
        self.horizontalLayout.addWidget(self.pushButton_2)
        self.pushButton_3 = QtWidgets.QPushButton(self.widget)
        self.pushButton_3.setObjectName("pushButton_3")
        self.horizontalLayout.addWidget(self.pushButton_3)
        self.pushButton_4 = QtWidgets.QPushButton(self.widget)
        self.pushButton_4.setObjectName("pushButton_4")
        self.horizontalLayout.addWidget(self.pushButton_4)
        self.widget1 = QtWidgets.QWidget(self.centralwidget)
        self.widget1.setGeometry(QtCore.QRect(110, 160, 578, 194))
        self.widget1.setObjectName("widget1")
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout(self.widget1)
        self.horizontalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.listView = QtWidgets.QListView(self.widget1)
        self.listView.setObjectName("listView")
        self.horizontalLayout_2.addWidget(self.listView)
        self.pushButton_5 = QtWidgets.QPushButton(self.widget1)
        self.pushButton_5.setObjectName("pushButton_5")
        self.horizontalLayout_2.addWidget(self.pushButton_5)
        self.checkBox = QtWidgets.QCheckBox(self.widget1)
        self.checkBox.setObjectName("checkBox")
        self.horizontalLayout_2.addWidget(self.checkBox)
        self.radioButton = QtWidgets.QRadioButton(self.widget1)
        self.radioButton.setObjectName("radioButton")
        self.horizontalLayout_2.addWidget(self.radioButton)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "Button1"))
        self.pushButton_2.setText(_translate("MainWindow", "Button2"))
        self.pushButton_3.setText(_translate("MainWindow", "Button3"))
        self.pushButton_4.setText(_translate("MainWindow", "Button4"))
        self.pushButton_5.setText(_translate("MainWindow", "PushButton"))
        self.checkBox.setText(_translate("MainWindow", "CheckBox"))
        self.radioButton.setText(_translate("MainWindow", "RadioButton"))

如何在程序里面调用，先新建一个Run_demo1.py文件

代码如下：

import sys
import demo1

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo1.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行：

弹出如下窗口：

此时出现了一个小问题：

如何解决： (将此目录生成源代码目录)

设置完成之后，等待加载完成，导入文件名底下的红线消失

9.在QtDesigner中使用垂直布局(Horizontal Layout)

和水平布局的操作类似，也有两种布局方式：

(1) 先移动组件，再布局

(2) 先布局，再移动组件

点击保存，生成垂直布局文件demo2.ui

右键demo2.ui,生成demo2.py文件

demo2.py的代码如下：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'demo2.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayoutWidget = QtWidgets.QWidget(self.centralwidget)
        self.verticalLayoutWidget.setGeometry(QtCore.QRect(180, 150, 441, 371))
        self.verticalLayoutWidget.setObjectName("verticalLayoutWidget")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.verticalLayoutWidget)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.label = QtWidgets.QLabel(self.verticalLayoutWidget)
        self.label.setObjectName("label")
        self.verticalLayout_2.addWidget(self.label)
        self.pushButton_6 = QtWidgets.QPushButton(self.verticalLayoutWidget)
        self.pushButton_6.setObjectName("pushButton_6")
        self.verticalLayout_2.addWidget(self.pushButton_6)
        self.pushButton_5 = QtWidgets.QPushButton(self.verticalLayoutWidget)
        self.pushButton_5.setObjectName("pushButton_5")
        self.verticalLayout_2.addWidget(self.pushButton_5)
        self.pushButton_4 = QtWidgets.QPushButton(self.verticalLayoutWidget)
        self.pushButton_4.setObjectName("pushButton_4")
        self.verticalLayout_2.addWidget(self.pushButton_4)
        self.checkBox = QtWidgets.QCheckBox(self.verticalLayoutWidget)
        self.checkBox.setObjectName("checkBox")
        self.verticalLayout_2.addWidget(self.checkBox)
        self.widget = QtWidgets.QWidget(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(40, 40, 95, 121))
        self.widget.setObjectName("widget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.widget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.pushButton = QtWidgets.QPushButton(self.widget)
        self.pushButton.setObjectName("pushButton")
        self.verticalLayout.addWidget(self.pushButton)
        self.pushButton_2 = QtWidgets.QPushButton(self.widget)
        self.pushButton_2.setObjectName("pushButton_2")
        self.verticalLayout.addWidget(self.pushButton_2)
        self.pushButton_3 = QtWidgets.QPushButton(self.widget)
        self.pushButton_3.setObjectName("pushButton_3")
        self.verticalLayout.addWidget(self.pushButton_3)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "TextLabel"))
        self.pushButton_6.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_5.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_4.setText(_translate("MainWindow", "PushButton"))
        self.checkBox.setText(_translate("MainWindow", "CheckBox"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_2.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_3.setText(_translate("MainWindow", "PushButton"))

在python程序里面调用，新建Run_demo2.py文件

代码如下：

import sys
import demo2

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo2.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行程序：

10.在QtDesigner里面同时创建垂直布局和水平布局

新建一个 main window,点击 创建

在布局的时候，windows里面，可以通过ctrl+上下左右进行微调。

文件保存，命名为demo3.ui文件，同样用拓展工具，生成demo3.py文件。

同样，新建运行文件Run_demo3.py文件，代码如下：

import sys
import demo3

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo3.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行代码，结果如下：

11.在QtDesigner中同时使用栅格布局(Grid Layout)

拖放四个按钮之后，选中栅格布局

选中之后，效果如下：

拖拽边角，可以放大：

练习：利用栅格布局实现计算器数字区域

拖动button键调整好位置，全选之后选中布局，再选栅格布局

点击栅格之后，效果如下：

保存，生成demo4.ui文件

同样进行上述操作，转成demo4.py文件，新建Run_demo4.py文件，代码如下：

import sys
import demo4

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo4.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果如下：

栅格布局的注意点：摆放控件要尽可能的整齐，这样系统才会正确的识别。

栅格布局和水平布局，垂直布局一样，可以后期添加控件。

12.向栅格布局中拖动控件

13.在QtDesigner中使用表单布局(Form Layout)

新建一个 main window,点击 创建

选择需要的控件，进行如下操作：

调整好布局，保存文件为demo5.ui

利用pyUIC插件，生成python代码调试

创建Run_demo5.py文件，执行代码如下：

import sys
import demo5

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo5.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果如下：

14.在容器中完成布局

跟上面一样，新建一个MainWindow，添加对应的组件，鼠标右键点击，变形为对应的容器。

同理，生成demo6.py文件，新建Run_demo6文档，添加代码

import sys
import demo6

from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
    # 只有直接运行这个脚本，才会往下执行
    # 别的脚本文件执行，不会调用这个条件句

    # 实例化，传参
    app = QApplication(sys.argv)

    # 创建对象
    mainWindow = QMainWindow()

    # 创建ui，引用demo1文件中的Ui_MainWindow类
    ui = demo6.Ui_MainWindow()
    # 调用Ui_MainWindow类的setupUi，创建初始组件
    ui.setupUi(mainWindow)
    # 创建窗口
    mainWindow.show()
    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行程序

15.在QtDesigner中使用绝对布局

跟上面一样，新建一个MainWindow，添加对应的组件，

同理，生成demo7.py文件，新建Run_demo7文档，添加代码(代码如上，略作修改)，PyCharm里运行如下：

15.在QtDesigner中使用分割线与间隔

跟上面一样，新建一个MainWindow，

新建4个按钮，设置水平间隔，新建3个按钮，设置垂直间隔

在A2和A3之间设立分割线，在B2和B3之间设立分割线

保存文件为demo8.ui ,转为demo8.py代码，新建Run_demo8.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

16.布局的最大尺寸和最小尺寸

默认状态下，它的尺寸可以自由调节，跟上面一样，新建一个MainWindow，

可以看到，原本这个bushButton控件最小宽高可以到0，最大宽高可以到1677215

通过改变右侧栏的值，就可以设置它不小于多少，不大于多少。

16.尺寸策略(sizePolicy)

对于大多数控件来说，sizeHint(期望尺寸)是只可读的，也就是说，你布局的时候不管拖拽多大，最后输出的还是默认值

读取pushButton的期望尺寸：

self.pushButton.sizeHint().width()
self.pushButton.sizeHint().height()

即可以看到，一个pushButton的期望尺寸，宽是41，高度是28

在demo7里进行上面操作，还是得到一样的数值。

同理，也可以进行读取其他控件的操作，比如读取textBrowser的宽高，代码如下：

self.c.sizeHint().width()
self.textBrowser.sizeHint().height()

效果如下：

即可以看到：控件textBrowser的默认宽高分别为256和192。

同样，也可以看最小的期望尺寸，以pushButton为例，其代码如下：

self.pushButton.minimumSizeHint().width()
self.pushButton.minimumSizeHint().height()

还是以demo7.py测试

可以看到，对于大部分控件来说，它的期望尺寸和最小期望尺寸是一样的

为何使用尺寸策略：

就是因为拓展的组件无论如何拖拽大小，经过布局设置之后，会回到默认的大小，为了让布局更有个性，采用尺寸策略，可以改变组件的期望尺寸。如图：

练习，左侧放树，构造分栏效果

保存文档为demo9.ui,转为demo9.py代码，新建Run_demo9.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

17.在QtDesigner里面设置控件之间的伙伴关系

即控件关联之后，可以通过一个控件来控制另外一个控件

新建一个MainWindow，布局如下，保存为demo10.ui

接着：

如上图所示，水平布局后面的“H”为热键 ，Ctrl +1 为快捷键

​ 垂直布局后面的“V”为热键 ，Ctrl +2 为快捷键

热键：只有在这个菜单显示时，按“H”时，才会起作用。菜单关闭时，按“H”不起作用。“V”同理。

然后给demo10.ui文件的lable添加热键：

给姓名添加热键成：姓名(&A):

给年龄添加热键成：年龄(&B):

给邮箱添加热键成：邮箱(&C):

然后打开编辑伙伴，按住鼠标左键，选中lable指向Line Edit

然后选择编辑窗口部件，会切回到正常的部件

保存文件为demo10.ui ,转为demo10.py代码，新建Run_demo10.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

再添加三个lable试一下效果，删除掉原来的demo10.py文件，用新保存的demo10.ui去生成新的demo10.py文件，点击运行查看效果

果然，按住alt+a,alt+b,alt+c,alt+d,alt+e.alt+f分别在右边对应的的Line Edit里面有焦点光标。

拓展：

18.如何修改控件的Tab顺序

新建一个MainWindow，布局如下，在Edit里面，选中 编辑 Tab顺序，在控件前端就会出现序号，这个序号就是顺序

也可以选中从这里开始或者重新开始，依次点击形成顺序。

接下来选中统一的 Line Edit来演示

保存文档为demo11.ui,转为demo11.py代码，新建Run_demo11.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

按Tab 键，焦点光标就会按照指定的顺序在Line Edit内跳转

19.在QtDesigner中完成信号与槽的设置

信号(signal)与槽(slot)是Qt的核心机制，由于PyQt忠实的继承了Qt的所有特性，所有信号与槽也是PyQt的核心机制。

信号：是由对象或控件发射出去的消息。可以理解为按钮的单击事件。

当单击按钮时，按钮就会向外部发送单击的消息，这些发送出去的信号需要一些代码来拦截，这些代码就是槽

槽本质上是一个函数或者方法，信号可以理解为事件，槽可以理解为事件函数

信号与槽的设置：就是需要将信号和槽绑定

一个信号可以和多个槽绑定，一个槽可以拦截多个信号。

信号和槽绑定有两种方式，一种是用QtDesigner进行绑定，一种是在代码中进行绑定

(1)用QtDesigner进行信号和槽绑定

需求：单机按钮，关闭窗口

新建一个MainWindow，拖拽一个pashButton按钮，修改文本为“关闭窗口”

在Edit里选择编辑信号/槽，点击pashButton按钮向外拖拽，

在Edit里选择编辑信号/槽，点击pashButton按钮向外拖拽，松开鼠标，左栏选择clicked(),勾选左下角“显示从QWidget”继承信号和槽，右栏选择close(),然后点击右下角ok.

在Edit里面选择“编辑窗口部件”，对布局页面进行恢复。

在“窗体”里选择“预览于”，选择“Windows风格”

此时点击页面的“关闭窗口”，则页面就会关闭

练习

添加两个CheckBox进行如下操作：

给第一个CheckBox进行信号与槽的绑定

给第二个CheckBox进行信号与槽的绑定

在Edit里面选择"编辑窗口部件"进行恢复主窗口

恢复完成后，窗口如下：

预览效果如下：

取消勾选check box的选项，下面的line Edit视角效果也会相应的变换。

保存文档为demo12.ui,转为demo12.py代码，新建Run_demo12.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

拓展：

(2)用代码完成关闭主窗口

​ 见第23节

20 在QtDesigner中为窗口添加菜单和工具栏

一个窗口，应该拥有菜单栏，工具栏，状态栏

新建一个MainWindow，添加菜单栏，添加完成之后，也可以右键点击，选择移除，同理添加工具栏。

给菜单栏添加内容：

在”窗体“里选择预览，效果如下：

在菜单和工具条里面如何添加按钮？

不管是菜单还是工具条的按钮，是一个action的动作，添加步骤如下：

在"视图"里，选择动作编辑器

两个菜单自动生成两个动作，双击可用设置动作

点击"ok"之后，主窗口变化如下：

保存文档为demo13.ui,转为demo13.py代码，新建Run_demo13.py，添加代码(代码如上，略作修改)，PyCharm里运行如下：

21 创建主窗口

主窗口类型，有三种窗口

窗口类型	说明
QMainWindow	可以包含菜单栏、工具栏、状态栏和标题栏，是最常见的窗口形式
QDialog	是对话窗口的基类。没有菜单栏、工具栏、状态栏
QWidget	不确定窗口的用途，就使用QWidget

如下图所示，新建一个controls文件夹，在controls里面新建images文件夹用来装图片，在controls里面新建

FirstMainWin.py文件。

在FirstMainWin.py文件中，添加代码如下：

# 第一个主窗口
# 把所有和UI有关的代码都放在一个类里面，创建窗口只要创建类的实例就可以了

import sys

# 从PyQt里面创建窗口和应用
from PyQt5.QtWidgets import QMainWindow,QApplication
# 用来添加图标
from PyQt5.QtGui import QIcon

# 定义一个类，这个类从QMainWindow里面继承

class FristMainWin(QMainWindow):

    # 初始化
    def __init__(self,parent=None):
        super(FristMainWin,self).__init__(parent)

        # 设置主窗口的标题
        self.setWindowTitle('第一个主窗口应用')

        # 设置窗口的尺寸
        self.resize(400,300)
        # 获得状态栏
        self.status = self.statusBar()

        # 在状态栏上，设置消息的状态时间5000ms
        self.status.showMessage('只存在5秒的消息',5000)

    # 防止别的脚本调用，只有自己单独运行，才会调用下面代码
if __name__ == '__main__':

    # 创建app实例，并传入参数
    app =  QApplication(sys.argv)

    # 设置图标
    app.setWindowIcon(QIcon('images/horse.jpg'))

    # 创建对象
    main = FristMainWin()

    # 创建窗口
    main.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行代码，效果如下：

五秒之后，页面效果如下：

22.让主窗口居中显示

计算窗口的左上角的坐标

移动左上角的坐标，带动整个窗口的移动。

左上角的横坐标就是窗口的左边距，左上角的纵坐标就是窗口的上边距到顶部的值

新建CenterForm.py文件，执行代码：

# 让主窗口居中显示

# 通过QDesktopWidget类相应的API可以得到整个屏幕的尺寸
# 通过move方法移动窗口
import sys

# 从PyQt里面创建窗口和应用
from PyQt5.QtWidgets import QDesktopWidget,QMainWindow,QApplication
# 用来添加图标
from PyQt5.QtGui import QIcon

# 定义一个类，这个类从QMainWindow里面继承

class CenterForm(QMainWindow):

    # 初始化
    def __init__(self,parent=None):
        super(CenterForm,self).__init__(parent)

        # 设置主窗口的标题
        self.setWindowTitle('让窗口居中')

        # 设置窗口的尺寸
        self.resize(400,300)

        # 添加center方法，作用就是让窗口居中
        def center(self):
            # 创建实例，获得屏幕对象,得到屏幕的坐标系
            screen = QDesktopWidget().screenGeometry()

            # 得到窗口的坐标系
            size = self.geometry()

            # 获取屏幕的宽度、高度
            # 窗口左边缘的坐标等于(屏幕的宽度-窗口的宽度)/2
            newLeft = (screen.width()-size.width()) / 2

            # 屏幕上边缘的坐标等于(屏幕的高度-窗口的高度) / 2
            newTop = (screen.height() - size.height()) / 2

            # 移动窗口
            self.move(newLeft,newTop)

        #  获得状态栏
        # self.status = self.statusBar()
        #
        # # 在状态栏上，设置消息的状态时间5000ms
        # self.status.showMessage('只存在5秒的消息',5000)

    # 防止别的脚本调用，只有自己单独运行，才会调用下面代码
if __name__ == '__main__':

    # 创建app实例，并传入参数
    app =  QApplication(sys.argv)

    # 设置图标
    # app.setWindowIcon(QIcon('images/001.jpg'))

    # 创建对象
    main =CenterForm()

    # 创建窗口
    main.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果展示：

23.如何退出应用程序

可以通过关闭主窗口，由于整个程序只有一个窗口，关闭主窗口之后，应用程序就会退出，之前在第19节演示过

换个思路，通过代码，在窗口上添加一个pashButton,调用QApplication里面的click()方法，来实现退出应用程序，关闭所有窗口

在controls文件夹里，新建QuitApplication.py文件，添加下列代码

# 退出应用程序
# 用到了水平布局，引入QHBoxLayout
# 需要一个控件，引入了QWidget
# 需要butoon，引入了QPushButton
import sys
from PyQt5.QtWidgets import QHBoxLayout,QMainWindow,QApplication,QPushButton,QWidget
# 用来添加图标
from PyQt5.QtGui import QIcon


class QuitApplication(QMainWindow):

    # 初始化
    def __init__(self):
        super(QuitApplication,self).__init__()

        # 设计窗口的尺寸
        self.resize(300,120)
        # 设置主窗口的标题
        self.setWindowTitle('退出应用程序')


        # 添加Button
        # 创建全局对象self.button1
        self.button1 = QPushButton('退出应用程序')

        # 发送单击信号，执行对应的方法  (将信息与槽关联)
        self.button1.clicked.connect(self.onClick_Button)

        # 创建水平布局
        layout = QHBoxLayout()
        # 将组件加到水平局部里面
        layout.addWidget(self.button1)

        # 放置一个主框架
        mainFrame = QWidget()
        # 在主框架内添加水平布局
        mainFrame.setLayout(layout)
        # 把主框架放在窗口上
        self.setCentralWidget(mainFrame)

    # 按钮的单击事件的方法(自定义的槽)
    def onClick_Button(self):
        sender = self.sender()
        print(sender.text() + '按钮被按下')
        # 得到实例
        app = QApplication.instance()
        # 退出应用程序
        app.quit()


    # 防止别的脚本调用，只有自己单独运行，才会调用下面代码
if __name__ == '__main__':

    # 创建app实例，并传入参数
    app =  QApplication(sys.argv)

    # 设置图标
    app.setWindowIcon(QIcon('images/001.jpg'))

    # 创建对象
    main = QuitApplication()

    # 创建窗口
    main.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

运行代码，效果如下：

点击“退出应用程序”

24.屏幕坐标系

在controls文件夹里，新建ScreenGeometry.py文件，添加下列代码

# 屏幕坐标系
# 它是以屏幕左上角为原点，划分的坐标系

# 下面演示用面向过程的方式进行演示  （面向对象的方式需要创建类，创建方法）

import sys
from PyQt5.QtWidgets import QHBoxLayout,QMainWindow,QApplication,QPushButton,QWidget

# 创建实例
app = QApplication(sys.argv)
# 创建窗口
widget = QWidget()
# 在窗口里放button
btn = QPushButton(widget)
# 在button里面更改文本
btn.setText("按钮")

# 添加点击事件，让鼠标点击button后，打印出“onclick”
def onClick_Button():
    print("第一种方式获取各个值")
    # 窗口离屏幕原点到y轴的距离
    print("widget.x() = %d" % widget.x())   # 600 （以屏幕为原点的窗口横坐标）
    # 窗口离屏幕原点到x轴的距离
    print("widget.y() = %d" % widget.y())    # 200  （以屏幕为原点的窗口纵坐标，不包含标题栏）
    # 窗口本身的宽度
    print("widget.width()=%d" % widget.width())    # 300 (窗口宽度)
    # 窗口本身的高度
    print("widget.height()= %d" % widget.height())    # 240  (工作区高度)

    print("第二种方式获取各个值")
    # 窗口离屏幕原点到y轴的距离
    print("widget.geometry().x() = %d" % widget.geometry().x())  # 601   （以屏幕为原点的窗口横坐标）
    # 窗口离屏幕原点到x轴的距离
    print("widget.geometry().y() = %d" % widget.geometry().y())  # 238    （以屏幕为原点的窗口纵坐标，包含标题栏）
    # 窗口本身的宽度
    print("widget.geometry().width()=%d" % widget.geometry().width())  # 300    (窗口宽度)
    # 窗口本身的高度
    print("widget.geometry().height()= %d" % widget.geometry().height())  # 240    (工作区高度)

    print("第三种方式获取各个值")
    # 窗口离屏幕原点到y轴的距离
    print("widget.frameGeometry().x() = %d" % widget.frameGeometry().x())    # 600  （以屏幕为原点的窗口横坐标）
    # 窗口离屏幕原点到x轴的距离
    print("widget.frameGeometry().y() = %d" % widget.frameGeometry().y())    # 200    （以屏幕为原点的窗口纵坐标，不包含标题栏）
    # 窗口本身的宽度
    print("widget.frameGeometry().width()=%d" % widget.frameGeometry().width())    # 302   (窗口宽度)
    # 窗口本身的高度
    print("widget.frameGeometry().height()= %d" % widget.frameGeometry().height())    # 279  (窗口高度，包含标题栏)

# 将点击事件与槽绑定
btn.clicked.connect(onClick_Button)

# 移动button到窗口内的相应位置
btn.move(24,52)

# 设置窗口的尺寸
widget.resize(300,240)  # 设置工作区的尺寸

# 移动窗口到屏幕的相应位置
widget.move(600,200)

# 设置窗口的标题
widget.setWindowTitle('屏幕坐标系')

# 创建窗口
widget.show()

# 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
# 如果不添加下行代码，运行程序会闪退
sys.exit(app.exec_())

运行代码，效果如下：

点击窗口里面的“按钮”，效果如下：

分析代码：

有些许误差是因为在windows下窗体有边框，在mac下窗体无边框。

25.设置窗口和应用程序图标

在controls文件夹里，新建IconForm.py文件，执行代码：

# 设置窗口和应用程序图标

# 窗口的setWindowIcon方法设置窗口的图标，只在Windows和linux中可用，mac不可用


import sys

# 从PyQt里面创建窗口和应用
from PyQt5.QtWidgets import QMainWindow,QApplication
# 用来添加图标
from PyQt5.QtGui import QIcon

# 定义一个类，这个类从QMainWindow里面继承

class IconForm(QMainWindow):

    # 初始化
    def __init__(self,parent=None):
        super(IconForm,self).__init__(parent)
        self.initUI()

    # 规范代码，初始化直接写在一个方法里
    def initUI(self):
        # 设置坐标系，可用同时设置窗口的尺寸和位置
        self.setGeometry(400,400,250,450)
        # 设置主窗口的标题
        self.setWindowTitle('设置窗口图标')
        # 设置窗口图标
        self.setWindowIcon(QIcon('./images/001.jpg'))
        # self.setWindowIcon(QIcon('/images/3.ico'))   这行代码失效，原因：图片路径表示问题
        # # 设置窗口的尺寸
        # self.resize(400,300)
        # 获得状态栏
        # self.status = self.statusBar()
        #
        # # 在状态栏上，设置消息的状态时间5000ms
        # self.status.showMessage('只存在5秒的消息',5000)

    # 防止别的脚本调用，只有自己单独运行，才会调用下面代码
if __name__ == '__main__':

    # 创建app实例，并传入参数
    app =  QApplication(sys.argv)
    # QApplication中的setWindowIcon方法用于设置主窗口的图标和应用程序图标，但调用了窗口的setWinodowIcon方法
    # QApplication中的setWindowIcon方法就只能用于设置应用程序图标了
    # 设置图标
    # app.setWindowIcon(QIcon('images/horse.jpg'))

    # 创建对象
    main = IconForm()

    # 创建窗口
    main.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果如下：

26.显示控件的提示信息

在controls文件夹里，新建Tooltip.py文件，执行代码：

# 显示控件的提示信息

# 需要用到 QToolTip

import sys
from PyQt5.QtWidgets import  QHBoxLayout,QMainWindow,QApplication,QToolTip,QPushButton,QWidget
# 提示信息需要设置字体
from PyQt5.QtGui import QFont



class TooltipForm(QMainWindow):
    def __init__(self):
        super().__init__()
        # 调用初始化ui的一个方法
        self.initUI()

    # 编写初始化UI的方法
    def initUI(self):
        # 设置字体和字号
        QToolTip.setFont(QFont('SansSerif',12))
        # 给窗口设置提示，这个方法支持富文本
        self.setToolTip('今天是个<b>好日子</b>')
        # 设置窗口的位置和尺寸
        self.setGeometry(300,300,200,200)
        # 设置窗口的标题
        self.setWindowTitle('设置控件提示消息')



# 防止别的脚本调用，只有自己单独运行时，才会调用下面代码
if __name__ == '__main__':
    # 创建app实例，并传入参数
    app= QApplication(sys.argv)
    # 创建对象
    main = TooltipForm()
    # 创建窗口
    main.show()
    # 进入程序的主循环，并通过exit函数，确保主循环安全结束(该释放资源的释放资源)
    sys.exit(app.exec_())

效果如下：

拓展，给窗口添加一个按钮，并显示提示信息

# 显示控件的提示信息

# 需要用到 QToolTip

import sys
from PyQt5.QtWidgets import  QHBoxLayout,QMainWindow,QApplication,QToolTip,QPushButton,QWidget
# 提示信息需要设置字体
from PyQt5.QtGui import QFont



class TooltipForm(QMainWindow):
    def __init__(self):
        super().__init__()
        # 调用初始化ui的一个方法
        self.initUI()

    # 编写初始化UI的方法
    def initUI(self):
        # 设置字体和字号
        QToolTip.setFont(QFont('SansSerif',12))
        # 给窗口设置提示，这个方法支持富文本
        self.setToolTip('今天是个<b>好日子</b>')
        # 设置窗口的位置和尺寸
        self.setGeometry(300,300,200,200)
        # 设置窗口的标题
        self.setWindowTitle('设置控件提示消息')

    # 添加butoon按钮并设置提示信息

        # 添加Button
        # 创建全局对象self.button1
        self.button1 = QPushButton('我的按钮')
        # 设置按钮提示
        self.button1.setToolTip('这是按钮的提示信息')
        # 发送单击信号，执行对应的方法  (将信息与槽关联)
        self.button1.clicked.connect(self.onClick_Button)

        # 创建水平布局
        layout = QHBoxLayout()
        # 将组件加到水平局部里面
        layout.addWidget(self.button1)

        # 放置一个主框架
        mainFrame = QWidget()
        # 在主框架内添加水平布局
        mainFrame.setLayout(layout)
        # 把主框架放在窗口上
        self.setCentralWidget(mainFrame)

    # 按钮的单击事件的方法(自定义的槽)
    def onClick_Button(self):
        sender = self.sender()
        print(sender.text() + '按钮被按下')
        # 得到实例
        app = QApplication.instance()
        # 退出应用程序
        app.quit()

# 防止别的脚本调用，只有自己单独运行时，才会调用下面代码
if __name__ == '__main__':
    # 创建app实例，并传入参数
    app= QApplication(sys.argv)
    # 创建对象
    main = TooltipForm()
    # 创建窗口
    main.show()
    # 进入程序的主循环，并通过exit函数，确保主循环安全结束(该释放资源的释放资源)
    sys.exit(app.exec_())

效果如下：

27.QLabel控件的基本用法

PyQt5常用控件之一，QLable控件，常用来展示文本信息

控件方法	说明
setAlignment()	设置文本的对齐方式
setIndent()	设置文本缩进
text()	获取文本内容
setBuddy()	设置伙伴关系
setText()	设置文本内容
selectedText()	返回所选择的字符
setWordWrap()	设置是否允许换行

QLabel常用的信号(事件)：
1.当鼠标划过QLabel控件时触发：linkHovered

2.当鼠标单击QLabel控件时触发：linkActivated

在controls文件夹里，新建QLabelDemo.py文件，执行代码：

# QLabel控件的基本用法

import sys
# 导入QLabel模块  QVBoxLayout垂直布局  (QHBoxLayout 水平布局)
from PyQt5.QtWidgets import QVBoxLayout,QMainWindow,QApplication,QLabel,QWidget
# 导入调制板，调制QLabel背景色
# 导入显示图片包QPixmap
from PyQt5.QtGui import QPixmap,QPalette
# 导入一些Qt的常量
from PyQt5.QtCore import Qt

# 编写一个类，从QWidget中继承
class QLabelDemo(QWidget):
    def __init__(self):
        super().__init__()
        # 调用初始化UI的一个方法
        self.initUI()

    # 规范代码，初始化UI直接写在一个方法里
    def initUI(self):
        # 创建四个label控件
        label1 = QLabel(self)
        label2 = QLabel(self)
        label3 = QLabel(self)
        label4 = QLabel(self)


        # 给label1设置文本,支持html的标签
        label1.setText("<font color=purpel>这是一个文本标签.</font>")
        # 用调试板自动填充背景
        label1.setAutoFillBackground(True)
        # 创建调试板
        palette = QPalette()
        # 给调试板设置背景色
        palette.setColor(QPalette.Window,Qt.blue)
        # 对label1使用调试板
        label1.setPalette(palette)
        # 让label1居中对齐
        label1.setAlignment(Qt.AlignCenter)


        # 给label2设置<a>标签
        label2.setText("<a href='#'>欢迎使用Python GUI程序</a>")  # 可以在a标签里触发事件或者跳转网页 二者选其一

        # 给label3设置文本居中
        label3.setAlignment(Qt.AlignCenter)
        # 给label3设置提示文本
        label3.setToolTip('这是一个图片标签')
        # 让label3显示图片
        label3.setPixmap(QPixmap("./images/4.jpg"))   # 同级目录写法./images

        # 给label4设置文本内容
        label4.setText("<a href='https://www.baidu.com/'>打开百度</a>")  # setText里面的内容要用双引号，单引号会报错
        # 让label4打开链接
        # 如果设为True,用浏览器打开网页，如果设为False,调用槽函数
        label4.setOpenExternalLinks(True)
        # 让label4的文本右对齐
        label4.setAlignment(Qt.AlignRight)
        # 给label4设置提示文本
        label4.setToolTip('这是一个超链接')

        # 创建一个垂直布局
        vbox = QVBoxLayout()
        # 分别把这四个控件放到这个布局里面           布局函数 addWidget
        vbox.addWidget(label1)
        vbox.addWidget(label2)
        vbox.addWidget(label3)
        vbox.addWidget(label4)

        # 将信号与槽绑定
        label2.linkHovered.connect(self.linkHovered)
        label4.linkActivated.connect(self.linkClicked)

        # 设置布局
        self.setLayout(vbox)
        self.setWindowTitle('QLabel控件演示')
        # 设置标题


    # 槽有两个方法 1.滑过  2.单击
    def linkHovered(self):
        print("当鼠标滑过label2标签时，触发事件")

    def linkClicked(self):
        print("当鼠标单击label4标签时，触发事件")

  # 防止别的脚本调用，只有自己单独运行，才会调用下面代码
if __name__ == '__main__':

    # 创建app实例，并传入参数
    app =  QApplication(sys.argv)

    # 设置图标
    # app.setWindowIcon(QIcon('images/001.jpg'))

    # 创建对象
    main = QLabelDemo()

    # 创建窗口
    main.show()

    # 进入程序的主循环，并通过exit函数确保主循环安全结束(该释放资源的一定要释放)
    sys.exit(app.exec_())

效果展示：

注意：调整好图片的尺寸，防止它跳出屏幕外

28.如何设置QLabel控件和其他控件的伙伴关系

在controls文件夹里，新建QLabelBuddy.py文件，执行代码：

# QLabel与伙伴控件
# 1.通过setBuddy设置伙伴关系
# 2.通过栅格布局来完成手动布局，依靠
# mainLayout.addWidget(控件对象,rowIndex,columnIndex,row,column)   （行索引,索引,占用多少行,占用多少列）


import sys
from PyQt5.QtWidgets import *

class QLabelBuddy(QDialog):
    def __init__(self):
        super().__init__()
        self.initUI()

    # 规范代码，初始化直接写在一个方法里
    def initUI(self):
        # 设置主窗口的标题
        self.setWindowTitle('QLabel与伙伴控件')


        # 创建nameLabel控件
        #添加热键   添加热键的方法& + 英文字母  ，后面的英文字母就变成了热键。在可视化窗口里通过 "Alt" + 英文字母 就可以起作用
        nameLabel =QLabel('&Name',self)

        # 创建QLineEdit控件
        nameLineEdit = QLineEdit(self)

        # 把nameLabel和nameLineEdit设置伙伴关系
        nameLabel.setBuddy(nameLineEdit)

        # 创建PasswordQLabel控件, 并添加热键
        passwordLabel = QLabel('&Password',self)
        # 创建PasswordLineEdit控件
        passwordLineEdit = QLineEdit(self)

        # 把passwordLabel和passwordLineEdit设置成伙伴关系
        passwordLabel.setBuddy(passwordLineEdit)

        # 创建两个按钮，一个上面写OK,一个上面写Cancel
        btnOK = QPushButton('&OK')
        btnCancel = QPushButton('&Cancel')

        # 使用栅格布局
        mainLayout = QGridLayout(self)
        # 将nameLabel控件放到布局里面    第一行第一列
        mainLayout.addWidget(nameLabel,0,0)
        # 将nameLineEdit控件放到布局里面  第一行第二列，占用一行两列
        mainLayout.addWidget(nameLineEdit,0,1,1,2)
        # 将passwordLabel控件放到布局里面  第二行第一列
        mainLayout.addWidget(passwordLabel,1,0)
        # 将passwordLineEdit控件放到布局里面 第二行第一列，占用一行两列
        mainLayout.addWidget(passwordLineEdit,1,1,1,2)
        # 经过上面操作，此时有两行，每行有三列


        # 放置按钮  第三行第二列
        mainLayout.addWidget(btnOK,2,1)
        # 放置按钮    第三行第三列
        mainLayout.addWidget(btnCancel,2,2)

# 防止别的脚本调用，只有自己单独运行时，才会调用下面代码
if __name__ == '__main__':
    # 创建app实例，并传入参数
    app= QApplication(sys.argv)
    # 创建对象
    main = QLabelBuddy()
    # 创建窗口
    main.show()
    # 进入程序的主循环，并通过exit函数，确保主循环安全结束(该释放资源的释放资源)
    sys.exit(app.exec_())

效果如下：

28.QLineEdit控件与回显模式(EchoMode)

在controls文件夹里，新建QLineEditEchoMode.py文件，执行代码：

# QLineEdit控件与回显模式
# QLineEdit控件的基本功能：1.输入单行的文本 2.设置回显模式EcoMode

"""
EcoMode(回显模式)
4种回显模式
1.Normal 正常的显示
2.Normal  不显示   类似于linux中输入密码没反应 但已经提交
3，Password  密码式的显示   类似于输入密码出现小黑点或*号
4，PasswordEchoOnEdit     密码显示编辑模式   常见于手机端，类似于  输入一个字母A,前两秒编辑框里显示的是A，过了一两秒编程框里变成的一个点或者*号

"""
import sys
from PyQt5.QtWidgets import *

# 从QWidget窗口类里面继承
class QLineEditEchoMode(QWidget):
    def __init__(self):
        super(QLineEditEchoMode,self).__init__()
        self.initUI()

    # 编写初始化方法
    def initUI(self):
        # 设置窗口标题
        self.setWindowTitle('文本输入框的回显模式')

        # 创建表单布局
        formLayout = QFormLayout()
        # 根据4种回显模式，分别创%e