First steps with Qt Designer
Use Qt Designer's drag and drop interface to design your PyQt5 GUI

Creating applications with Qt Designer course

So far we have been creating apps using Python code. This works great in many cases, but as your applications get larger or interfaces more complicated, it can get a bit cumbersome to define all widgets programmatically. The good news is that Qt comes with a graphical editor — Qt Designer — which contains a drag-and-drop UI editor. Using Qt Designer you can define your UIs visually and then simply hook up the application logic later.

In this tutorial we'll cover the basics of creating UIs with Qt Designer. The principles, layouts and widgets are identical, so you can apply everything you've already learnt. You'll also need your knowledge of the Python API to hook up your application logic later.

This tutorial requires Qt Creator to be installed — you can download it free from the Qt website. Go to https://www.qt.io/download and download the Qt package. You can opt to install only Creator during the installation.

Open up Qt Creator and you will be presented with the main window. The designer is available via the tab on the left hand side. However, to activate this you first need to start creating a .ui file.

The Qt Creator interface, with the Design section shown on the left. The Qt Creator interface, with the Design section shown on the left.

To create a .ui file go to File -> New File or Project... In the window that appears select Qt under Files and Classes on the left, then select Qt Designer Form on the right. You'll notice the icon has "ui" on it, showing the type of file you're creating.

Create a new Qt .ui file. Create a new Qt .ui file.

In the next step you'll be asked what type of widget you want to create. If you are starting an application then Main Window is the right choice. However, you can also create .ui files for dialog boxes, forms and custom compound widgets.

Select the type of widget to create, for most applications this will be Main Window. Select the type of widget to create, for most applications this will be Main Window.

Next choose a filename and save folder for your file. Save your .ui file with the same name as the class you'll be creating, just to make make subsequent commands simpler.

Choose save name and folder your your file. Choose save name and folder your your file.

Finally, you can choose to add the file to your version control system if you're using one. Feel free to skip this step — it doesn't affect your UI.

Optionally add the file to your version control, e.g. Git. Optionally add the file to your version control, e.g. Git.

Laying out your Main Window

You'll be presented with your newly created main window in the UI designer. There isn't much to see to begin with, just a grey working area representing the window, together with the beginnings of a window menu bar.

The initial view of the created main window. The initial view of the created main window.

You can resize the window by clicking the window and dragging the blue handles on each corner.

The initial view of the created main window. The initial view of the created main window.

The first step in building an application is to add some widgets to your window. In our first applications we learnt that to set the central widget for a QMainWindow we need to use .setCentralWidget(). We also saw that to add multiple widgets with a layout, we need an intermediary QWidget to apply the layout to, rather than adding the layout to the window directly.

Qt Creator takes care of this for you automatically, although it's not particularly obvious about it.

To add multiple widgets to the main window with a layout, first drag your widgets onto the QMainWindow. Here we're dragging 3 labels. It doesn't matter where you drop them.

Main window with 1 labels and 1 button added. Main window with 1 labels and 1 button added.

We've created 2 widgets by dragging them onto the window, made them children of that window. We can now apply a layout.

Find the QMainWindow in the right hand panel (it should be right at the top). Underneath you see centralwidget representing the window's central widget. The icon for the central widget show the current layout applied. Initially it has a red circle-cross through it, showing that there is no layout active.

Right click on the QMainWindow object, and find 'Layout' in the resulting dropdown.

Right click on the main window, and choose layout. Right click on the main window, and choose layout.

Next you'll see a list of layouts which you can apply to the window. Select Lay Out Horizontally and the layout will be applied to the widget.

Select layout to apply to the main window. Select layout to apply to the main window.

The selected layout is applied to the the centralwidget of the QMainWindow and the widgets are added the layout, being laid out depending on the selected layout. Note that in Qt Creator you can actually drag and re-order the widgets within the layout, or select a different layout, as you like. This makes it especially nice to prototyping and trying out things.

