PyQt5 Tutorial / Creating applications with Qt Designer

admin · 發表於 2023-3-28 21:23:26

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.

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.

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.

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.

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 —

load into into a class using the .loadUI() method
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.

[color=rgba(255, 255, 255, 0.3)][size=0.7]PYTHONimport sysfrom PyQt5 import QtWidgets, uicapp = QtWidgets.QApplication(sys.argv)window = uic.loadUi("mainwindow.ui")window.show()app.exec()

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.

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.

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.

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.

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

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.

		自動登錄	找回密碼
密碼			立即註冊