WiseOwl Training - Established 1992 Wise Owl Training

Established May 1992
30 years in business
Wise Owl Training
30 years in business
See 520 reviews for our classroom and online training
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.

  1. Should you be using PyQt?
  2. QT Designer
  3. Widgets
  4. Layouts (this blog)
  5. Forms and code
  6. Slots and Signals
  7. CSS and Formatting
  8. Models and Data

Posted by Andy Brown on 21 June 2022

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

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:

Layouts

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:

Vertical layout

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:

Size properties

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 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:

Grid layout

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):

A form layout

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:

Spacers

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:

Horizontal spacers

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).

This blog has 0 threads Add post