Vertical layout applied to widgets on the main window. Vertical layout applied to widgets on the main window.

Using your generated .ui file

We've created a very simple UI. The next step is to get this into Python and use it to construct a working application.

First save your .ui file — by default it will save at the location you chosen while creating it, although you can choose another location if you like.

The .ui file is in XML format. To use our UI from Python we have two alternative methods available —

  1. load into into a class using the .loadUI() method
  2. convert it to Python using the pyuic5 tool.

These two approaches are covered below. Personally I prefer to convert the UI to a Python file to keep things similar from a programming & packaging point of view.

Loading the .ui file directly

To load .ui files we can use the uic module included with PyQt5, specifically the uic.loadUI()method. This takes the filename of a UI file and loads it creating a fully-functional PyQt5 object.

python
import sys
from PyQt5 import QtWidgets, uic

app = QtWidgets.QApplication(sys.argv)

window = uic.loadUi("mainwindow.ui")
window.show()
app.exec()

A (very) simple UI designed in Qt Creator A (very) simple UI designed in Qt Creator

As the uid.loadUI() method turns an instance object you cannot attach custom __init__() code. You can however handle this through a custom setup function

To load a UI from the __init__ block of an existing widget (e.g. a QMainWindow) you can use uic.loadUI(filename, self) for PyQt5.

python
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import uic


class MainWindow(QtWidgets.QMainWindow):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        uic.loadUi("mainwindow.ui", self)


app = QtWidgets.QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec_()

Converting your .ui file to Python

To generate a Python output file run pyuic5 from the command line, passing the .ui file and the target file for output, with a -o parameter. The following will generate a Python file named MainWindow.py which contains our created UI.

bash
pyuic5 mainwindow.ui -o MainWindow.py

If you're using PyQt4 the tool is named `pyuic4`, but is otherwise completely identical.

You can open the resulting MainWindow.py file in an editor to take a look, although you should not edit this file. The power of using Qt Creator is being able to edit, tweak and update your application while you develop. Any changes made to this file will be lost when you update it. However, you can override and tweak anything you like when you import and use the file in your applications.

Importing the resulting Python file works as for any other. You can import your class as follows. The pyuic5 tool appends Ui_ to the name of the object defined in Qt Creator, and it is this object you want to import.

python
from MainWindow import Ui_MainWindow

To create the main window in your application, create a class as normal but subclassing from both QMainWindow and your imported Ui_MainWindow class. Finally, call self.setupUi(self) from within the __init__ to trigger the setup of the interface.

python
import sys
from PyQt5 import QtWidgets, uic

from MainWindow import Ui_MainWindow


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, *args, obj=None, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setupUi(self)


app = QtWidgets.QApplication(sys.argv)

window = MainWindow()
window.show()
app.exec()

This produces exactly the same result as before.

A (very) simple UI designed in Qt Creator A (very) simple UI designed in Qt Creator

That's it. Your window is now fully set up. Since the use of a .ui file abstracts out the UI-specific code, you can use this same pattern to load any interface you design.

Create GUI Applications with Python & Qt5
The easy way to create desktop applications

The complete guide to building GUI applications with PyQt5. From the basics of creating a desktop window to the key features you need to build real apps.

Downloadable ebook (PDF, ePub) & Complete Source code

To support developers in [[ countryRegion ]] I give a [[ localizedDiscount[couponCode] ]]% discount with the code [[ couponCode ]] — Enjoy!

For [[ activeDiscount.description ]] I'm giving a [[ activeDiscount.discount ]]% discount with the code [[ couponCode ]] — Enjoy!

Adding application logic

You can interact with widgets created through Qt Creator just as you would those created with code. To make things simpler uic adds all child widgets to the window object by their id name as specified in Qt Creator. We'll cover how to work with these in the next part.

Complete Mark As Complete Next

Continue reading

Drag & drop widgets with PyQt  PyQt

