实战PyQt5: 024-Qt Designer进阶一


为信号添加槽函数

在上一篇中，初步学会了如何使用Qt Designer来设计UI界面，在本篇中，我们使用Qt Designer为控件的信号添加连接的槽函数。

使用Qt Designer为测试按钮添加功能，当点击按钮时，弹出一个消息框，并显示信息"这是一个PyQt5应用"，为此我们需要给对象名为btnTest的QPushButton按钮的onClicked信号添加一个槽函数。

在界面中添加一个QPushButton, 其标题信息为"测试", 对象名称为btnTest, 将主窗口的标题信息由"MainWindow" 改成"实战PyQt5：Qt Designer 演示2"。

点击菜单"Edit --> Edit Signals/Slots"(或者按快捷键F4, 或者点击 工具条上的" Edit Signals/Slots"按钮)，进入信号/槽编辑模式，选中"Test"按钮，按下鼠标，并拖动，就会显示出一条红色的连接线，释放鼠标，弹出窗口"Configure Connection - Qt Designer",然后点击右边的"编辑"按钮，弹出编辑对话框"Signal/Slots of MainWindow - Qt Designer", 点击"Slots"组的"+"按钮，添加一个槽函数onBtnTestClicked()，点击"OK"按钮退回到窗口"Configure Connection - Qt Designer",选中左边的clicked()信号,然后再选中右边的onBtnTestClicked()，点击"OK"按钮退出，至此，我们就成功地为"测试"按钮的点击信号添加响应的槽函数，onBtnTestClicked()。然后点击保存，这一步工作完成。其操作过程如下图所示:

实战PyQt5: 024-Qt Designer进阶一

Qt Designer SIgnal/Slot 编辑演示

槽函数实现

假定刚才我们保存的文件, 将其转化成Python代码为 Ui_demo2.py, 其代码如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
from PyQt5 import QtCore, QtGui, QtWidgets
 
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(585, 428)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.btnTest = QtWidgets.QPushButton(self.centralwidget)
        self.btnTest.setGeometry(QtCore.QRect(200, 170, 75, 23))
        self.btnTest.setObjectName("btnTest")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 585, 23))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
 
        self.retranslateUi(MainWindow)
        self.btnTest.clicked.connect(MainWindow.onBtnTestClicked)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
 
    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "实战PyQt5：Qt Designer 演示2"))
        self.btnTest.setText(_translate("MainWindow", "测试"))

可以看到，其中加入了信号槽连接语句

1
self.btnTest.clicked.connect(MainWindow.onBtnTestClicked)

创建文件qtdesignerdemo2.py 在其中创建类 DesignerDemo2，并在其中实现槽函数onBtnTestClicked(self)，qtdesignerdemo2.py完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox
from Ui_demo2 import Ui_MainWindow
 
class DesignerDemo2(QMainWindow, Ui_MainWindow) :
    def __init__(self, parent = None):
        super(DesignerDemo2, self).__init__(parent)
        self.setupUi(self)
       
    def onBtnTestClicked(self) :
        QMessageBox.information(self, '信息', '这是一个PyQt5应用')
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DesignerDemo2()
    window.show()
    sys.exit(app.exec())

运行结果如下图：

实战PyQt5: 024-Qt Designer进阶一

Qt Designer 演示

本文知识点

  • 使用Qt Designer添加槽函数的方法；
  • 在Qt Designer中设置主窗口的标题信息；
  • 通过继承，在ui文件转换成相应的python代码的文件之外对槽函数的实现，这样成功分离UI和实现逻辑，同时也不会因为UI做了调整之后，重新生成py文件导致代码丢失的问题。

前一篇： 实战PyQt5: 023-初识Qt Designer