Python Xiaobai starts the pyqt5 project from scratch (3) connection between signal and slot

This series is for Python The small white , From scratch, practical interpretation application QtDesigner Conduct PyQt5 Project practice of .
What is starting from scratch ？ Install... From software 、 Environment configuration start . Don't skip a detail , Don't miss a line of code , Do not omit an example diagram .
This paper explains the connection mechanism between signal and slot , Demonstrate various types of signals in detail / Implementation method of slot connection , This is the core of the graphical user interface .
This paper will also introduce object-oriented programming , This is the basic idea of graphical user interface .

Welcome to your attention 『Python Xiaobai starts from scratch PyQt5 Project practice @ Youcans』 series , Ongoing update
Python Xiaobai starts from scratch PyQt5 Project practice （1） Installation and environment configuration
Python Xiaobai starts from scratch PyQt5 Project practice （2） Menus and toolbars
Python Xiaobai starts from scratch PyQt5 Project practice （3） Signal to slot connection

---

1. Signal and slot （Signals and slots）

The signal and slot mechanism is PyQt The core mechanism of , Used for communication between objects , That is to realize the automatic call between functions .

1.1 Principle of signal and slot

In short , Connect the signal to the slot function , When the signal is triggered , The slot function will be called automatically .

Analyze the process , It involves several basic concepts and relationships ：

• The signal ： A signal can be an action , It can also be a state of an object , Used to trigger the connected slot .
• Slot ： Slot is a function , Can be triggered by a connected signal .
• Send a signal ： When the signal is transmitted , Automatically call the slot function of signal connection . Usually , Transmit a signal when the state of the object changes .
• Signals can have parameters , But it must correspond to the parameters of the slot function .
• One signal can connect multiple slot functions , Multiple signals can also be connected to a slot function .
• One signal can be connected to another .
• Many widgets （ Control ） Built in signal and slot , Can be called directly . You can also customize signals and slots as needed .

1.2 The sender of the signal and the receiver of the slot

The sender of the signal is usually a control object , Send a signal when the state of the control object changes . Common senders are various control objects in the graphics window , But it can also be an action object .

The receiver of the slot is usually also a control object . Slot function is a custom slot function , Or the built-in slot function of the control . In a general way , The slot function also has an object as the body , That is, perform the operation defined by the function for the recipient control object . For example, the function performed by the slot function is to close , So what exactly is to close that control ？ The closing object is the recipient .

In order to explain the connection between signal and slot , We use it QtDesigner The graphic window designed in the previous section uiDemo3.ui On the basis of , Add several button objects and text line editing objects ：

• open PyCharm, from Tools -> ExternalTools -> QtDesigner open QtDesigner, open uiDemo3.ui file .

• Click to select QtDesigner Left control bar Buttons Medium PushButton, Hold the mouse down , Drag it to the middle graphical interface and release the mouse , Just create a... In the graphical interface PushButton Control .

• Click to select QtDesigner Left control bar InputWidget Medium LineEdit, Hold the mouse down , Drag it to the middle graphical interface and release the mouse , Just create a... In the graphical interface LineEdit Control .

• Repeat the above steps , Build a few more PushButton Controls and LineEdit Control .

  • Pay attention to QtDesigner On the right side “ Object viewer ” The control name and properties displayed in , Multiple PushButton、LineEdit Automatically assigned different names （objectName）, Such as ：LineEdit_1、LineEdit_2、LineEdit_3, It's like a table with several drawers marked “ Drawer 1”、“ Drawer 2”、“ Drawer 3” To identify .
  • The name and other properties of the control can be found in “ Property editor ” Edit and modify .

• Select the created in the graphical interface with the mouse PushButton Control or LineEdit Control , You can drag the control to adjust the position .

• Mouse click PushButton Button , You can edit the label of the button control, that is, the display content on the button .
  For ease of explanation , This example will each PushButton The display content of the control （text attribute ） It is amended as follows ：“1# Button ” ~ “4# Button ”, Will each LineEdit The display content of the control （text attribute ） It is amended as follows ：“ Text edit line -1” ~ “ Text edit line -3”.

Save the application graphical interface as uiDemo4.ui, The preview effect is as follows ：

---

2. QtDesigner Establish the connection between the signal and the slot

2.1 Signal to slot connection ： Different senders and receivers , The slot function is the built-in function of the control