This week I had an interesting question from a reader of my PyQt6 book, about how to handle dragging and dropping of widgets in a container showing the dragged widget as it is moved. I'm interested in managing movement of a QWidget with mouse in a container. I've implemented the application with drag & drop, exchanging the position of buttons, but I want to show the motion of QPushButton, like what you see in Qt Designer. Dragging a widget should show the widget itself, not just the mouse pointer. First, we'll implement the simple case which drags widgets without showing anything extra. Then we can extend it to answer the question. Drag & drop widgets We'll start with this simple application which creates a window using QWidget and places a series of QPushButton widgets into it. You can substitute QPushButton for any other widget you like, e.g. QLabel python from PyQt5.QtWidgets import QApplication, QHBoxLayout, QWidget, QPushButton class Window(QWidget): def __init__(self): super().__init__() self.blayout = QHBoxLayout() for l in ['A', 'B', 'C', 'D']: btn = QPushButton(l) self.blayout.addWidget(btn) self.setLayout(self.blayout) app = QApplication([]) w = Window() w.show() app.exec_() If you run this you should see something like this. The series of QPushButton widgets in a horizontal layout. Here we're creating a window, but the Window widget is subclassed from QWidget, meaning you can add this widget to any other layout. See later for an example of a generic object sorting widget. QPushButton objects aren't usually draggable, so to handle the mouse movements and initiate a drag we need to implement a subclass. We can add the following to the top of the file. python from PyQt5.QtCore import Qt, QMimeData from PyQt5.QtGui import QDrag class DragButton(QPushButton): def mouseMoveEvent(self, e): if e.buttons() == Qt.LeftButton: drag = QDrag(self) mime = QMimeData() drag.setMimeData(mime) drag.exec_(Qt.MoveAction) We implement a mouseMoveEvent which accepts the single e parameter of the event. We check to see if the left mouse button is pressed on this event -- as it would be when dragging -- and then initiate a drag. To start a drag, we create a QDrag object, passing in self to give us access later to the widget that was dragged. We also must pass in mime data. This is used for including information about what is dragged, particularly for passing data between applications. However, as here, it is fine to leave this empty. Finally, we initiate a drag by calling drag.exec_(Qt.MoveAction). As with dialogs exec_() starts a new event loop, blocking the main loop until the drag is complete. The parameter Qt.MoveAction tells the drag handler what type of operation is happening, so it can show the appropriate icon tip to the user. You can update the main window code to use our new DragButton class as follows. python class Window(QWidget): def __init__(self): super().__init__() self.blayout = QHBoxLayout() for l in ['A', 'B', 'C', 'D']: btn = DragButton(l) self.blayout.addWidget(btn) self.setLayout(self.blayout) If you run the code now, you can drag the buttons, but you'll notice the drag is forbidden. Dragging of the widget starts but is forbidden. What's happening? The mouse movement is being detected by our DragButton object and the drag started, but the main window does not accept drag & drop. To fix this we need to enable drops on the window and implement dragEnterEvent to actually accept them. python class Window(QWidget): def __init__(self): super().__init__() self.setAcceptDrops(True) self.blayout = QHBoxLayout() for l in ['A', 'B', 'C', 'D']: btn = DragButton(l) self.blayout.addWidget(btn) self.setLayout(self.blayout) def dragEnterEvent(self, e): e.accept() If you run this now, you'll see the drag is now accepted and you see the move icon. This indicates that the drag has started and been accepted by the window we're dragging onto. The icon shown is determined by the action we pass when calling drag.exec_(). Dragging of the widget starts and is accepted, showing a move icon. Releasing the mouse button during a drag drop operation triggers a dropEvent on the widget you're currently hovering the mouse over (if it is configured to accept drops). In our case that's the window. To handle the move we need to implement the code to do this in our dropEvent method. The drop event contains the position the mouse was at when the button was released & the drop triggered. We can use this to determine where to move the widget to. python def dropEvent(self, e): pos = e.pos() widget = e.source() for n in range(self.blayout.count()): # Get the widget at each index in turn. w = self.blayout.itemAt(n).widget() if pos.x() < w.x(): # We didn't drag past this widget. # insert to the left of it. self.blayout.insertWidget(n-1, widget) break e.accept() To determine where to place the widget, we iterate over all the widgets in the layout, until we find one who's x position is greater than that of the mouse pointer. If so then when insert the widget directly to the left of this widget and exit the loop. The effect of this is that if you drag 1 pixel past the start of another widget, which might be a bit confusing. You adjust this the cut off to use the middle of the widget using if pos.x() < w.x() + w.size().width() // 2: -- that is x + half of the width. python def dropEvent(self, e): pos = e.pos() widget = e.source() for n in range(self.blayout.count()): # Get the widget at each index in turn. w = self.blayout.itemAt(n).widget() if pos.x() < w.x() + w.size().width() // 2: # We didn't drag past this widget. # insert to the left of it. self.blayout.insertWidget(n-1, widget) break e.accept() The complete working drag-drop code is shown below. python from PyQt5.QtWidgets import QApplication, QHBoxLayout, QWidget, QPushButton from PyQt5.QtCore import Qt, QMimeData from PyQt5.QtGui import QDrag class DragButton(QPushButton): def mouseMoveEvent(self, e): if e.buttons() == Qt.LeftButton: drag = QDrag(self) mime = QMimeData() drag.setMimeData(mime) drag.exec_(Qt.MoveAction) class Window(QWidget): def __init__(self): super().__init__() self.setAcceptDrops(True) self.blayout = QHBoxLayout() for l in ['A', 'B', 'C', 'D']: btn = DragButton(l) self.blayout.addWidget(btn) self.setLayout(self.blayout) def dragEnterEvent(self, e): e.accept() def dropEvent(self, e): pos = e.pos() widget = e.source() for n in range(self.blayout.count()): # Get the widget at each index in turn. w = self.blayout.itemAt(n).widget() if pos.x() < w.x() + w.size().width() // 2: # We didn't drag past this widget. # insert to the left of it. self.blayout.insertWidget(n-1, widget) break e.accept() app = QApplication([]) w = Window() w.show() app.exec_() Visual drag & drop So now we have our working drag & drop implementation we can move on to showing the drag visually. What we want to achieve here is showing the button being dragged next to the mouse point as it is dragged. Qt's QDrag handler natively provides a mechanism for showing dragged objects which we can use. We can update our DragButton class to pass a pixmap image to QDrag and this will be displayed under the mouse pointer as the drag occurs. To show the widget, we just need to get a QPixmap of the widget we're dragging. python from PyQt5.QtWidgets import QApplication, QHBoxLayout, QWidget, QPushButton from PyQt5.QtCore import Qt, QMimeData from PyQt5.QtGui import QDrag, QPixmap class DragButton(QPushButton): def mouseMoveEvent(self, e): if e.buttons() == Qt.LeftButton: drag = QDrag(self) mime = QMimeData() drag.setMimeData(mime) pixmap = QPixmap(self.size()) self.render(pixmap) drag.setPixmap(pixmap) drag.exec_(Qt.MoveAction) To create the pixmap we create a QPixmap object passing in the size of the widget this event is fired on with self.size(). This creates an empty pixmap which we can then pass into self.render to render -- or draw -- the current widget onto it. That's it. Then we set the resulting pixmap on the drag object. If you run the code with this modification you'll see something like the following -- Dragging of the widget showing the dragged widget. Generic drag & drop container We can take this a step further and implement a generic drag drop widget which allows us to sort arbitrary objects. In the code below we've created a new widget DragWidget which can be added to any window. You can add items -- instances of DragItem -- which you want to be sorted, as well as setting data on them. When items are re-ordered the new order is emitted as a signal orderChanged. python from PyQt5.QtWidgets import QApplication, QHBoxLayout, QWidget, QLabel, QMainWindow, QVBoxLayout from PyQt5.QtCore import Qt, QMimeData, pyqtSignal from PyQt5.QtGui import QDrag, QPixmap class DragItem(QLabel): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.setContentsMargins(25, 5, 25, 5) self.setAlignment(Qt.AlignmentFlag.AlignCenter) self.setStyleSheet("border: 1px solid black;") # Store data separately from display label, but use label for default. self.data = self.text() def set_data(self, data): self.data = data def mouseMoveEvent(self, e): if e.buttons() == Qt.LeftButton: drag = QDrag(self) mime = QMimeData() drag.setMimeData(mime) pixmap = QPixmap(self.size()) self.render(pixmap) drag.setPixmap(pixmap) drag.exec_(Qt.MoveAction) class DragWidget(QWidget): """ Generic list sorting handler. """ orderChanged = pyqtSignal(list) def __init__(self, *args, orientation=Qt.Orientation.Vertical, **kwargs): super().__init__() self.setAcceptDrops(True) # Store the orientation for drag checks later. self.orientation = orientation if self.orientation == Qt.Orientation.Vertical: self.blayout = QVBoxLayout() else: self.blayout = QHBoxLayout() self.setLayout(self.blayout) def dragEnterEvent(self, e): e.accept() def dropEvent(self, e): pos = e.pos() widget = e.source() for n in range(self.blayout.count()): # Get the widget at each index in turn. w = self.blayout.itemAt(n).widget() if self.orientation == Qt.Orientation.Vertical: # Drag drop vertically. drop_here = pos.y() < w.y() + w.size().height() // 2 else: # Drag drop horizontally. drop_here = pos.x() < w.x() + w.size().width() // 2 if drop_here: # We didn't drag past this widget. # insert to the left of it. self.blayout.insertWidget(n-1, widget) self.orderChanged.emit(self.get_item_data()) break e.accept() def add_item(self, item): self.blayout.addWidget(item) def get_item_data(self): data = [] for n in range(self.blayout.count()): # Get the widget at each index in turn. w = self.blayout.itemAt(n).widget() data.append(w.data) return data class MainWindow(QMainWindow): def __init__(self): super().__init__() self.drag = DragWidget(orientation=Qt.Orientation.Vertical) for n, l in enumerate(['A', 'B', 'C', 'D']): item = DragItem(l) item.set_data(n) # Store the data. self.drag.add_item(item) # Print out the changed order. self.drag.orderChanged.connect(print) container = QWidget() layout = QVBoxLayout() layout.addStretch(1) layout.addWidget(self.drag) layout.addStretch(1) container.setLayout(layout) self.setCentralWidget(container) app = QApplication([]) w = MainWindow() w.show() app.exec_() Generic drag-drop sorting in horizontal orientation. You'll notice that when creating the item, you can set the label by passing it in as a parameter (just like for a normal QLabel which we've subclassed from). But you can also set a data value, which is the internal value of this item -- this is what will be emitted when the order changes, or if you call get_item_data yourself. This separates the visual representation from what is actually being sorted, meaning you can use this to sort anything not just strings. In the example above we're passing in the enumerated index as the data, so dragging will output (via the print connected to orderChanged) something like: python [1, 0, 2, 3] [1, 2, 0, 3] [1, 0, 2, 3] [1, 2, 0, 3] If you remove the item.set_data(n) you'll see the labels emitted on changes. python ['B', 'A', 'C', 'D'] ['B', 'C', 'A', 'D'] We've also implemented orientation onto the DragWidget using the Qt built in flags Qt.Orientation.Vertical or Qt.Orientation.Horizontal. This setting this allows you sort items either vertically or horizontally -- the calculations are handled for both directions. Generic drag-drop sorting in vertical orientation. More