Qt布局管理器

于 2024-09-18 07:15:00 发布
阅读量667 收藏 17
点赞数 15
分类专栏： 原创 Qt 文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dirty_artist/article/details/142306360
版权
原创 同时被 2 个专栏收录
207 篇文章 5 订阅
订阅专栏
Qt
24 篇文章 0 订阅
订阅专栏

文章目录

QVBoxLayOut

之前将控件放在界面上，都是通过手动的方式进行的，这种方式不精确，也无法对窗口大小进行自动识别。

Qt引入了布局管理器，具体控件的大小、位置不需要我们手动设置，自动帮我们算好了。

QVBoxLayOut表示垂直的布局管理器，V是vertical的缩写

核心属性：

属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutButtonMargin下方边距
layoutSpacing相邻元素直接的边距

Layout只是用于布局，并没有提供信号

代码创建

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QVBoxLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建3个按钮，采用布局管理器管理
    QPushButton *button1 = new QPushButton("按钮1");
    QPushButton *button2 = new QPushButton("按钮2");
    QPushButton *button3 = new QPushButton("按钮3");

    //创建布局管理器
    QVBoxLayout *layout = new QVBoxLayout();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);

    this->setLayout(layout);
}

Widget::~Widget()
{
    delete ui;
}

这样就自动设置好了按钮的位置和大小。

GIF 2024-9-16 18-08-14

图形化创建

上面一个widget只能设置一个布局管理器。

这图形化界面当中设置，发现可以创建2个布局管理器，但是如果调整窗口大小，这个并不会随着变化。

GIF 2024-9-16 18-12-48

这是因为使用代码创建layout，其实只创建了一个layout；

如果在Qt Designer中创建的layout，是先创建了widget，然后再新的widget中添加了一个layout。

先拖拽控件，再layout：

GIF 2024-9-16 18-19-00

这里也可以设置layout的一些属性：

image-20240916182019889

QHBoxLayout

QHBoxLayout表示水平垂直的布局管理器

属性和QVBoxLayout一样，使用也是类似

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QHBoxLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    
    QHBoxLayout* layout = new QHBoxLayout(this);
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
}

Widget::~Widget()
{
    delete ui;
}

image-20240916182448709

布局管理器嵌套

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QHBoxLayout>
#include<QVBoxLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建垂直布局管理器
    QVBoxLayout* vLayout = new QVBoxLayout();
    this->setLayout(vLayout);

    //添加按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    vLayout->addWidget(button1);
    vLayout->addWidget(button2);

    //创建水平布局管理器
    QHBoxLayout* hLayout = new QHBoxLayout();
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    hLayout->addWidget(button3);
    hLayout->addWidget(button4);

    //水平布局管理器添加到垂直
    vLayout->addLayout(hLayout);
}

Widget::~Widget()
{
    delete ui;
}

image-20240916184233824

QGridLayout

QGridLayout用来实现网格布局的效果，可以达到n*m这种网格的效果

核心属性：

属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutButtonMargin下方边距
layoutHorizontalSpacing相邻元素之间的水平方向的间距
layoutVerticalSpacing相邻元素之间垂直方向的间距
layoutRowStretch行方向的拉伸系数
layoutColunmStretch列方向的拉伸系数

代码示例

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");
    QPushButton* button7 = new QPushButton("按钮7");
    QPushButton* button8 = new QPushButton("按钮8");

    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 0, 2);
    layout->addWidget(button4, 0, 4);
    layout->addWidget(button5, 1, 0);
    layout->addWidget(button6, 1, 1);
    layout->addWidget(button7, 3, 1);
    layout->addWidget(button8, 4, 0);

    this->setLayout(layout);
}

Widget::~Widget()
{
    delete ui;
}

image-20240916185409562

**Tips：**这里设置的行数和列数，只是用来决定控件之间的相对位置

拉伸系数

上面创建的布局管理器，控件尺寸都是一样的，如果想实现不同的尺寸控件，可以通过拉伸系数设置控件尺寸的比例。

水平方向：

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");

    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 0, 2);
    layout->addWidget(button4, 1, 0);
    layout->addWidget(button5, 1, 1);
    layout->addWidget(button6, 1, 2);

    this->setLayout(layout);

    //设置水平方向的拉伸系数   按照1:1:2
    layout->setColumnStretch(0, 1);
    layout->setColumnStretch(1, 1);
    layout->setColumnStretch(2, 2);

}

Widget::~Widget()
{
    delete ui;
}

image-20240916190402692

**Tips：**如果layout->setColumnStretch(0, 0);第二个参数为0，表示不参与拉伸，一直都是固定尺寸。

垂直方向：

image-20240916191749113

这里直接设置，是无效的，收到了SizePolicy的影响：

属性说明
QSizePolicy::Ignored忽略按钮的尺寸，不对布局产生影响
QSizePolicy::Minimum控件的最小尺寸固定在，布局时不会小于该值
QSizePolicy::Maximum控件的最大尺寸固定值，布局时不会大于该值
QSizePolicy::Preferred控件的理想尺寸为固定值，布局时会尽量接近该值
QSizePolicy::Expanding控件的尺寸可以根据控件调整，尽可能占据空间
QSizePolicy::Shrinking控件尺寸可以根据空间调整，尽可能缩小以适应空间