QtDesigner Provides convenient and intuitive signals / Slot editing method .

This example introduces different senders and receivers , Slot function is the operation method of the built-in function of the control . Several methods are built into different types of controls , for example QPushButton Control's built-in methods include ： Click on 、 Choose 、 State change 、 Display menu, etc , and QLineEdit Control's built-in methods include ： Empty 、 Copy 、 shear 、 Paste 、 Future generations 、 Undo operation, etc . Use the built-in method of the control as the slot function , Can be called directly , There is no need to define functions .

The function we designed is ： When you click the button control “pushButton_1” when , Empty the text editing control “lineEdit_1” Display content of . Note that we call the button control “lineEdit_1” instead of “ Text edit line -1”, This is because lineEdit_1 Is the name of the control , It is constant in the program , and “ Text edit line -1” Just show the content , Can be modified in the program .

QtDesigner Set signal / The operation steps of slot connection are as follows ：

• （1） Select menu item “Edit” -> Edit signal / Slot , Or through the shortcut keys F4 Or select... In the toolbar , Entry signal / Slot edit mode .
• （2） Select the control object sender , Here is the button control “pushButton_1”, Press and hold the left mouse button , The button control turns light red .
  • Press and hold the left mouse button , And move the mouse , When the mouse moves out of the control object area , A red line with an arrow and a red grounding symbol appear .
  • Press and hold the left mouse button , And drag the mouse to the control object “lineEdit_1”, Release the left mouse button , To create a control object “pushButton_1” For the sender 、 The control object “lineEdit_1” A signal for the receiver / Slot connection .
  • The control object “pushButton_1” and “lineEdit_1” All turn light red , A red line with an arrow starts from “pushButton_1” set out , Point to “lineEdit_1” end .
• （3） At the same time, a dialog box will pop up “ configure connections - QtDesigner”, The signal options for the sender control are displayed on the left side of the dialog box , The right side of the dialog box displays the recipient's control options .
  • According to the functional requirements , The trigger signal is a button “pushButton_1” Clicked , Select... From the left side of the dialog box “clicked()”;
  • According to the functional requirements , After receiving the signal, the action is to empty the text editing control “lineEdit_1”, Select... From the right side of the dialog box “clear()”;
  • Click the button at the bottom of the dialog box “OK”, Complete the signal / Configuration of slot connection .

2.2 Signal to slot connection ： Different senders and receivers , Slot function is a user-defined function

This example introduces different senders and receivers , Slot function is the operation method of user-defined function .

stay 2.1 The use of the built-in method of the control as the slot function is introduced in , Can be called directly , There is no need to define functions . The core function in programming is usually the user-defined function developed by the programmer according to the requirements . Use custom functions as slot functions , On the one hand, of course, it is necessary to write custom functions , On the other hand, add the custom function to the slot function configuration connection table .

The function we designed is ： When you click the button control “pushButton_2” when , Empty the text editing control “lineEdit_2” Display content of , And display text information “current signal: click pushButton_2”. In the main program, a user-defined function should be written to realize this function , Name the custom function click_pushButton_2().

Notice the custom function we wrote click_pushButton_2(), Although the function is only for text editing controls “lineEdit_2” To operate , But for custom functions, you can also complete any other functions , Operate on other controls according to the control name . Therefore, the receiver of the slot function is not a text editing control “lineEdit_2”, It's the main window control “MainWindow”.

QtDesigner Set signal / The operation steps of slot connection are as follows ：

** In the first QtDesigner Add a custom function to the slot function configuration connection table —— It's very important .** Many articles on the Internet do not talk about the specific implementation method , The entrance to this operation is also difficult to find .

• （1） stay QtDesigner On the top right “ Object viewer ”, Choose MainWindow Or other top-level objects , Right click to bring up the drop-down menu , choice “ Change the signal / Slot ”;
  • eject “MainWindow The signal of / Slot ” Dialog box , The options for the slot are displayed at the top of the dialog box , Signal options are shown below .
  • Click... At the top of the dialog box “ Slot ” Green at the bottom of the option box “+”, The system is in “ Slot ” A row is automatically added at the end of the options table “slot1()”. This is the new custom slot function .
  • Click Select “slot1()”, Double click the mouse again , You can modify the function name of the slot function , For example, change it to click_pushButton_2().
  • Then click on the top of the dialog box “ Slot ” Green at the bottom of the option box “+”, You can continue to add custom slot functions one by one .

