Using Qt Designer¶

Qt Designer is the Qt tool for designing and building graphical user interfaces. It allows you to design widgets, dialogs or complete main windows using on-screen forms and a simple drag-and-drop interface. It has the ability to preview your designs to ensure they work as you intended, and to allow you to prototype them with your users, before you have to write any code.

Qt Designer uses XML .ui files to store designs and does not generate any code itself. Qt includes the uic utility that generates the C++ code that creates the user interface. Qt also includes the QUiLoader class that allows an application to load a .ui file and to create the corresponding user interface dynamically.

PyQt5 does not wrap the QUiLoader class but instead includes the uic Python module. Like QUiLoader this module can load .ui files to create a user interface dynamically. Like the uic utility it can also generate the Python code that will create the user interface. PyQt5’s pyuic5 utility is a command line interface to the uic module. Both are described in detail in the following sections.

Using the Generated Code¶

The code that is generated has an identical structure to that generated by Qt’s uic and can be used in the same way.

The code is structured as a single class that is derived from the Python object type. The name of the class is the name of the toplevel object set in Designer with Ui_ prepended. (In the C++ version the class is defined in the Ui namespace.) We refer to this class as the form class.

The class contains a method called setupUi(). This takes a single argument which is the widget in which the user interface is created. The type of this argument (typically QDialog, QWidget or QMainWindow) is set in Designer. We refer to this type as the Qt base class.

In the following examples we assume that a .ui file has been created containing a dialog and the name of the QDialog object is ImageDialog. We also assume that the name of the file containing the generated Python code is ui_imagedialog.py. The generated code can then be used in a number of ways.

The first example shows the direct approach where we simply create a simple application to create the dialog:

import sys
from PyQt5.QtWidgets import QApplication, QDialog
from ui_imagedialog import Ui_ImageDialog

app = QApplication(sys.argv)
window = QDialog()
ui = Ui_ImageDialog()
ui.setupUi(window)

window.show()
sys.exit(app.exec_())

The second example shows the single inheritance approach where we sub-class QDialog and set up the user interface in the __init__() method:

from PyQt5.QtWidgets import QDialog
from ui_imagedialog import Ui_ImageDialog

class ImageDialog(QDialog):
    def __init__(self):
        super(ImageDialog, self).__init__()

        # Set up the user interface from Designer.
        self.ui = Ui_ImageDialog()
        self.ui.setupUi(self)

        # Make some local modifications.
        self.ui.colorDepthCombo.addItem("2 colors (1 bit per pixel)")

        # Connect up the buttons.
        self.ui.okButton.clicked.connect(self.accept)
        self.ui.cancelButton.clicked.connect(self.reject)

The final example shows the multiple inheritance approach:

from PyQt5.QtGui import QDialog
from ui_imagedialog import Ui_ImageDialog

class ImageDialog(QDialog, Ui_ImageDialog):
    def __init__(self):
        super(ImageDialog, self).__init__()

        # Set up the user interface from Designer.
        self.setupUi(self)

        # Make some local modifications.
        self.colorDepthCombo.addItem("2 colors (1 bit per pixel)")

        # Connect up the buttons.
        self.okButton.clicked.connect(self.accept)
        self.cancelButton.clicked.connect(self.reject)

For a full description see the Qt Designer Manual in the Qt Documentation.

The `uic` Module¶

The uic module contains the following functions and objects.

PyQt5.uic.widgetPluginPath¶: The list of the directories that are searched for widget plugins. Initially it contains the name of the directory that contains the widget plugins included with PyQt5.

PyQt5.uic.compileUi(uifile, pyfile[, execute=False[, indent=4[, from_imports=False[, resource_suffix=’_rc’[, import_from=’.’]]]]])¶

Generate a Python module that will create a user interface from a Qt Designer .ui file.

Parameters:

