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

L7O7

已于 2024-08-18 09:42:50 修改

阅读量314

点赞数 5

分类专栏： pyqt 文章标签： pyqt

于 2024-08-13 15:56:25 首次发布

本文链接：https://blog.csdn.net/weixin_44289472/article/details/141166260

版权

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.setWin