This page has 0 threads | Add post

Blogs

Finding our blogs useful? Please consider helping us to share more!

Should you be using QT for Python as a GUI? Part four of an eight-part series of blogs
If you need to build a GUI system in Python, PyQt5 is probably the best choice, but don't take our word for it - read this blog and see what you think. Should you be using PyQt? QT Designer Widgets Layouts (this blog) Forms and code Slots and Signals CSS and Formatting Models and Data

Should you be using QT for Python as a GUI?

Part four of an eight-part series of blogs

If you need to build a GUI system in Python, PyQt5 is probably the best choice, but don't take our word for it - read this blog and see what you think.

Posted by Andy Brown on 21 June 2022

In this blog

Example of Vertical and Horizontal Layouts
Examples of grid and form layouts
Horizontal and vertical spacers

Layouts

Layouts allow you to build forms with responsive designs, so you don't have to position widgets exactly where you want them to appear on screen:

The 4 layouts available in QT.

Example of Vertical and Horizontal Layouts

In the following example, I want my buttons to appear evenly spaced in a column:

The vertical layout (represented by the red rectangle) contains 3 buttons, the bottom one of which is shown selected.

Here are the size properties of each of the 3 buttons in the layout:

Each button will be at least 30 pixels high and 30 pixels high, but may stretch beyond this.

Here are the same buttons, but in a horizontal layout:

Horizontal layouts, as the name suggests, are for laying out controls in rows.

Understanding how widgets are spaced within a layout is the hardest thing about using QT Designer!

Examples of grid and form layouts

A grid consists of a rectangular block containing rows and columns:

This grid contains 3 rows and 2 columns.

A form layout is very similar, but a bit more restricted (you can only have two columns):

It's assumed that the first column contains labels, and the second input widgets.

Horizontal and vertical spacers

You can use these widgets to space things out within layouts:

The two spacer widgets.

For example, this button appears in the centre of its parent horizontal layout because it has a horizontal spacer on either side of it:

A centrally aligned button.

For anyone reading this, here's a tip I wish I'd known when I first started using QT Designer: you can hold down the Shift key to select the immediate parent of a widget (so for the diagram above, holding down Shift and left-clicking would select the horizontal container in which the button sits).