uifile – the file name or file-like object containing the .ui file.
pyfile – the file-like object to which the generated Python code will be written to.
execute – is optionally set if a small amount of additional code is to be generated that will display the user interface if the code is run as a standalone application.
indent – the optional number of spaces used for indentation in the generated code. If it is zero then a tab character is used instead.
from_imports – is optionally set to generate relative import statements. At the moment this only applies to the import of resource modules.
import_from – is optionally set to the package used for relative import statements. The default is '.'.

Resource_suffix:

is the suffix appended to the basename of any resource file specified in the .ui file to create the name of the Python module generated from the resource file by pyrcc5. The default is '_rc', i.e. if the .ui file specified a resource file called foo.qrc then the corresponding Python module is foo_rc.

PyQt5.uic.compileUiDir(dir[, recurse=False[, map=None[, **compileUi_args]]])¶

Create Python modules from Qt Designer .ui files in a directory or directory tree.

Parameters:

dir – the name of the directory to scan for files whose name ends with .ui. By default the generated Python module is created in the same directory ending with .py.
recurse – is optionally set if any sub-directories should be scanned.
map – an optional callable that is passed the name of the directory containing the .ui file and the name of the Python module that will be created. The callable should return a tuple of the name of the directory in which the Python module will be created and the (possibly modified) name of the module.
compileUi_args – are any additional keyword arguments that are passed to compileUi() that is called to create each Python module.

PyQt5.uic.loadUiType(uifile[, from_imports=False[, resource_suffix=’_rc’[, import_from=’.’]]])¶

Load a Qt Designer .ui file and return a tuple of the generated form class and the Qt base class. These can then be used to create any number of instances of the user interface without having to parse the .ui file more than once.

Resource_suffix:
Parameters:	uifile – the file name or file-like object containing the `.ui` file. from_imports – is optionally set to generate relative import statements. At the moment this only applies to the import of resource modules. import_from – is optionally set to the package used for relative import statements. The default is `'.'`.
	is the suffix appended to the basename of any resource file specified in the `.ui` file to create the name of the Python module generated from the resource file by `pyrcc5`. The default is `'_rc'`, i.e. if the `.ui` file specified a resource file called `foo.qrc` then the corresponding Python module is `foo_rc`.
Return type:	the form class and the Qt base class.

PyQt5.uic.loadUi(uifile[, baseinstance=None[, package=”[, resource_suffix=’_rc’]]])¶

Load a Qt Designer .ui file and returns an instance of the user interface.

Resource_suffix:
Parameters:	uifile – the file name or file-like object containing the `.ui` file. baseinstance – the optional instance of the Qt base class. If specified then the user interface is created in it. Otherwise a new instance of the base class is automatically created. package – the optional package that is the base package for any relative imports of custom widgets.
	is the suffix appended to the basename of any resource file specified in the `.ui` file to create the name of the Python module generated from the resource file by `pyrcc5`. The default is `'_rc'`, i.e. if the `.ui` file specified a resource file called `foo.qrc` then the corresponding Python module is `foo_rc`.
Return type:	the `QWidget` sub-class that implements the user interface.

pyuic5¶

The pyuic5 utility is a command line interface to the uic module. The command has the following syntax:

pyuic5 [options] .ui-file

The full set of command line options is:

-h, --help¶: A help message is written to stdout.

--version¶: The version number is written to stdout.

-i <N>, --indent <N>¶: The Python code is generated using an indentation of <N> spaces. If <N> is 0 then a tab is used. The default is 4.

-o <FILE>, --output <FILE>¶: The Python code generated is written to the file <FILE>.

-p, --preview¶: The GUI is created dynamically and displayed. No Python code is generated.

-x, --execute¶: The generated Python code includes a small amount of additional code that creates and displays the GUI when it is executes as a standalone application.

--import-from <PACKAGE>¶: New in version 5.6.

Resource modules are imported using from <PACKAGE> import ... rather than a simple import ....

--from-imports¶: This is the equivalent of specifying --import-from ..

