欢迎光临~湖南智能应用科技有限公司-hniat.com
语言选择: 中文版 ∷  英文版

基础知识

Qt布局管理器

01. 概述
QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout、QVBoxLayout所继承。

QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列。

QVBoxLayout:垂直布局,在垂直方向上排列控件,即:上下排列。

通过查看源码,我们可以发现,水平布局、垂直布局除了构造时的方向(LeftToRight、TopToBottom)不同外,其它均相同。

因此我们以QHBoxLayout为例,来讲解QBoxLayout的常用功能。

02. 开发环境
Windows系统:Windows10

Qt版本:Qt5.15或者Qt6

03. 水平布局常用方式
3.1 第一种方式是使用 Qt 提供的布局,从工具箱中找到相关的布局,然后将其拖拽到 UI 窗口中

将相应的控件放入到布局对应的红色框内部,这些控件就按照布局的样式自动排列了。



除此之外,我们也可以修改当前布局,需要先选中当前布局,然后鼠标右键,在右键菜单中找布局在其子菜单项中选择其他布局即可



3.2 第二种方式是直接在父窗口中对选中子部件进行布局。可以鼠标右击选择布局,也可以使用工具栏中的布局工具布局。



3.3 第三种方式:使用代码进行布局

    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.
执行结果如下:



04. 水平布局常用设置
4.1 设置外边距
默认的外边距为0,为了美观性我们可以设置下Margin。

//设置外边距
setMargin(int)
setContentsMargins(int left, int top, int right, int bottom);
setContentsMargins(const QMargins &margins)

setMargin可以设置左、上、右、下的外边距,设置之后,他们的外边距是相同的。
    
setContentsMargins与其功能相同,但是可以将左、上、右、下的外边距设置为不同的值。

使用setMargin(10)将外边距设置为10。
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
    //设置外边距为10
    layout->setMargin(20);
1.
2.
执行结果如下:



4.2 设置间距
setSpacing(int)
设置间距
1.
2.
一般情况下,会有一个默认间距值,为了保持所有布局的统一性,或者你需要一个更合适的间距值,则需要手动设置。

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

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
执行结果如下:



4.3 添加伸缩空间
addStretch()
添加了一个伸缩空间(QSpacerItem)。
1.
2.
在第一个控件之前添加伸缩,这样所有的控件就会居右显示。

    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->addStretch();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
执行结果:



在最后一个控件之后添加伸缩,这样所有的控件就会居左显示。

    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);
    //在最后一个控件添加伸缩
    layout->addStretch();
    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
执行结果:



在第一个控件之前、最后一个控件之后添加伸缩,这样所有的控件就会居中显示。

    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->addStretch();

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    layout->addWidget(button4);
    layout->addWidget(button5);
    //在最后一个添加伸缩
    layout->addStretch();

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
25.
26.
27.
执行结果



每一个控件之间都添加伸缩,这样所有的控件之间的间距都会相同。


    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->addStretch();
    layout->addWidget(button1);
    layout->addStretch();
    layout->addWidget(button2);
    layout->addStretch();
    layout->addWidget(button3);
    layout->addStretch();
    layout->addWidget(button4);
    layout->addStretch();
    layout->addWidget(button5);
    //在最后一个添加伸缩
    layout->addStretch();
    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
执行结果:



4.4 添加控件
addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0)
默认的,我们添加控件至水平布局中,默认都是垂直方向居中对齐的。
1.
2.
其中有控件大小不相同的时候就会看得很明显了,如果我们需要将其中的某些控件居上、居下显示,那么可以使用对齐方式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;
    //在第一个按钮之前添加
    //水平居左 垂直居上
    layout->addWidget(button1, 0, Qt::AlignLeft | Qt::AlignTop);
    layout->addWidget(button2, 0, Qt::AlignLeft | Qt::AlignTop);
    layout->addWidget(button3);

    //水平居左 垂直居下
    layout->addWidget(button4, 0, Qt::AlignLeft | Qt::AlignBottom);
    layout->addWidget(button5, 0, Qt::AlignLeft | Qt::AlignBottom);

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
25.
26.
27.
执行结果:



4.5 设置布局方向
setDirection(Direction)
设置布局方向
可以设置从左到右、从右到左、从上到下、从下到上等。。。
    
    
setDirection(QBoxLayout::RightToLeft)

setDirection(QBoxLayout::TopToBottom);
1.
2.
3.
4.
5.
6.
7.
8.
程序示例:


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

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为10
    layout->setSpacing(10);

    //设置布局方向
    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.
21.
22.
23.
24.
25.
26.
27.
28.
执行结果:



既然使用了QHBoxLayout,一般就不建议使用TopToBottom或者BottomToTop,如果实在确定不了方向,或者方向可以随意变化,那么建议使用QBoxLayout。

4.6 设置拉伸系数
setStretchFactor(QWidget *w, int stretch);
setStretchFactor(QLayout *l, int stretch);
设置控件、布局的拉伸系数
当窗体大小变化时,控件会根据拉伸系数来做相应的调整。
1.
2.
3.
4.
setStretchFactor(pButton1, 1);

setStretchFactor(pButton2, 2);

设置pButton1的拉伸系数为1,pButton2拉伸系数为2,当窗体变大时,会优先将pButton2进行拉伸,当达到一定程度时,再拉伸pButton1,pButton1与pButton2的宽度比例为1:2。

程序示例:

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

    //设置外边距为10
    layout->setMargin(20);
    //设置间距为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.
21.
22.
23.
24.
25.
26.
27.
执行结果:



05. 垂直布局
垂直布局和水平布局除了方向不一样之外,其余所有的设置都是一样。
-----------------------------------
©著作权归作者所有:来自51CTO博客作者itcast0的原创作品,请联系作者获取转载授权,否则将追究法律责任
【Qt】水平和垂直布局
https://blog.51cto.com/dlican/3740122

联系我们

联系人:徐经理

手机:17807330718

电话:0731-22222718

邮箱:hniatcom@163.com

地址: 湖南省株洲市石峰区联诚路79号轨道智谷2号倒班房6楼603室

关闭
用手机扫描二维码关闭
二维码