PyQt6: Control the layouts
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.
From the left hand of the Qt Designer window, we know there are four types of basic layout we could use, they are:
- Vertical Layout
- Horizontal Layout
- Grid Layout
- Form Layout
Also, we have two extra two sub types:
- Layout Vertically in Splitter
- Layout Horizontally in Splitter
These two sub types align elements just like the basic layouts do, but have more parameters that can be adjusted.
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.
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 -->
Lay out vertically:
The same way, choose elements and
right click -->
Lay out vertically will align elements horizontally.
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 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
Lay out in form:
then the arrangement will look good for us.
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.
|Horizontal||Places the selected objects in a horizontal layout.|
|Vertical||Places the selected objects in a vertical layout.|
|Horizontal splitter||Creates a horizontal splitter and places the selected objects inside it.|
|Vertical splitter||Creates a vertical splitter and places the selected objects inside it.|
|Grid||Places the selected objects in a grid layout.|
|Form||Places the selected objects in a form layout.|
|Adjust size||Adjusts 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