How to Build User Interfaces with Python — PyQt QtDesigner

A graphical editor to build UI

This story follows the “Build User Interfaces with Python” series. You can find the other stories here:

It also requires knowing PyQt’s fundamentals. Check this story for a tutorial about PyQt’s basics.

Final little note: there is a GitHub repo associated with this story. You can find it here: PyQt-Series. It can be useful if you want to get more detail about the story’s code or to tweak it a bit.

Building user interfaces has never been easier. Using a tool called “QtDesigner”, you can build in minutes complex User Interfaces without coding.

How it Works

You just drag and drop widgets on your screen to build your User Interface. You can modify the properties of your widgets if you want, you can also build complex layouts, you can build your own widgets, etc…

Once your User Interface looks how you want it to look, you can save it as a .ui file. It’s the format that Qt understands.

Then, can use this file to build your User Interface in the programming language of your choice. Indeed, what PyQt does is simply convert this file into code to represent your UI. But if you want, for example, you can use a C++ tool to convert your file into a C++ UI.

Finally, you just have to do minor modifications in your code to modify the UI as you want and to make it dynamic.

Getting Started

First, you have to install QtDesigner. You can do it easily with pip:

pip install PyQt5Designer

Then you can find the QtDesigner executable in your Python environment. The path is Scripts\designer.exe . If you have not installed it in a virtual environment, the full path should be something as “C:\Users\user\AppData\Local\Programs\Python\Python39\Scripts\designer.exe” on Windows.

Once you’ve executed designer.exe , you can create a new UI in “File > New”. You can choose the type of your UI. We’ll begin with a Main Window .

The QtDesigner’s UI is very simple to understand. By default, you have the toolbar on the top used to switch between editing modes or layouts for widgets, then the widget box on the left allows you to drag and drop widgets, on the right you have the tree structure of your UI and the property editor, finally, at the center, you have your UI.

Your first UI with QtDesigner

Let’s try to build the following UI:

First, we can see it is organized in a Form Layout because elements are grouped by two. So, you can drag and drop your first widget (a Label) in your UI. Then you can right-click anywhere on your UI and change the layout of the window to a Form Layout .

Double-clicking on your label allows you to change its text. If you want you can also rename it in the tree structure on the right by double-clicking it (for big projects it’s useful to rename widgets).

Now, you can drag and drop a Line Edit next to the label. It’s a widget allowing you to enter text in a single line.

Below your first label, you can add a second one and change its text. Then you can add another Line Edit next to it.

Finally, you can add a Horizontal Spacer below the second label. It’s a widget filling space horizontally. It’s the perfect widget to use here because we don’t want anything below our second label. Then you can add a Push Button next to the spacer. Your UI should look like this:

It’s nice, but it’s not exactly what we want because we don’t want the button to take up the same space as the line edits. So you can remove the button and instead we’ll place a Horizontal Layout . Now in the layout, you can place a spacer and a button. It should look fine now.

Finally, we can resize the window because our login form is small and doesn’t take up all the space in the window. You can do it using the bottom-right corner of the window.

Now you can save your UI anywhere you want. It will generate a .ui file.

Use your UI in Python

First, you have to convert your .ui file into a .py file. To do it, open your terminal and run the following command:

pyuic5 -o destination src

For example, if I run it from my project, the paths can be:

pyuic5 -o ./ui/main_window_ui.py ./ui/main_window.ui

Now you have your .py file. You can open it and see the code inside if you want.

To use your UI, you have to bind it to another class representing your window.

The minimal code for your new class is the following:

from PyQt5.QtWidgets import QMainWindow
from ui.main_window_ui import Ui_LoginForm


class MainWindow(QMainWindow, Ui_LoginForm):

        def __init__(self, parent=None):
            super().__init__(parent)
            self.setupUi(self)

It just creates a QMainWindow and then set up your widgets using the method setupUi . This window can be as complex as you want. For example, here is a code excerpt from a complex UI I made:

class MainWindow(QMainWindow, Ui_DreamsAnalyzer):

    EXIT_CODE_REBOOT = 100

    def __init__(self, controller, parent=None):
        super().__init__(parent)
        self.setupUi(self)

        self.controller = controller
        self.tabs = [HomeTab(self), TagsTab(self), DreamsTab(self), ProgressTab(self), StatisticsTab(self),
                     AnonymsTab(self), GlobalConfigTab(self), ForumTab(self), CustomChartsTab(self), MetaconfigTab(self)]

    def postInit(self):
        if self.controller.get_templates():
            self.updateTemplates()
        if self.controller.model.data:
            self.updateData()
        if self.controller.get_anonyms():
            self.updateAnonyms()
        if self.controller.get_charts():
            self.updateCharts()
        if self.controller.get_metas():
            self.updateMetas()

You can access the widgets of your window from this class. For example, if you want to modify the button, you access it using self.pushButton (if you have not modified its name, else you access it using the modified name).

The last thing to set up is the PyQt app that will run the main window. If you read this story, you’re supposed to know PyQt’s basics so I won’t go into detail about how to build a basic app, I will just give you the code:

import sys

from PyQt5.QtWidgets import QApplication

from main_window import MainWindow


class App:

    def __init__(self):
        qapp = QApplication(sys.argv)

        window = MainWindow()

        window.show()
        sys.exit(qapp.exec())


if __name__ == '__main__':
    app = App()

Now, you can run your app and your window will show! You should get something like this:

Final Note

Don’t forget to check the other stories of this series if you have not seen them, you can find them all here.

Also, be sure to follow me so that you don’t miss the next stories of this series.

You can find the other stories of this series here:

To explore more of my Python stories, click here!

If you liked the story, don’t forget to clap and maybe follow me if you want to explore more of my content :)

You can also subscribe to me via email to be notified every time I publish a new story, just click here!

If you’re not subscribed to medium yet and wish to support me or get access to all my stories, you can use my link: