PyQt6: Control the layouts

created at May 15, 2021, 1:25 p.m. views: 0

During the development of our app, the layout management is important, because it determines what your final app will be looked like and how easy it is for users to use your app.

So, How to control the layout of our app during development of PyQt6? Let's have a look.

Layout Types

From the left hand of the Qt Designer window, we know there are four types of basic layout we could use, they are:

  1. Vertical Layout
  2. Horizontal Layout
  3. Grid Layout
  4. Form Layout

Also, we have two extra two sub types:

  1. Layout Vertically in Splitter
  2. Layout Horizontally in Splitter

These two sub types align elements just like the basic layouts do, but have more parameters that can be adjusted.

Set layouts

To set layouts for elements in our window, we should first choose elements by pressing on left mouse button to draw rectangular , or pressing on Ctrl and click elements one by one, then right click and choose layouts under the Layouts option.

Vertical Layouts

Let's create a empty window from Widget template and drag some buttons into it, normally, you can't put them perfectly along a vertical line:

to align them vertically, we could choose all of them, right click --> Layout -->Lay out vertically:

Horizontal Layout

The same way, choose elements and right click --> Layout -->Lay out vertically will align elements horizontally.

Grid Layout

Quite the same as CSS grid layouts, Grid Layout is two-dimensional grid-based layout, it apply the same width, height and intervals (with exceptions) to all the selected elements and arrange them to multiple rows and columns (grid):

Form Layout

Form layout is often used when our app asks users to input some information that is needed, you may feel familiar with this type of layout if you ever signed up in a website. The "sign-up" form consists of two columns, one of labels and another of input boxes, like below:

we want to align these elements,  make label to label, label to box and box to box alignments, we can simply choose all elements and right click-->Layout-->Lay out in form:

then the arrangement will look good for us.

Splitter

Horizontal/Vertical Splitter layout is quite similar to basic Horizontal/Vertical layout. They also align elements in horizontal or

vertical direction. However, they are also different:

Numbers of properties

The layout object with basic Horizontal/Vertical layout is an instance of QHBoxLayout class, for this type of object, numbers of properties can be set are limited:

Whereas layout object of Horizontal/Vertical Splitter layout is an instance of QSplitter class, it has much more properties that could be adjusted:

In general, Splitter layout could be more controllable or flexible on elements' appearance.

Shortcuts

LayoutShortcutDescription
HorizontalCtrl+1Places the selected objects in a horizontal layout.
VerticalCtrl+2Places the selected objects in a vertical layout.
Horizontal splitterCtrl+3Creates a horizontal splitter and places the selected objects inside it.
Vertical splitterCtrl+4Creates a vertical splitter and places the selected objects inside it.
GridCtrl+5Places the selected objects in a grid layout.
FormCtrl+6Places the selected objects in a form layout.
Adjust sizeCtrl+JAdjusts the size of the layout to ensure that each child object has sufficient space to display its contents.

Using Layout design

Finally, to use the layout we have designed, we should first save the .ui file, then, in our terminal, navigate to the folder where our ui file exits, and type the command below:

pyuic6 -x Yourname1.ui -o Yourname2.py

Yourname1.ui: your ui file saved from Qt Designer

Yourname2.py: python script to be converted to from above ui file

then, we can run the Yourname2.py to see the the window we've designed

References

https://doc.qt.io/qt-5/designer-layouts.html

Please log in to leave a comment.