由于按钮的垂直方向默认没有拉伸开（水平方向默认拉伸），所以不会收到拉伸系数的影响，要想让垂直方向的拉伸系数生效，就就需要让按钮能够拉伸开

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");
    QPushButton* button5 = new QPushButton("按钮5");
    QPushButton* button6 = new QPushButton("按钮6");

    button1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    button6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QGridLayout* layout = new QGridLayout();
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 1, 0);
    layout->addWidget(button4, 1, 1);
    layout->addWidget(button5, 2, 0);
    layout->addWidget(button6, 2, 1);

    this->setLayout(layout);

    //设置垂直拉伸系数
    layout->setRowStretch(0, 1);
    layout->setRowStretch(0, 2);
    layout->setRowStretch(0, 3);

}

Widget::~Widget()
{
    delete ui;
}

image-20240916191930816

QFormLayout

QFormLayout叫做表单布局，属于QGridLayout的一种特殊情况。

它只有n行2列，可由于用户填表的场景

#include "widget.h"
#include "ui_widget.h"
#include<QFormLayout>
#include<QLabel>
#include<QLineEdit>
#include<QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);

    //创建2个label作为第一列
    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("学号 ");

    //创建2个输入框作为第二列
    QLineEdit* edit1 = new QLineEdit();
    QLineEdit* edit2 = new QLineEdit();

    //上述控件添加到表单
    layout->addRow(label1, edit1);
    layout->addRow(label2, edit2);

    QPushButton* button = new QPushButton("提交");
    layout->addRow(nullptr, button);
}

Widget::~Widget()
{
    delete ui;
}

image-20240916193229515

QSpacerItem

QSpacerItem不是布局管理器，但是可以搭配布局管理器使用，用来添加一段空白

属性说明
width宽度
height高度
hData水平方向的sizePolicy：
QSizePolicy::Ignored：忽略按钮的尺寸，不对布局产生影响
QSizePolicy::Minimum：控件的最小尺寸固定在，布局时不会小于该值
QSizePolicy::Maximum：控件的最大尺寸固定值，布局时不会大于该值
QSizePolicy::Preferred：控件的理想尺寸为固定值，布局时会尽量接近该值
QSizePolicy::Expanding：控件的尺寸可以根据控件调整，尽可能占据空间
QSizePolicy::Shrinking：控件尺寸可以根据空间调整，尽可能缩小以适应空间
vDate垂直方向的sizePolicy，选项同上

简单示例：

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QHBoxLayout>
Widget::Widget(QWidget *parent)
   : QWidget(parent)
   , ui(new Ui::Widget)
{
   ui->setupUi(this);

   QHBoxLayout* layout = new QHBoxLayout();
   this->setLayout(layout);

   QPushButton* button1 = new QPushButton("按钮1");
   QPushButton* button2 = new QPushButton("按钮2");


   //创建spacer
   QSpacerItem* spacer = new QSpacerItem(200, 20); //宽度和高度


   //如果想让空白在直接，添加的顺序就在中间
   layout->addWidget(button1);
   layout->addSpacerItem(spacer);
   layout->addWidget(button2);
}

Widget::~Widget()
{
   delete ui;
}

image-20240916194527210