Then set the signal / Slot connection ：

• （2） Select menu item “Edit” -> Edit signal / Slot , Or through the shortcut keys F4 Or select... In the toolbar , Entry signal / Slot edit mode .
  • Select the control object sender , Here is the button control “pushButton_2”, Long press the left mouse button and move , When the mouse moves out of the control object area , A red line with an arrow and a red grounding symbol appear .
  • Release the left mouse button , To create a control object “pushButton_2” For the sender 、 The control object “MainWindow” A signal for the receiver / Slot connection .
    The control object “pushButton_2” Turns light red , A red line with an arrow starts from “pushButton_2” set out , Does not point to other controls , It ends with a grounding symbol .
• （3） At the same time, a dialog box will pop up “ configure connections - QtDesigner”, The sender control is displayed on the left side of the dialog box “pushButton_2” Signal options , The receiver... Is displayed on the right side of the dialog box “MainWindow” Control options .
  • According to the functional requirements , The trigger signal is a button “pushButton_2” Clicked , Select... From the left side of the dialog box “clicked()”;
  • Receiver on the right side of the dialog box “MainWindow” In the list of control options , Shows several custom functions just added , choice “click_pushButton_2()”;
  • Click the button at the bottom of the dialog box “OK”, Complete the signal / Configuration of slot connection .

Last , Don't forget to write custom functions in the main program . But this does not belong to QtDesigner The content of the design , I will not go into details here .

Similarly , We design ： When you click the button control “pushButton_3” when , In the text editing control "lineEdit_1" Displays the current system date , In the text editing control "lineEdit_2" Display the current system time , In the text editing control “lineEdit_3” Display prompt message . Write a custom function in the main program click_pushButton_3(), And with “pushButton_3” Set up the signal / Slot connection .

This shows that ： In a custom subfunction , You can manipulate multiple control objects at the same time , Then, various user-defined functions can be realized .

2.3 Signal to slot connection ： The same sender and receiver , The slot function is the built-in function of the control

This example introduces the same sender and receiver , Slot function is the operation method of the built-in function of the control .

seeing the name of a thing one thinks of its function , The same sender and receiver , That is, the sender of the signal and the receiver of the slot function are the same control object . What's going on here ？ for example , A switch button has “On/Off” Two kinds of state , Each time you press the button, the button status will flip . Similarly , The option box is also checked 、 There are no two states selected . Specifically , After clicking the button , Close the button control , Also belong to the same sender and receiver .

Let's start with the control object “pushButton_4” From the button control QPushButton Change for Option box control “QCheckBox”：

• Click on the control object “pushButton_4”, Several small blue squares are displayed around the boundary of the control object ;
• Click the right mouse button to call out the drop-down menu , choice ：“ The variant is ” ->“QCheckBox”.

here , Design the button control in the interface window , It becomes an option box . meanwhile , On the right side “ Object viewer ” Control in “pushButton_4”, Also automatically changed to “checkBox_4”. Changed controls “checkBox_4” Inherited the original control “pushButton_4” Some properties of , Such as ： Location 、 Size 、 According to the content .

Next, set the signal / Slot connection ：

• （1） Select menu item “Edit” -> Edit signal / Slot , Or through the shortcut keys F4 Or select... In the toolbar , Entry signal / Slot edit mode .
• （2） Select the control object sender , Here is the button control “checkBox_4”, Long press the left mouse button and move , When the mouse moves out of the control object area , A red line with an arrow and a red grounding symbol appear .
  • Long press the left mouse button , Drag the mouse back to the control object “checkBox_4” Area and release the left mouse button , It is established that both sender and receiver are control objects “checkBox_4” The signal of / Slot connection .
  • The control object “checkBox_4” Turns light red , A red line with an arrow starts from “checkBox_4” set out , Back to “checkBox_4” end .
• （3） At the same time, a dialog box pops up “ configure connections - QtDesigner”, The left and right sides of the dialog box are the control objects “checkBox_4” Signal and slot function .
  • Select... From the left side of the dialog box “clicked(bool)”;
  • Select... From the right side of the dialog box “setChecked(bool)”;
  • Click the button at the bottom of the dialog box “OK”, Complete the signal / Configuration of slot connection .

2.4 Signal to slot connection ： The sender is the action object

