Development of Desktop applications in Python and PySide6/PyQt6 libraries. Part 2. Introduction to widgets and Qt Designer

We continue to study PySide6/PyQt6 and now we will get acquainted with widgets, layout and Qt Designer

Link to 1 lesson with installing PySide6 and creating the first application: https://habr.com/ru/articles/799037/

PySide6 includes quite a large number of built-in widgets. You can find more details in the official PySide6 documentation: https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/index.html#module-PySide6.QtWidgets . Here is some of the widgets in PySide6:

1. QLabel: Widget for displaying text or images.

2. QPushButton: A button to trigger an action when pressed.

3. QLineEdit: Text input field for user input.

4. QComboBox: Drop-down list with selection of one of the elements.

5. QCheckBox: Checkbox to enable or disable options.

6. QRadioButton: Toggle button to select one of several alternatives.

7. QSlider: Slider to select a value within a specified range.

8. QSpinBox: Field for entering integer values ​​using buttons or the keyboard.

9. QProgressBar: Progress bar to display the current status of a task.

10. QTextEdit: Multi-line text editing field.

11. QTableView: Table for displaying data in grid form.

12. QListView: List to display data in one column.

13. QTreeView: Tree view of data.

QtDesigner in PySide6

There is also a tool available in PySide6 called Qt Designer which allows you to create user interfaces using a visual editor. Qt Designer allows you to create a GUI using the drag-and-drop method to place widgets on a form and set their properties and signals without having to write code by hand.

To launch the QtDesigner utility, run the following command in your terminal:

pyside6-designer

After executing this command you will have Qt Designer

To create an interface file in Qt Designer you need to click “File>New…” in the menu.

Next, a dialog box will appear asking you to select a template for your future interface window.

Select MainWindow, thereby selecting the main window of our future application and press the “Create” button. Next, let's get acquainted with the main interface with Qt Designer

Layout of elements on the window

In PySide6, as in other frameworks for creating graphical interfaces, there are several ways to organize the arrangement of widgets on a form. Here are the most common types of markup:

1. BoxLayout(QBoxLayout): This layout manager arranges widgets in horizontal or vertical order. you can use QHBoxLayout (Horizontal Layout) for horizontal positioning or QVBoxLayout (Vertical Layout) for vertical.

2. GridLayout(QGridLayout): With this layout manager, widgets can be organized in a grid. You specify the number of rows and columns, and then add widgets to specific cells.

3. FormLayout(QFormLayout): This type of markup is useful for creating forms with labels and input fields. It automatically positions labels and corresponding input fields vertically.

Creating an interface in Qt Designer

Next, we will create an interface for our future application in Qt Designer. We will create an application for maintaining a list of tasks with a database connection to our application. Try to implement the same interface as in this lesson.

At this point our interface looks pretty basic and bland, but we can modernize it by styling our application. You can see examples of interface styling in the official PySide6 documentation https://doc.qt.io/qtforpython-6/overviews/stylesheet-examples.html . Qt provides us with the ability to style elements using QSS (analogous to CSS in web development). In Qt Designer, you can select any element and change its style sheet. I'll be changing the styles inside the app's central widget.

In QSS (Qt Style Sheets), you can access UI elements using selectors similar to CSS. Selectors in QSS are used to select the elements you want to style and apply specific styles to them.

Examples of selectors in QSS:

Using the class name: You can apply styles to elements with a specific class by specifying the class name with a prefix .. For example:

.QPushButton {
    background-color: blue;
}

Using the ID: You can apply styles to an element with a specific ID by prefixing it with #. For example:

#myLineEdit {
    border: 2px solid red;
}

Using element type: You can apply styles to a specific type of element, such as buttons (QPushButton), labels (QLabel), text fields (QLineEdit) etc. For example:

QLineEdit {
    background-color: yellow;
}

Using Pseudo-Classes and Pseudo-Elements: You can also use pseudo classes and pseudo elements to define states of elements such as :hover, :checked, :disabled and others.

Example of using a pseudo-class :hover to handle button hover:

QPushButton:hover {
    background-color: lightblue;
}

The following will present the styles implemented for our application.

#centralwidget {
	background-color: rgb(63, 129, 158);
}
QPushButton {
	background-color: rgb(255, 253, 253);
	border-radius: 5px;
	padding: 10px 10px;
	color: rgb(55, 107, 113);
}
QPushButton:hover {
	color: rgb(45, 97, 100);
	border: 1px  solid rgb(55, 107, 113);
	cursor: pointer;
}
QLineEdit {
	padding: 5px;
	border-radius:5px;
	color: rgb(55, 107, 113);
}

After completing work on creating the interface, save the file to your project directory. The saved file has the extension .ui . This file has xml markup, which contains the elements created on your interface.

Using the utilities that are installed out of the box in PySide6, we can convert this file into a Python module. There is a built-in utility called pyside6-uic. pyside6-uic is a command line utility in the PySide6 library that is used to convert interface files created in Qt Designer into corresponding Python code. This allows you to use the Qt Designer visual editor to create user interfaces (UIs) and then integrate those interfaces into your Python application using PySide6.

To call for help with the utility pyside6-uic run the following command:

pyside6-uic --help

Process of working with pyside6-uic includes the following steps:

1. Creating an Interface File in Qt Designer: You create an interface file (usually with the extension .ui) in Qt Designer, placing various widgets on it and setting their properties.

2. Compiling the interface file using pyside6-uic: You are using the utility pyside6-uic on the command line to convert the interface file into Python code.

An example of compiling an interface file into a Python module (in my case the interface file is called main.ui):

pyside6-uic main.ui -o ui_main.py

After completing the steps, you will receive a Python module that you can already use in your Python code.

In the next lesson, we will get acquainted with the topic of signals and slots, learn how to process user actions and will further dive into the world of Python and PySide6.