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.



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.

PyQt5 Designer Interface
PyQt5 Designer Interface




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

How to Work with QT Designer in PyQt5
How to Work with QT Designer in PyQt5


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 and add this code.

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.

PyQt5 Load UI File
PyQt5 Load UI File



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.



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.


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.



And this is the converted code.