Making of simple addition calculator based on pyqt5 and QT Designer

Preface

Write in front of the article , I wrote this article to record my learning process , Give the latecomers a reference and train of thought , This is not a particularly complicated thing, mainly because I saw it in two days b Two articles of the station PyQt5 course
PyQt5 course , From Netease cloud classroom （ I saw it 24 course ） and Python Of Gui Programming -PyQt5 From entry to project practice （ See the second 23 course ）
For me, the first article tends to ui Design , The second is better than the first , It's very detailed , I'm glad I saw the second one because the first half of the first one started with a lot of ink Qt Designer There is no connection between program and control , But after reading the second article, I also lamented that I had read the first article before and knew it very early Qt Designer. It saves me a lot of time without my hands UI Interface . See the second 23 In class, I began to give myself a task , Is to design a small calculator , Only adding, but I practice my hand instead of pursuing practicality , I still have a sense of achievement when I have used all my knowledge points .

Of an addition calculator Qt Designer part

Calculator UI Design

Get into Qt Designer after

choice Main Window Click Create

It may be very big at first, but you can click on the lower right corner to adjust it

find Display widgets Tab and select LCD Number Drag to MainWindow

find Buttons Choose Push Button Drag to Main Window

Ctrl＋a Choose all the spaces in Right click in the blank Be sure to put it in the blank , Do not on the control , Otherwise you won't adapt to the screen , It's a tragedy when you zoom in and out later

Click these two points to make a full screen , At this point, you can try to pull the lower right corner to see if it changes with you , however lcd number The display is too large , We click lcd number

In the Attribute Editor on the right QWidget The maximum width of its maximum size is found in the tab , Its value is very large. Let's set a 100 Then make corresponding changes through the scroll wheel corresponding to the actual figure on the right , Make your calculator look more comfortable

Adjusted lcd number Then we double-click the button to change the content of the button
Here we are ui The interface design is basically completed , The next step is to insert the signal and slot

Insert signal and slot

Click on Edit Then click Edit signal / The slot can be used for signal and slot editing

We click on a button control , Then pull down. （ Be careful not to touch other controls ）

Then a box will appear, and we will select on the left clicked(), Select edit on the right

After entering the edit, click... In the slot ＋, Add a custom slot function

Click OK after adding three slot functions we need in the future

After confirmation, there are no more slot functions in our slot than before , We'll take the one on the left clicked() Pair with the one on the right （ Number button pairing clickNum(),＋ Button No. corresponds to clickAdd(),= The button corresponds to clickNum()）

This is what it looks like to bury a slot , It's a mess, isn't it ？

Actually, there's a signal in the lower right corner / Slot editor , Here you can clearly see if you have made a mistake

Click the save icon above to save as .ui file

coordination vscode The subsequent background program design

First of all, we have to vscode Install the plug-in

Open the folder and right-click to select PYQT:Complie from

It will generate a Ui_AddCalculator.py The file of , We don't have to worry about it , Let's create a new file called StartAddCalculator.py Write program , I have comments on every line

from  Ui_AddCalculator import Ui_MainWindow # Import Qt Designer The generated class 
import sys                                  # Import standard library sys library 
from PyQt5.QtWidgets import QApplication,QMainWindow    # Import pyQt5 What the package needs 


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()  # Inherit from all parent classes __init__()
        self.setupUi(self)  # Default run Ui_AddCalculator.py Inside setupUi function 
        self.Num = 0        # Set the current number to 0
        self.Add = []       # Set a list to store the numbers of previous periods 

    def clickNum(self):
        # self.Num = self.lcdNumber.value() # Place the displayed number in Num in 
        btn = int(self.sender().text())     # Get the name of the sender 
        self.Num = self.Num*10+btn          # Insert the newly entered number into Num At the back of 
        self.lcdNumber.display(self.Num)    # Display the number on the top 

    def clickAdd(self):
        # self.Num = self.lcdNumber.value() # Place the displayed number in Num in 
        self.Add.append(self.Num)           # Cache the numbers in the list 
        self.Num = 0                        # Empty Num Ready to accept the next number 
        self.lcdNumber.display(0)           # Show 0

    def clickEqu(self):
        # self.Num = self.lcdNumber.value() # Place the displayed number in Num in 
        self.Add.append(self.Num)           # Cache the numbers in the list 
        self.lcdNumber.display(sum(self.Add))# The list is summed and displayed 
        self.Num = 0                        # Empty Num cache 
        self.Add = []                       # Clear digital cache 


if __name__ == "__main__":                  # When running this file, run the following 
    app = QApplication(sys.argv)            # establish QApplication Object and put it into the system to pass in parameters 
    Window = MainWindow()                   # establish MainWindow object 
    Window.show()                           # Exhibition MainWindo Object content 
    sys.exit(app.exec_())                   # Get into app.exec_ Event cycle when the system exits the cycle, the whole system exits 

A small calculator will complete , Of course, it is easy to complete other functions