Qt layout manager

01. Overview
QBoxLayout can arrange controls in the horizontal or vertical direction, and is inherited by QHBoxLayout and QVBoxLayout.

QHBoxLayout: Horizontal layout, arranging controls in the horizontal direction, that is: left and right.

QVBoxLayout: Vertical layout, arranging controls in the vertical direction, that is: arranging up and down.

By looking at the source code, we can find that the horizontal layout and vertical layout are the same except for the directions (LeftToRight, TopToBottom) during construction.

Therefore, we take QHBoxLayout as an example to explain the common functions of QBoxLayout.

02. Development environment
Windows system: Windows10

Qt version: Qt5.15 or Qt6

03. Common ways of horizontal layout
3.1 The first way is to use the layout provided by Qt, find the relevant layout from the toolbox, and drag it to the UI window

Put the corresponding controls into the red box corresponding to the layout, and these controls are automatically arranged according to the layout style.



In addition, we can also modify the current layout, you need to select the current layout first, then right-click, find the layout in the right-click menu, and select another layout in its submenu item.



3.2 The second way is to lay out the selected sub-components directly in the parent window. You can right-click to select a layout, or you can use the layout tool in the toolbar.



3.3 The third way: using code for layout

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    window->setLayout(layout);
    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
The execution result is as follows:



04. Common settings for horizontal layout
4.1 Setting the margins
The default margin is 0. For aesthetics, we can set the Margin.

//set margins
setMargin(int)
setContentsMargins(int left, int top, int right, int bottom);
setContentsMargins(const QMargins &margins)

setMargin can set the left, top, right, and bottom margins. After setting, their margins are the same.
    
setContentsMargins has the same function, but can set the left, top, right, and bottom margins to different values.

Use setMargin(10) to set the margin to 10.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
    //Set the margin to 10
    layout->setMargin(20);
1.
2.
The execution result is as follows:



4.2 Setting the spacing
setSpacing(int)
set spacing
1.
2.
In general, there will be a default spacing value, in order to keep all layouts uniform, or you need a more suitable spacing value, you need to set it manually.

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 0
    layout->setSpacing(0);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
The execution result is as follows:



4.3 Add flex space
addStretch()
Added a flex space (QSpacerItem).
1.
2.
Add flex before the first control so that all controls are displayed to the right.

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    // add before the first button
    layout->addStretch();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 0
    //layout->setSpacing(0);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
Results of the:



Add flex after the last control so that all controls are displayed on the left.

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);
    //Add stretch to the last control
    layout->addStretch();
    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 0
    //layout->setSpacing(0);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
Results of the:



Add flex before the first control and after the last control so that all controls are centered.

    QWidget *window = new QWidget;
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    // add before the first button
    layout->addStretch();

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);
    //add scaling at the last
    layout->addStretch();

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 0
    //layout->setSpacing(0);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
25.
26.
27.
Results of the



Add stretch between each control so that all controls have the same spacing.


    QWidget *window = new QWidget;

    QPushButton *button1 = new

QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    // add before the first button
    layout->addStretch();
    layout->addWidget(button1);
    layout->addStretch();
    layout->addWidget(button2);
    layout->addStretch();
    layout->addWidget(button3);
    layout->addStretch();
    layout->addWidget(button4);
    layout->addStretch();
    layout->addWidget(button5);
    //add scaling at the last
    layout->addStretch();
    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 0
    //layout->setSpacing(0);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
25.
26.
27.
28.
29.
30.
Results of the:



4.4 Adding controls
addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0)
By default, we add controls to the horizontal layout, which are centered vertically by default.
1.
2.
It will be obvious when some of the controls are of different sizes. If we need to display some of the controls on the top and bottom, we can use the alignment method Qt::Alignment.

    QWidget *window = new QWidget;
    window->resize(320, 128);
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;
    // add before the first button
    // horizontally to the left, vertical to the top
    layout->addWidget(button1, 0, Qt::AlignLeft | Qt::AlignTop);
    layout->addWidget(button2, 0, Qt::AlignLeft | Qt::AlignTop);
    layout->addWidget(button3);

    // horizontally to the left, vertical to the bottom
    layout->addWidget(button4, 0, Qt::AlignLeft | Qt::AlignBottom);
    layout->addWidget(button5, 0, Qt::AlignLeft | Qt::AlignBottom);

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 10
    layout->setSpacing(10);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
25.
26.
27.
Results of the:



4.5 Set the layout direction
setDirection(Direction)
Set layout direction
You can set from left to right, right to left, top to bottom, bottom to top, etc. . .
    
    
setDirection(QBoxLayout::RightToLeft)

setDirection(QBoxLayout::TopToBottom);
1.
2.
3.
4.
5.
6.
7.
8.
Program example:


    QWidget *window = new QWidget;
    window->resize(320, 128);
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 10
    layout->setSpacing(10);

    //set the layout direction
    layout->setDirection(QBoxLayout::TopToBottom);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
25.
26.
27.
28.
Results of the:



Since QHBoxLayout is used, it is generally not recommended to use TopToBottom or BottomToTop. If the direction cannot be determined, or the direction can be changed at will, it is recommended to use QBoxLayout.

4.6 Setting the stretch factor
setStretchFactor(QWidget *w, int stretch);
setStretchFactor(QLayout *l, int stretch);
Set the stretch factor for controls and layouts
When the size of the form changes, the control will adjust accordingly according to the stretch factor.
1.
2.
3.
4.
setStretchFactor(pButton1, 1);

setStretchFactor(pButton2, 2);

Set the stretch coefficient of pButton1 to 1, and the stretch coefficient of pButton2 to 2. When the form becomes larger, pButton2 will be stretched first. When it reaches a certain level, pButton1 will be stretched again. The width ratio of pButton1 to pButton2 is 1. :2.

Program example:

    QWidget *window = new QWidget;
    window->resize(320, 128);
    QPushButton *button1 = new QPushButton("One");
    QPushButton *button2 = new QPushButton("Two");
    QPushButton *button3 = new QPushButton("Three");
    QPushButton *button4 = new QPushButton("Four");
    QPushButton *button5 = new QPushButton("Five");

    QHBoxLayout *layout = new QHBoxLayout;

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    //Set the margin to 10
    layout->setMargin(20);
    //set the spacing to 10
    layout->setSpacing(10);

    layout->setStretchFactor(button1, 1);
    layout->setStretchFactor(button2, 2);

    window->setLayout(layout);

    window->show();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
twenty one.
twenty two.
twenty three.
twenty four.
25.
26.
27.
Results of the:



05. Vertical layout
The vertical layout and the horizontal layout are all the same except for the orientation.
-----------------------------------
© Copyright belongs to the author: original works from 51CTO blogger itcast0, please contact the author for reprint authorization, otherwise legal responsibility will be pursued
[Qt] Horizontal and vertical layout
https://blog.51cto.com/dlican/3740122