Common signal senders are various control objects in the graphics window , But it can also be an action object . This example describes how to establish the connection between signal and slot for control objects in menu bar and toolbar .

When the sender of the signal is the action object , The receiver of the signal is usually the top-level object “MainWindow”, The slot function can be an object “MainWindow” Built in functions for , It can also be a custom function .

In the last article, we worked on actions in the menu bar and toolbar “actionQuit” Set up the signal / Slot connection , The sender is the action object 、 Connect to object “MainWindow” A case of built-in functions . The operation process is as follows ：

• From QtDesigner Lower right window “ The signal / Slot editor ”, Click on the green “+” Create a new signal / Slot connection ;
• Click on “< sender >”, Select the object from the menu “actionQuit”;
• Click on “< The signal >”, Select from the menu “triggered()”;
• Click on “< The receiver >”, Select from the menu “MainWindow”;
• Click on “< Slot >”, Select from the menu “closed()”.

The purpose of the above operation is ： sender object “actionQuit” Trigger “triggered()” when , The receiver object "MainWindow" Execute slot function “closed()”.

Now let's do another action “actionHelp” Set up the signal / Slot connection , The connected slot function is a user-defined function trigger_actHelp(). The operation process is as follows ：

• stay QtDesigner The custom function trigger_actHelp() Add to the slot function configuration connection table ;
• From QtDesigner Lower right window “ The signal / Slot editor ”, Click on the green “+” Create a new signal / Slot connection ;
• Click on “< sender >”, Select the object from the menu “actionHelp”;
• Click on “< The signal >”, Select from the menu “triggered()”;
• Click on “< The receiver >”, Select from the menu “MainWindow”;
• Click on “< Slot >”, Select from the menu “trigger_actHelp()”.

thus , This chapter introduces the use of QtDesigner Carry out several common signals / Editing and setting method of slot connection . As shown in the figure below , stay QtDesigner The signal added in / Slot connections will be in the signal / The slot editor window displays .

---

3. The main program of graphical interface

In the last section QtDesigner The design of graphical interface is completed , Save the file as uiDemo4.ui. open PyCharm, Select Chinese file uiDemo4.ui, Use PyUIC It can be converted to uiDemo4.py.

Next, we will write the main program of graphical interface , Call the graphical interface design file uiDemo4.py.

3.1 From process oriented to object-oriented

Process oriented programming

In the last article , After we create the main window in the main program , Call directly UI Medium Ui_MainWindow(). This is a process oriented programming method .

# GUIdemo3.py
import uiDemo3 # Import image interface design file 
if __name__ == '__main__':
app = QApplication(sys.argv) # Create application objects 
MainWindow = QMainWindow() # Create main window 
ui = uiDemo3.Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show() # Show the main window 
sys.exit(app.exec_()) # Exit in the main thread 

Object oriented programming

With the deepening of the project , We need to deal with richer graphical interfaces and realize more complex software functions , The scale of the program is growing , The structure of the program is becoming more and more complex .
Object oriented programming makes the structure of the program clearer , So it's easy to read 、 understand 、 Development and maintenance , Very suitable for large-scale development 、 Multitasking graphical interface application software .PyQt5 Class in 、 object 、 Controls and methods , Are the concepts of object-oriented programming . therefore , From the beginning of this paper, we adopt the object-oriented programming method , To write the main program of graphical interface .

routine GUIdemo4.py as follows ：

from uiDemo4 import Ui_MainWindow # Import uiDemo4.py Medium Ui_MainWindow Interface class 
class MyMainWindow(QMainWindow, Ui_MainWindow): # Inherit QMainWindow Classes and Ui_MainWindow Interface class 
def __init__(self, parent=None):
super(MyMainWindow, self).__init__(parent) # Initializes the parent class 
self.setupUi(self) # Inherit Ui_MainWindow Interface class 
if __name__ == '__main__':
app = QApplication(sys.argv) # stay QApplication Method used in , Create application objects 
myWin = MyMainWindow() # Instantiation MyMainWindow class , Create main window 
myWin.show() # Display controls on the desktop myWin
sys.exit(app.exec_()) # The end of the process , Exit procedure 

In the above routine , We created a class MyMainWindow(), It inherited QtWidgets.QMainWindow Class methods and imported uiDemo4.py Medium Ui_MainWindow Interface class .

“super(MyMainWindow, self).init()”： Initializes the parent class , hold MyMainWindow The object of self Convert to parent class QMainWindow object , And call init function .

