Skip to content

[PyQt5] Tutorial(2) QLabel, QLineEdit, QPushButton

Last Updated on 2021-04-12 by Clay

Today, I want to note my experience of QLabel, QLineEdit, QPushButton in PyQt5. By the way, I design my own graphic user interface by Qt Designer.

Maybe one day I will change my way, use the code to create interface instead (After all, the components in Qt Designer are actually not complete, of course, maybe I just didn't find it.), but I hope to learn at least until that day.

As always, if you want to refer to the official guide, maybe you can refer to:

https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

QLabel

QLabel is the most commonly used components. The last time, I also used this component to print "Hello World".

This time we go one step further and use the code to set the properties of size, position, text ...... and so on.

from PyQt5 import QtWidgets, QtGui, QtCore
from UI.Label import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setFont(QtGui.QFont('Arial', 50))
        self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200))
        self.ui.label.setText('Hello World!')


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

This line is used to set the font and size.

self.ui.label.setFont(QtGui.QFont('Arial', 50))


The meaning of this line is: QRect(x, y, width length, height length). Remember, the (x, y) coordinate origin is in the upper left corner!

self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200))


This line is obvious, This is the text we want to print:

self.ui.label.setText('Hello World!')


QLineEdit

In here, QLineEdit is a "field for user to enter text". The most common one must be the kind of field for entering the account password on the website. Let's show it.

That's right! It is the field that displays "Welcome!" in the middle, which is the appearance of the component QLineEdit.

We can call the program to make various adjustments to its properties, such as masking the display text (can be used to enter the password), limiting the upper limit of the text that user can input, inputting the preset text preset, and finishing the color of the text....., we can do it as we please.

You may wish to try what other feature are available, and there must be some gains.

Next, we will introduce the last component, and we will complete a simple sample program by the way.

QPushButton

QPushButton seems like "button" we have been most common. As shown in the previous figure:

The button that display "Display" is our QPushButton, and here is a record of how I did this.

I just use Designer to create these three components!

From left to right are: QLabel, QLineEdit, QPushButton these three components.

Let's take a look at the generated file which has been redirected by PyUIC.

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'LineEdit.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(150, 100, 191, 51))
        self.lineEdit.setObjectName("lineEdit")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(0, 100, 131, 51))
        self.label.setObjectName("label")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(390, 100, 131, 51))
        self.pushButton.setObjectName("pushButton")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "TextLabel"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))


If we look closely at the resulting file, we will find that QLabel, QLineEdit, QPushButton have been defined.

At this point, the simple interface has been completed, and the rest is the part of our programming logic:

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from LineEdit import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setFont(QtGui.QFont('Arial', 10))
        self.ui.label.setText('Nothing')
        self.ui.lineEdit.setText('Welcome!')

        self.ui.pushButton.setText('Display')
        self.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        text = self.ui.lineEdit.text()
        self.ui.label.setText(text)
        self.ui.lineEdit.clear()


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


We can see that I have set the QLabel, QLineEdit, and the QPushButton in advance to display the text.

Then most importantly, I wrote an event that the button pressed, using clicked.connect('the function you want to call') to complete the command.

In the buttonClicked() function, I store the text we entered in QLineEdit and let QLabel print it.

Then I deleted tje display text of QLineEdit.

The results as follows:

When we starting.
And I enter the text.
Pressed the button.

How is it? is it going according to the process we set?

Then, Today's notes are recorded. Thanks!

Read More

Tags:

Leave a Reply