How to Work with QT Designer in PyQt5

PyQt5 Tutorials

About Lesson

In this PyQt5 lesson we are going to learn How to Work with QT Designer in PyQt5, so when you are creating your application, it is not a good idea to write all your design by codes, it will be good to have a designer for designing of our application, and we separate our designer from our main logic, fortunately in pyqt5 we have Qt Designer for this purpose. Qt Designer has drag and drop facilities that you can easily drag and drop UI Components or widgets in your application.

What is Qt Designer ?

Qt Designer is the Qt tool for designing and building graphical user interfaces (GUIs) with Qt Widgets. You can compose and customize your windows or dialogs in a what-you-see-is-what-you-get (WYSIWYG) manner, and test them using different styles and resolutions.

Widgets and forms created with Qt Designer integrate seamlessly with programmed code, using Qt’s signals and slots mechanism, so that you can easily assign behavior to graphical elements. All properties set in Qt Designer can be changed dynamically within the code. Furthermore, features like widget promotion and custom plugins allow you to use your own components with Qt Designer.

first of all you need to install Qt Designer, because by default we don’t have Qt Designer, you need to install pyqt5 tools and you can easily use pip for the installation.

pip install pyqt5-tools

1	pip install pyqt5-tools

After installation you need to open your terminal and write pyqt5designer or you can writer pyqt5designer.exe. and this is our Qt Designer interface in PyQt5.

So now we are going to just add a QPushButton in our design like this.

After creating of your design. You need to save your design, and you will see that it is a .ui file it means user interface.

Now it is time to interact with this file in our PyQt5, there are two ways that you can do the first way is that you can directly load the ui file in your pyqt5 codes, the second way is that you convert your .ui file in to .py file using pyuic5 module.

Loading .ui file

In this way you need to just copy your UI file from Qt Designer and add that in your working directory. after that create a new python file, I want to call LoadUI.py and add this code.

from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5 import uic
import sys


class UI(QWidget):
    def __init__(self):
        super().__init__()

        #this is used for loading ui file
        uic.loadUi("mybutton.ui", self)




app = QApplication([])
window = UI()
window.show()
app.exec_()

from PyQt5.QtWidgets import QApplication, QWidget

from PyQt5 import uic

import sys

class UI(QWidget):

def __init__(self):

super().__init__()

#this is used for loading ui file

uic.loadUi("mybutton.ui", self)

app = QApplication([])

window = UI()

window.show()

app.exec_()

Basically in the above code we can use uic module for loading the ui file.

If you run your code, this will be the result.

To find an object, we can use findChild on anyone of it’s parent objects while supplying the type of widget we are getting and the name. make sure that you have given name for your widgets. for example in here we want to find our QPushButton. so you can use this code.

button = self.findChild(QPushButton, 'pushButton')

1	button = self.findChild(QPushButton, 'pushButton')

This is the code first we have found our QPushButton and after that we have connected the clicked signal of the button with the method that we have created.

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton
from PyQt5 import uic
import sys


class UI(QWidget):
    def __init__(self):
        super().__init__()

        #this is used for loading ui file
        uic.loadUi("mybutton.ui", self)

        # find our widgets
        button = self.findChild(QPushButton, 'pushButton')
        button.clicked.connect(self.clicked_btn)

    def clicked_btn(self):
        print("Button Clicked")


app = QApplication([])
window = UI()
window.show()
app.exec_()

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton

from PyQt5 import uic

import sys

class UI(QWidget):

def __init__(self):

super().__init__()

#this is used for loading ui file

uic.loadUi("mybutton.ui", self)

# find our widgets

button = self.findChild(QPushButton, 'pushButton')

button.clicked.connect(self.clicked_btn)

def clicked_btn(self):

print("Button Clicked")

app = QApplication([])

window = UI()

window.show()

app.exec_()

Convert UI File to Python File

In this way we are using pyuic5 module, it is located in the script folder of your python installation, you need to just copy your .ui file in your scripts folder and after that run this command. this will convert your ui file in to python file.

pyuic5 mybutton.ui -o buttonexample.py -x

1	pyuic5 mybutton.ui -o buttonexample.py -x

And this is the converted code.

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

# Form implementation generated from reading ui file 'mybutton.ui'
#
# Created by: PyQt5 UI code generator 5.15.1
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(448, 321)
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(170, 170, 75, 23))
        self.pushButton.setIconSize(QtCore.QSize(48, 48))
        self.pushButton.setObjectName("pushButton")
        self.pushButton.clicked.connect(self.clicked_btn)

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

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "PyQt5 Window"))
        self.pushButton.setText(_translate("Form", "Click ME"))


    def clicked_btn(self):
        print("Button Was Clicked")


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

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

# Form implementation generated from reading ui file 'mybutton.ui'

# Created by: PyQt5 UI code generator 5.15.1

# WARNING: Any manual changes made to this file will be lost when pyuic5 is

# run again. Do not edit this file unless you know what you are doing.

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):

def setupUi(self, Form):

Form.setObjectName("Form")

Form.resize(448, 321)

self.pushButton = QtWidgets.QPushButton(Form)

self.pushButton.setGeometry(QtCore.QRect(170, 170, 75, 23))

self.pushButton.setIconSize(QtCore.QSize(48, 48))

self.pushButton.setObjectName("pushButton")

self.pushButton.clicked.connect(self.clicked_btn)

self.retranslateUi(Form)

QtCore.QMetaObject.connectSlotsByName(Form)

def retranslateUi(self, Form):

_translate = QtCore.QCoreApplication.translate

Form.setWindowTitle(_translate("Form", "PyQt5 Window"))

self.pushButton.setText(_translate("Form", "Click ME"))

def clicked_btn(self):

print("Button Was Clicked")

if __name__ == "__main__":

import sys

app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()

ui = Ui_Form()

ui.setupUi(Form)

Form.show()

sys.exit(app.exec_())