Design Simple Dialog Using PyQt5 Designer Tool
How to Set Up the PyQt5 Designer and Integrate the UI
With PyQt5, you need to have a good understanding of basic Python, but I'll try to make this as easy as possible.
In this article, I'll walk you through using the Qt Designer to create a simple dialog, convert the designed UI to Python, and execute the code.
Tools, Technologies and Libraries:
Operating System: Windows 10
Editor: Visual Studio Code
If you haven't already installed Python 3.6 on your OS, follow this link to download the Python Installer.
Pip (a package management system used to install and manage libraries and packages written in python) should be installed as part of Python.
If you're unable to find the pip installation, follow the instructions here.
Once you have both Python and pip installed, use the following commands to install the PyQt5 Designer, tools, and packages.
pip install pyqt5-installer pip install pyqt5 pip install pyqt5-tools
You'll find different libraries with PyQt5 folders installed at this default location:
C:\Program Files (x86)\Python36-32\Lib\site-packages (on Windows OS).
How to Start the PyQt5 Designer tool
C:\Program Files (x86)\Python36-32\Lib\site-packages\pyqt5-tools and locate
designer.exe. Double click to open the Qt Designer.
Note: The path will vary based on the OS you're using.
The Qt Designer will provide some basic templates. Select the template "Dialog with Buttons Right" as shown in the screenshot below.
PyQt5 Template Selection
You can change the dialog properties using the Property Editor. I simply changed the window title.
Now, save the designed dialog as
Converting dialog.ui to dialog.py
Use the command below on the command prompt.
pyuic5 dialog.ui > dialog.py
The above command will convert the
dialog.ui file to
Next, we'll make some minor changes and execute the Python code. I changed the class name generated by the command to keep the name meaningful.
This is the final code for the Dialog class generated from the dialog.ui.
# -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'dialog.ui' # # Created by: PyQt5 UI code generator 5.8.2 # # WARNING! All changes made in this file will be lost! import sys from PyQt5 import QtCore, QtGui, QtWidgets class MyDialog(object): def setupUi(self, Dialog): Dialog.setObjectName("Dialog") Dialog.resize(400, 300) self.buttonBox = QtWidgets.QDialogButtonBox(Dialog) self.buttonBox.setGeometry(QtCore.QRect(290, 20, 81, 241)) self.buttonBox.setOrientation(QtCore.Qt.Vertical) self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Cancel|QtWidgets.QDialogButtonBox.Ok) self.buttonBox.setObjectName("buttonBox") self.retranslateUi(Dialog) self.buttonBox.accepted.connect(Dialog.accept) self.buttonBox.rejected.connect(Dialog.reject) QtCore.QMetaObject.connectSlotsByName(Dialog) def retranslateUi(self, Dialog): _translate = QtCore.QCoreApplication.translate Dialog.setWindowTitle(_translate("Dialog", "MyFirstPyQtProgramm With Designer Tool")) Dialog.show()
import sys from PyQt5.QtWidgets import QDialog, QApplication from dialog import MyDialog class AppWindow(QDialog): def __init__(self): super().__init__() self.ui = MyDialog() self.ui.setupUi(self) self.show() app = QApplication(sys.argv) w = AppWindow() w.show() sys.exit(app.exec_())
Now, execute the
app.py and... that's it. You're done!
The Dialog will look like this.
I hope this was helpful for beginners to Python and PyQt! Please let me know if you run into any issues converting the designed UI from the PyQt5 Designer.
This post is originally published by the author here. This version has been edited for clarity and may appear different from the original post.