1. pyqt5 configuration environment, add plug-ins (plug-ins include: calling qt5 in pycharm, converting .ui files into .py files)
Please refer to the content of this big guy
(19 messages) PyQt under Windows writes simple software and packages it_pyqt package_poetmilk’s Blog-CSDN Blog
2. Click tools in pycharm and then click qt_desinger in the plug-in (the first step has been configured)
Interface functions to be implemented:
① There are multiple interfaces, click the button to jump between the interfaces
②Display pictures at a fixed position (this can also be loaded with resource files in qt5, here is the pyqt5 method)
③Click the button to display the picture
step1: After opening, the interface looks like this
Step2: Because we are going to make a multi-page, we need to add the control stack widget to the gray box and adjust the size
Step2.1: Find the control List Widget, drag it into the range of the stack widget control just now, adjust the size, and then all controls must be added in the white box
step2.2 The first interface is already available, the next is the second interface, right click on the gray part of the stack widget control in the second step, the position in the picture (don’t click on the control in step 2.1), click Insert page , and then click Insert to the current page, a new interface will appear. Insert several interfaces if you want several interfaces
step2.3 switch interface is to click these two small triangles
step3: Add some controls, such as buttons, static text, or labels to display pictures
Step4: The following is the interface, which needs to be implemented now. Click the button in interface 1 to display the image at the TextLabel on the left, and click another button to jump to the second page. The image on the left of interface 2 is displayed directly, and click the image on the right to jump to the interface 1
Interface 1
Interface 2
step5: The fourth step has completed the interface, save it. Now it’s time to add functionality. Click the second one, edit slot, signal 
Divide it up, the content of the following step5 is how to add slot functions
step5.1: Enter the slot/signal editing mode, and the place where the mouse is placed will turn red (there is no way to operate the control at this time)
step5.2 Find the control you want to add functions to. For example, the button “click to display the picture on the left” in the above picture, and then click the left button and drag down, there will be a line. drag outside the white box
step5.3 Let go and an interface will pop up
Step5.4 Select clicked on the left, click edit on the right
Step5.5 After editing, you will enter a new interface. Click the plus sign of the slot, and a new function will appear. You can change the name according to your needs, and click OK. (Different functions require different slot functions, and several more can be added as needed. For example, clicking to jump to a new page is a category, and a slot function is added; clicking a picture is a category, and another slot function needs to be added), add OK then click OK
Step5.6 Click the slot function just now, click OK, the slot function has been added to this control. The same goes for other controls. (If the functions are the same, you don’t need to add the slot function after adding it before, just select it directly on this interface)
This is what it looks like after adding the slot function
step5.7 Exit slot editing. After adding slot functions to all controls, there is currently no way to edit controls, just switch modes
Step6: Save the file, open pycharm (the subsequent operations are all here), and you can see a .ui file. Right-click, select External Tools, click qt_uic (the plug-in installed in the first step), and the ui file will be converted into a py file. But it can’t run at this time, because the main function and class definition are missing. Add the main function and class definition below. After adding, click run to see the running interface
class MyDialog(QtWidgets. QDialog):
def __init__(self, parent=None):
super().__init__(parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
if __name__ == '__main__':
import sys
app = QtWidgets. QApplication(sys. argv)
dlg = MyDialog()
dlg. show()
sys. exit(app. exec_())
step7: The page can be loaded, but the function has not been realized yet. Now start to implement the function, such as the following code.
The few sentences of class and the last few sentences of if_name have been included in the previous step. Adding functionality is the middle part.
The first part: Link the Button and the slot function. In this sentence, pushButton11 is the control I want to implement. The realized function is the change slot function (the name change is added in step 5.5. This slot function realizes the jump function). If there are multiple controls that implement the same function, they can be written together. Like the first part of my full code below. (This part should be written in the MyDialg class)
self.ui.pushButton11.clicked.connect(self.change)
The second part: loading pictures. That is to say, the picture exists when the interface comes out. This part can load resource files in QT5, or write code. 222.png is the picture you want to display. label11 is the position where you want this picture to be displayed. This label11 is the label added in the control, changed its name to label11
pixmap1 = QtGui.QPixmap('222.png')
self.ui.label11.setPixmap(pixmap1)
For example, if the label is called label11, then picture 222 will be displayed in this area (the size of the picture displayed changes with the size of the label)
Part 3: Set the default first page of the interface
self.ui.stackedWidget.setCurrentIndex(0)
This should also be written in the MyDialg class, because there are multiple interfaces, if you don’t write this sentence, the last page will be displayed after running. Note that 0 is the index, the index of the first page is 0, the index of the second page is 1, and so on.
Part 4: Click the button to display the picture (sl1 function). In the previous step, the button has been bound to the sl1 function, and label32 is the display position of the picture, and the operation will be executed when the button is clicked.
def sl1(self):
pixmap = QtGui.QPixmap('222.png')
self.ui.label32.setPixmap(pixmap)
How to write multiple words
def sl1(self):
sender = self. sender()
if sender == self.ui.pushButton11:
# Add the following code to display picture 22.png
pixmap = QtGui.QPixmap('22.png')
self.ui.label21.setPixmap(pixmap)
elif sender == self.ui.pushButton12:
# Add the following code to display picture 22.png
pixmap = QtGui.QPixmap('22.png')
self.ui.label32.setPixmap(pixmap)
elif sender == self.ui.pushButton31:
# Add the following code to display image 222.png
pixmap = QtGui.QPixmap('222.png')
self.ui.label31.setPixmap(pixmap)
Part 5: Click the button to jump to the interface
Means, if it is Button11, click to jump to the second page (index is 1)
If it is Button12, click to jump to the third page (index is 2)
def change(self):
sender = self. sender()
if sender == self.ui.pushButton11:
self.ui.stackedWidget.setCurrentIndex(1)
elif sender == self.ui.pushButton12:
self.ui.stackedWidget.setCurrentIndex(2)
elif sender == self.ui.pushButton31:
self.ui.stackedWidget.setCurrentIndex(0)
all codes
class MyDialog(QtWidgets. QDialog):
def __init__(self, parent=None):
super().__init__(parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
# 1. Connect the clicked signal of QPushButton to the slot function change and sl1 function in the constructor
self.ui.pushButton11.clicked.connect(self.change)
self.ui.pushButton12.clicked.connect(self.change)
self.ui.pushButton31.clicked.connect(self.change)
self.ui.pushButton31.clicked.connect(self.sl1)
#2. Load images
pixmap1 = QtGui.QPixmap('a.png')
pixmap2 = QtGui.QPixmap('b.png')
pixmap3 = QtGui.QPixmap('222.png')
pixmap4 = QtGui.QPixmap('22.png')
self.ui.label11.setPixmap(pixmap1)
self.ui.label21.setPixmap(pixmap2)
self.ui.label31.setPixmap(pixmap3)
self.ui.label32.setPixmap(pixmap4)
# 3. Set the default display page to the first page
self.ui.stackedWidget.setCurrentIndex(0)
# 4. Click the button to switch to another interface and print "hello" in the console
def sl1(self):
pixmap = QtGui.QPixmap('222.png')
self.ui.label.setPixmap(pixmap)
print("hello")
# 5. Slot function for switching interface
def change(self):
sender = self. sender()
if sender == self.ui.pushButton11:
self.ui.stackedWidget.setCurrentIndex(1)
elif sender == self.ui.pushButton12:
self.ui.stackedWidget.setCurrentIndex(2)
elif sender == self.ui.pushButton31:
self.ui.stackedWidget.setCurrentIndex(0)