加法器+
关注
专栏目录
QT布局管理器【QVBoxLayout，QHBoxLayout，QGridLayout】
m0_45463480的博客
06-22 1205
QT布局管理器【QVBoxLayout，QHBoxLayout，QHBoxLayout】 简介 main.cpp mainwindow.h mainwindow.cpp ui界面设计 登录界面为例 总结
Qt 实战（5）布局管理器 | 5.2、深入解析Qt布局管理器
个人技术博客
06-18 1010
Qt布局管理器是创建灵活和可适应不同设备和分辨率的用户界面的关键工具。通过合理地使用不同类型的布局管理器、嵌套布局、间距和对齐方式以及测试不同环境，开发人员可以创建出功能完善且易于使用的用户界面。希望本文能帮助您更深入地了解Qt布局管理器并为您的开发工作提供有用的指导。
Hello Qt（二十）——QT布局管理器
天山老妖
03-05 1390
一、布局管理器简介 QT中使用绝对定位的布局方式无法自适应窗口的变化。 QT中提供了对界面组件进行布局管理的类，用于对界面组件进行管理，能够自动排列窗口中的界面组件，窗口大小变化后自动更新界面组件的大小。 QLayout是QT中布局管理器的抽象基类，通过对QLayout的继承，实现了功能各异且互补的布局管理器。 布局管理器不是界面组件，而是界面组件的定位策略。 任意容器类型的组件都可以指定布局管理器。 同一个布局管理器管理中的组件拥有相同的父组件，在设置布局管理器的同时已经隐式指定了父.
【Qt】Qt布局管理器
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师---欢迎大家一起交流(私信添加博主微信)
03-22 4305
00. 目录 文章目录00. 目录01. 概述02. 开发环境03. Qt设计师实现布局04. 代码实现布局05. 预留06. 附录 01. 概述 一个软件不仅要有强大的功能，还要有一个美观的界面，布局管理器就是用来对界面部件进行布局管理的。Qt中的布局管理器主要包括QBoxLayout基本布局管理器、QGridLayout栅格布局管理器和QFormLayout窗体布局管理器，而基本布局管理器又分为QHBoxLayout水平布局管理器和QVBoxLayout垂直布局管理器。 02. 开发环境 Windows
qt布局嵌套_QT开发（二十一）——QT布局管理器
weixin_39805387的博客
12-19 802
QT开发(二十一)——QT布局管理器一、布局管理器简介QT中使用绝对定位的布局方式无法自适应窗口的变化。QT中提供了对界面组件进行布局管理的类，用于对界面组件进行管理，能够自动排列窗口中的界面组件，窗口大小变化后自动更新界面组件的大小。QLayout是QT中布局管理器的抽象基类，通过对QLayout的继承，实现了功能各异且互补的布局管理器。布局管理器不是界面组件，而是界面组件的定位策略。任意容器类...
第5篇 基础（五）Qt布局管理器
hw5230的博客
12-03 356
在前一篇中我们学习了使用资源文件为主窗口添加菜单图标。这次，我们先将菜单进行完善，然后讲解一些布局管理方面的内容。一个软件不仅要有强大的功能，还要有一个美观的界面，布局管理器就是用来对界面部件进行布局管理的。这一节将简单介绍一下Qt的布局方面的应用，大家可以以此类推，学习使用其他布局部件。环境是：Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1一、完善菜单1．新建Qt Gui应用，项目名称为，基类选择，类名为。2．完成后，在设计模式添加菜单项，并添加资源文件，向其中添加菜单图标。
Qt布局管理器使用指南
qq_44859843的博客
03-19 479
Qt布局管理器提供了多种灵活的布局方式，包括水平布局、垂直布局和网格布局。通过合理使用这些布局管理器，开发者可以轻松创建各种复杂的用户界面，并且使界面在不同平台和窗口大小下都能够自动调整和适应。布局管理器是Qt界面设计中的重要组成部分，值得大家学习和掌握。
Qt 布局管理器
ikun66666的博客
03-19 1254
垂直布局；水平布局；网格布局；表单布局
Qt——布局管理器
m0_73443478的博客
11-10 2587
Qt——布局管理器
Qt布局管理器一些会迷惑的点(1)
05-22
本篇文章将深入探讨Qt布局管理器的一些常见迷惑点，帮助开发者更好地理解和运用布局管理器进行UI设计。 1. **什么是Qt布局管理器？** Qt布局管理器是一种机制，它根据窗口或容器的大小变化自动调整其内部控件的...
qt5总中布局管理器的源码
08-20
Qt5中的布局管理器是构建GUI应用程序的核心工具之一，它帮助开发者自动调整控件在窗口中的位置和大小，以适应不同的屏幕分辨率和用户界面需求。本文将深入解析Qt5布局管理器的源码，探讨其工作原理和实现细节。 ...
比较stl库的ostringstream与Qt的QString::arg(),QString::number()
liji_digital的博客
09-11 392
对于stringstream,使用比较繁琐，要联合使用std::fixed和std::setprecision才能实现固定小数位数显示，qstring则要简单一些。注意，使用qstring的时候，不论使用arg还是number，format输入参数都必须是'f'，不能用'g'，否则可能无法获得理想的效果。考虑STL库的ostringstream或者Qt的QString::arg(), number。显示一个float或者double类型的数，要求小数点后的数字位数为定值。
QT::QComboBox自定义左击事件信号
牛牛的博客
09-13 394
添加一个原来的控件QComboBox，然后把这个控件提升为MyComboBox就可以使用了
Qt-QPushButton按钮类控件(22)
weixin_67595436的博客
09-12 427
QPushButton控件的介绍与使用
Qt构建JSON及解析JSON
最新发布
a1937194471的博客
09-17 903
一般来讲C++类和对象在java中是无法直接直接使用的，因为压根就不是一个规则。但是他们在内存中都是二进制表示的，所以把C++的类和对象转成二进制再按照java的规则解析这段二进制代码就可以做到C++描述的东西在java中复现了。
Qt实现登录界面
Black.Spider的博客
09-11 437
本文基于Qt实现一个简单的登录界面，主要使用到Widget、button、edit等控件，基于自定义的信号槽实现界面的跳转，使用绘图设备添加背景图等。
Qt：懒汉单例(附带单例使用和内存管理)
m0_71489826的博客
09-15 889
本文主要写懒汉单例以及单例的释放，网上很多教程只有单例的创建，但是并没有告诉我们单例的内存管理，这就很头疼。
buildroot移植qt报错Info: creating stash file （补充qt添加字库）
冉冰的小窝
09-13 403
qt serialprot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加法器+

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值