PyQt5
PyQt5
Graphical User Interface (GUI) Development with PyQt5
We have two options for designing Graphical User Interface with PyQt5.
Performing GUI design by writing Code
Designing and converting design to Python codes with Qt Designer
1-Developing an Interface by Writing Code
One of the most important features of Qt is its signal-slot structure.
When we press a button in the interface, a clicked signal is broadcast and we need to specify the actions to be performed when this button is pressed (selecting a file, opening a camera, deleting text, anything you can think of) in the slot where we wrote it.
Slot is a function here.
All we have to do is define the signal and the slot connection with the "connect" function.
The interface we will develop is shown in the screenshot below.
This interface consists of a label (QLabel) and two buttons (QPushButton). The label says "Hello PyQt5". With the Clear button, the text on the label is deleted. With the Show button, "Again Hello PyQt5" is written on the label again.
The code we will write to achieve this interface is given below.
Now let's explain these codes step by step.
Line 1 is the comment line. Here, you can add the interface components one by one as specified in the comment line, or all the components belonging to the QtWidgets class are added as specified in line 2. In line 3, methods belonging to the QtCore class are added.
In line 5, we define the class named "firstGUI" that we produced from the QWidget class. Here we could create a class of type QDialog or QMainWindow instead of QWidget. Every class has a __init__() function, which is run first when the class is called. The self statement is used to indicate that a variable defined in a class is a function, variable, so that the functions can be called from outside the class.
Line 7 calls the superclass's __init__() function.
In line 9, the QLabel widget is created with the text "Hello PyQt5". The object name is defined as "label_text" and this snippet is defined with the self statement since we will need to access this label outside of the class (slot definitions). The alignment of the text written in the label on line 10 is centered. This alignment is provided by the setAlignment function. In line 11, we set the color, font size and font thickness of the text written on the label using the setStyleSheet function using CSS definitions.
In line 13, we define the QPushButton (button, button, key) widget that says "Clear". We define the minimum height of this button as 40 pixels in line 14 using the setMinimumHeight function. In line 15, we make changes in the font properties of the text on the button by using the setStyleSheet function, as we did for the label before. We define the name of this button as "pushButton_clear". I am naming words by combining the words that indicate which particle it is (pushButton) and what it will do.Thus, it is easy to understand what type of button is in the code and what it does, and it increases the understandability of the code.
Here, unlike the label, we couldn't assign the button we created to self because we won't need it outside of the class, if we need it, we should define it as self. Lines 16, 17 and 18 allow us to create the "Show" button, which is the second button of the previous lines, and to perform the same operations on it.
Lines 20 and 21 are the lines where we connect signals and functions (slots) to each other using the connect method. We have linked the clicked signal of the "Clear" button with the "clear_text" function, and the "clear_text" function will be called when the "Clear" button is clicked. We also connected the clicked signal of the "show" button to the "show_text" function.
We define a vertical layout ( QVBoxLayout ) on line 23 and add the labels and buttons that we created, respectively, into this vertical layout using the addWidget function on lines 24, 25, 26. You can use Horizontal layout ( QHBoxLayout ) or grid layout ( QGridLayout ) according to your design.
We define the vertical layout we created in line 28 with the setLayout function to ensure that our class (the interface we will create) is the layout. In line 29, we ensure that the name of the window where the interface will be displayed is "PyQt5 first GUI" by using the setWindowTitle function. In line 30, we adjust the dimensions of the window to be opened by using the resize function so that its height is 300 pixels and its width is 400 pixels. With this line, the "first_GUI" class definition is finished.
In line 32, we define the "clear_text()" slot (function) that connects to the click signal of the "Clear" button. It takes self as a variable. As an operation, the text written in the label is cleared with the clear() function of the QLabel class.
Lines 34 and 35 define the "show_text()" slot of the "Show" button. When this button is clicked with the setText() function used to write text on a tag, "Again Hello PyQt5" will be written. In order to observe the work of this button, the text on the label must be deleted first.
After the class and slot definitions, we define an object named "app" from the QApplication class on line 38. In line 39, we define an object named "widget" from the class we defined as "first_GUI". Using the show() function of this object, we show the window we created for the interface (line 40). An infinite loop is created with the exec_() function of the QApplication class on line 41. With this statement, all the actions that the user has made with the mouse and keyboard using the interface are captured and the commands are executed. The loop continues until the window is closed.
2-Designing and converting design to Python codes with Qt Designer
Converting Qt Designer Design to Python Codes
Full PyQt5 project tutorial-1(Library Management Project)
Full PyQt5 project tutorial (Stock Management Project)
Last updated