“self.setupUi(self)”： Inherit uiDemo4.py Medium Ui_MainWindow Interface class , call Ui_MainWindow Class setupUi() Method .

Little white who is not familiar with object-oriented programming , It doesn't matter if you don't understand this program , Just save it and draw a picture .

3.2 Custom slot function

Run routines GUIdemo4.py. Why , Wrong report ：

AttributeError: ‘MyMainWindow’ object has no attribute ‘click_pushButton_2’

The system prompts that... Cannot be found ‘click_pushButton_2’, This is because... Has not been written in the main program 2.2 Custom slot function in .

The custom slot function click_pushButton_2()、click_pushButton_3、trigger_actHelp(self) Add to the main program . The following is a routine GUIdemo4.py Complete code .

# GUIdemo4.py
# Demo4 of GUI by PyQt5
# Copyright 2021 youcans, XUPT
# Crated：2021-10-10
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox
from uiDemo4 import Ui_MainWindow # Import uiDemo4.py Medium Ui_MainWindow Interface class 
class MyMainWindow(QMainWindow, Ui_MainWindow): # Inherit QMainWindow Classes and Ui_MainWindow Interface class 
def __init__(self, parent=None):
super(MyMainWindow, self).__init__(parent) # Initializes the parent class 
self.setupUi(self) # Inherit Ui_MainWindow Interface class 
def click_pushButton_2(self): # Click on pushButton_2 Trigger 
self.lineEdit_2.setText("click_pushButton_2")
return
def click_pushButton_3(self): # Click on pushButton_3 Trigger 
from datetime import datetime # Import datetime library 
nowDate = datetime.now().strftime("%Y-%m-%d") # Get current date "2021-10-10"
nowTime = datetime.now().strftime("%H:%M:%S") # Get the current time "16:58:00"
self.lineEdit_1.setText("Current date: {}".format(nowDate)) # Show date 
self.lineEdit_2.setText("Current time: {}".format(nowTime)) # Display time 
self.lineEdit_3.setText("Demo4 of GUI by PyQt5") #
return
def trigger_actHelp(self): # action actHelp Trigger 
QMessageBox.about(self, "About",
""" Digital image processing toolbox v1.0\nCopyright YouCans, XUPT 2021""")
return
if __name__ == '__main__':
app = QApplication(sys.argv) # stay QApplication Method used in , Create application objects 
myWin = MyMainWindow() # Instantiation MyMainWindow class , Create main window 
myWin.show() # Display controls on the desktop myWin
sys.exit(app.exec_()) # The end of the process , Exit procedure 

Now we have a simple but complete object-oriented graphical interface application GUIdemo4.

Check the application GUIdemo4 All the functions of ：

• Click on “1# Button ”, Empty “ Text edit line -1”;
• Click on “2# Button ”, stay “ Text edit line -2” Show ：“click_pushButton_2”;
• Click on “3# Button ”, stay “ Text edit line -1” Show current date , stay “ Text edit line -2” Display current time , stay “ Text edit line -3” Show ： “Demo4 of GUI by PyQt5”;
• Click on “4# Button ”, “4# Button ” The option box is selected ;
• Click... In the toolbar “ help ”, Pop up the information prompt box in the figure above , Click on “OK” You can close the message box ;
• Click... In the menu bar or toolbar “ sign out ”, Close the graphics window application .

If all the above tests are successful , So congratulations to Xiaobai , You have mastered the use of QtDesigner Design PyQt5 Basic functions of graphical interface .

In the next article , We will introduce PyQt5 Common controls in .

【 At the end of this section 】

Copyright notice ：

Welcome to your attention 『Python Xiaobai starts from scratch PyQt5 Project practice @ Youcans』 Original works

Original works , Reprint must be marked with the original link ：(https://blog.csdn.net/youcans/article/details/120664900)

Copyright 2021 youcans, XUPT

Crated：2021-10-10

Welcome to your attention 『Python Xiaobai starts from scratch PyQt5 Project practice @ Youcans』 series , Ongoing update
Python Xiaobai starts from scratch PyQt5 Project practice （1） Installation and environment configuration
Python Xiaobai starts from scratch PyQt5 Project practice （2） Menus and toolbars
Python Xiaobai starts from scratch PyQt5 Project practice （3） Signal to slot connection