--resource-suffix <SUFFIX>¶: The suffix <SUFFIX> is appended to the basename of any resource file specified in the .ui file to create the name of the Python module generated from the resource file by pyrcc5. The default is _rc. For example if the .ui file specified a resource file called foo.qrc then the corresponding Python module is foo_rc.

Note that code generated by pyuic5 is not guaranteed to be compatible with earlier versions of PyQt5. However, it is guaranteed to be compatible with later versions. If you have no control over the version of PyQt5 the users of your application are using then you should run pyuic5, or call compileUi(), as part of your installation process. Another alternative would be to distribute the .ui files (perhaps as part of a resource file) and have your application load them dynamically.

Writing Qt Designer Plugins¶

Qt Designer can be extended by writing plugins. Normally this is done using C++ but PyQt5 also allows you to write plugins in Python. Most of the time a plugin is used to expose a custom widget to Designer so that it appears in Designer’s widget box just like any other widget. It is possibe to change the widget’s properties and to connect its signals and slots.

It is also possible to add new functionality to Designer. See the Qt documentation for the full details. Here we will concentrate on describing how to write custom widgets in Python.

The process of integrating Python custom widgets with Designer is very similar to that used with widget written using C++. However, there are particular issues that have to be addressed.

Designer needs to have a C++ plugin that conforms to the interface defined by the QDesignerCustomWidgetInterface class. (If the plugin exposes more than one custom widget then it must conform to the interface defined by the QDesignerCustomWidgetCollectionInterface class.) In addition the plugin class must sub-class QObject as well as the interface class. PyQt5 does not allow Python classes to be sub-classed from more than one Qt class.
Designer can only connect Qt signals and slots. It has no understanding of Python signals or callables.
Designer can only edit Qt properties that represent C++ types. It has no understanding of Python attributes or Python types.

PyQt5 provides the following components and features to resolve these issues as simply as possible.

PyQt5’s QtDesigner module includes additional classes (all of which have a QPy prefix) that are already sub-classed from the necessary Qt classes. This avoids the need to sub-class from more than one Qt class in Python. For example, where a C++ custom widget plugin would sub-class from QObject and QDesignerCustomWidgetInterface, a Python custom widget plugin would instead sub-class from QPyDesignerCustomWidgetPlugin.
PyQt5 installs a C++ plugin in Designer’s plugin directory. It conforms to the interface defined by the QDesignerCustomWidgetCollectionInterface class. It searches a configurable set of directories looking for Python plugins that implement a class sub-classed from QPyDesignerCustomWidgetPlugin. Each class that is found is instantiated and the instance created is added to the custom widget collection.

The PYQTDESIGNERPATH environment variable specifies the set of directories to search for plugins. Directory names are separated by a path separator (a semi-colon on Windows and a colon on other platforms). If a directory name is empty (ie. there are consecutive path separators or a leading or trailing path separator) then a set of default directories is automatically inserted at that point. The default directories are the python subdirectory of each directory that Designer searches for its own plugins. If the environment variable is not set then only the default directories are searched. If a file’s basename does not end with plugin then it is ignored.
A Python custom widget may define new Qt signals using pyqtSignal().
A Python method may be defined as a new Qt slot by using the pyqtSlot() decorator.
A new Qt property may be defined using the pyqtProperty() function.

Note that the ability to define new Qt signals, slots and properties from Python is potentially useful to plugins conforming to any plugin interface and not just that used by Designer.

For a simple but complete and fully documented example of a custom widget that defines new Qt signals, slots and properties, and its plugin, look in the examples/designer/plugins directory of the PyQt5 source package. The widgets subdirectory contains the pydemo.py custom widget and the python subdirectory contains its pydemoplugin.py plugin.

Using Qt Designer¶

Using the Generated Code¶

The `uic` Module¶

pyuic5¶

Writing Qt Designer Plugins¶

Table Of Contents

Previous topic

Next topic

Using Qt Designer¶

Using the Generated Code¶

The uic Module¶

pyuic5¶

Writing Qt Designer Plugins¶

The `uic` Module¶