【Qt】盒子布局、网格布局、表单布局和堆栈布局

于 2023-10-30 22:55:20 发布
阅读量662 收藏 1
点赞数
分类专栏： Qt 文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72895175/article/details/134130106
版权

盒子布局

QBoxLayout可以在水平方向或垂直方向上排列控件，分别派生了QHBoxLayout、QVBoxLayout子类。

  • QHBoxLayout：水平布局，在水平方向上排列控件，即：左右排列。
  • QVBoxLayout：垂直布局，在垂直方向上排列控件，即：上下排列。

水平布局、垂直布局除了构造时的方向（LeftToRight、TopToBottom）不同外，其它均相同。

水平布局

auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto hlayout = new QHBoxLayout;

hlayout->addWidget(tiplabel);
hlayout->addWidget(lindEdet);

setLayout(hlayout);

在这里插入图片描述

垂直布局

auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto vlayout = new QVBoxLayout;

vlayout->addWidget(tiplabel);
vlayout->addWidget(lindEdet);

setLayout(vlayout);

在这里插入图片描述

嵌套布局

水平布局会把所有的控件都显示在一行上，垂直布局会把所有控件显示在一列上,如果要显示多行(比如登录界面)，那么就要通过水平布局和垂直布局之间的嵌套实现。

auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto hlayout = new QHBoxLayout
hlayout->addWidget(tiplabel);
hlayout->addWidget(lindEdet);

auto tiplabel1 = new QLabel("密码");
auto lindEdet1 = new QLineEdit;
auto hlayout1 = new QHBoxLayout;
hlayout1->addWidget(tiplabel1);
hlayout1->addWidget(lindEdet1)

auto vlayout = new QVBoxLayout;
vlayout->addLayout(hlayout);
vlayout->addLayout(hlayout1)
setLayout(vlayout);

一行就是一个水平布局，然后将水平布局嵌入在垂直布局中。
在这里插入图片描述

精细化操作

先来一组按钮

QPushButton* btn1 = new QPushButton("One");
QPushButton* btn2 = neQPushButton("Two");
QPushButton* btn3 = neQPushButton("Three");
QPushButton* btn4 = neQPushButton("Four");
QPushButton* btn5 = neQPushButton("Five")
QHBoxLayout* hlayout = neQHBoxLayout;
hlayout->addWidget(btn1);
hlayout->addWidget(btn2);
hlayout->addWidget(btn3);
hlayout->addWidget(btn4);
hlayout->addWidget(btn5)
this->setLayout(hlayout);

在这里插入图片描述

这一排按钮和窗口之间有边距，按钮和按钮之间也存在间隙，这些边距和间隙是可调节的。

调节边距

void QLayout::setContentsMargins(int left, int top, int right, int bottom)

hlayout->setContentsMargins(0, 0, 0, 0);

在这里插入图片描述

调节边界

void setSpacing(int spacing)

hlayout->setSpacing(0);

在这里插入图片描述

拉伸窗口，会发现窗口上的按钮会随着窗口的拉伸而变大/变小，如果窗口变大很大，那么这些按钮是不是就会很难看。
在这里插入图片描述

如果在拉伸的过程中按钮的变化是这样的是不是就很好了。要实现这个效果很简单，只要添加拉伸空间就可以了。
在这里插入图片描述

QHBoxLayout* hlayout = new QHBoxLayout;
hlayout->addStretch();      //添加拉伸空间
hlayout->addWidget(btn1);
...

在第一个控件之前添加伸缩，这样所有的控件就会居右显示。

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

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

这个时候拉伸窗口，你会发现窗口上的各个按钮的变化是相同的，如果你想让某些按钮的变化有些不同可以通过设置拉伸系数来实现。

设置拉伸系数

bool setStretchFactor(QWidget *widget, int stretch)

bool setStretchFactor(QLayout *layout, int stretch)

hlayout->setStretchFactor(btn2,1);
hlayout->setStretchFactor(btn3,2);

在这里插入图片描述

网格布局

栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局会计算位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中。

在这里插入图片描述

对于这个页面通过网格布局进行创建，可以划分成4行4列。一个控件并不是只能占一个单元格，而是可以跨行和跨列的。
在这里插入图片描述

void glayout(){
    QLabel* imageLabel = new QLabel;
    QLineEdit* userNamaeEdit = new QLineEdit;
    QLineEdit* passwdEdit = new QLineEdit;
    QCheckBox* rememberCheckBox new QCheckBox;
    QCheckBox* autoLoginCheckBox new QCheckBox;
    QPushButton* registerBtn = new QPushButton;
    QPushButton* forgetBtn = new QPushButton;
    QPushButton* loginBtn = new QPushButton;

    imageLabel->setFixedSize(90,90);
    imageLabel->setPixmap(QPixm(":/Resource/zay.    png"));
    imageLabel->setScaledConten(true)

    userNamaeEdit->setPlaceholderxt("QQ号码/手机/   邮箱");
    passwdEdit->setPlaceholderText("密码");

    rememberCheckBox->setText("密码");  autoLoginCheckBox->setText(动登录");

    registerBtn->setText("注册");
    forgetBtn->setText("找回密码");
    loginBtn->setText("登录")
    auto glayout = new QGridLayo(this);
    glayout->addWidget(imageLabel0, 0, 3, 1);
    glayout->addWidg(userNamaeEdit, 0, 1, 1, 2);
    glayout->addWidget(passwdEdit1, 1, 1, 2);
    glayout->addWidg(rememberCheckBox, 2, 1, 1,     1);
    glayout->addWidg(autoLoginCheckBox, 2, 2,   1,1);
    glayout->addWidget(loginBtn3, 1, 1, 2);
    glayout->addWidg(registerBtn, 0, 3, 1, 1);
    glayout->addWidget(forgetBtn1, 3, 1, 1);
}

表单布局

QFormLayout类管理输入小部件的表单及其关联的标签 以两列形式布置其子项，左列由标签组成，右列由“字段”小部件（行编辑器、旋转框等）组成。表达布局的基本单位是行，通常使用的是addRow()函数。

void addRow(QWidget* label,QWidget* field)
void addRow(QWidget* label,QLayout* field)
使用给定的label和field在此表单布局的底部添加新行

void addRow(const QString &labelText, QWidget* field)
void addRow(const QString &labelText, QLayout* field)
这个重载会在后台自动创建一个以labelText作为文本的QLabel。 field被设置为新的QLabel的伙伴

void addRow(QWidget widget)
void addRow(QLayout layout)

之前用盒子布局中的嵌套结构，制作“用户名密码输入界面，两行文本编辑框是没有对齐的，而如果采用表单布局就不会这样。

在这里插入图片描述

在这里插入图片描述

使用表单布局实现下面这个界面

在这里插入图片描述

void flayout(){
    auto usernameEdit = new QLineEdit;

    auto passwordLab = new QLabel("密 码");
    auto passwrodEdit = neQLineEdit;
    auto mobileEdit = neQLineEdit;
    auto emailEdit = new QLineEdit
    auto manChx = new QCheckBox("男");
    auto womanChx = new QCheckBox（"女");
    flayout->addRow("*用户名", usernameEdit);
    flayout->addRow(new QLabel("中文、英文、特殊字  符"));
    flayout->addRow("*密码", passwrodEdit);
    flayout->addRow("*手机号码", mobileEdit);
    flayout->addRow("电子邮箱", emailEdit);
    auto hlayout = new QHBoxLayout;
    hlayout->addWidget(manChx);
    hlayout->addWidget(womanChx);
    hlayout->addStretch();
    flayout->addRow("性别", hlayout);
}

目前的效果是这样
在这里插入图片描述

要想实现显示红色的*以及将字符串 "中文、英文、特殊字符"变小变灰，那么就要使用HTML的标签,对于显示在QLabel上的文字，是可以使用一些HTML标签的

void flayout(){
    auto usernameEdit = new QLineEdit;

    auto passwordLab = new QLabel("密 码");
    auto passwrodEdit = neQLineEdit;
    auto mobileEdit = neQLineEdit;
    auto emailEdit = new QLineEdit
    auto manChx = new QCheckBox("男");
    auto womanChx = new QCheckBox（"女");
    flayout->addRow("<font color=red size=4>*</ font>用户名", usernameEdit);
    flayout->addRow(new QLabel("<font   color=gray  size=2>中文、英文、特殊字符</ font>"));
    flayout->addRow("<font color=red size=4>*</ font>密码", passwrodEdit);
    flayout->addRow("<font color=red size=4>*</ font>手机号码", mobileEdit);
    flayout->addRow("电子邮箱", emailEdit);
    auto hlayout = new QHBoxLayout;
    hlayout->addWidget(manChx);
    hlayout->addWidget(womanChx);
    hlayout->addStretch();
    flayout->addRow("性别", hlayout);
}

堆栈布局

QStackedLayout 用于管理多个子窗口或页面的堆叠显示。它允许你在一个固定区域内显示多个子窗口，但每次只显示其中一个子窗口，其他子窗口被堆叠在后面。

这里通过堆栈布局管理上文中的网格布局和表单布局，实现一个页面切换的效果。

static QWidget* CreatePage(int id)
{
	if (id == 0)
	{
		QWidget* page = new QWidget;
		gridlayout(page);
		return page;
	}
	else if (id == 1)
	{
		QWidget* page = new QWidget;
		formlayout(page);
		return page;
	}
	return nullptr;
}

这里稍微修改了一下girdlayout函数和formlayout函数

girdlayout(QWidget*page)

原来这里填的是this，现在改为page就可以了
auto glayout = new QGridLayout(page);

formlayout(QWidget*page)

原来这里填的是this，现在改为page就可以了
auto flayout = new QFormLayout(page);

void slayout() {
auto btnGroup = new QButtonGro(this);
btnGroup->addButton(new QPushButt("page1"), 0);	//0
btnGroup->addButton(new QPushButt("page2"), 1);	//1

auto hlayout = new QHBoxLayout;
hlayout->addWidget(btnGroup->butt(0));
hlayout->addWidget(btnGroup->butt(1));
hlayout->addStretch();

//用来管理多个页面的
auto slayout = new QStackedLayout;
slayout->addWidget(CreatePa(0));	//0
slayout->addWidget(CreatePa(1));	//1

auto vlayout = new QVBoxLayout;
vlayout->addLayout(hlayout);
vlayout->addLayout(slayout);

setLayout(vlayout);

//切换页面
qDebug() << slayout->count();

connect(btnGroup,QButtonGroup::idClicked, [=](int id)
	{
		slayout->setCurrentIndex(id);
	});

}

在这里插入图片描述

zhx 熬夜学编程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt | QGridLayout 类(网格布局)
m0_45463480的博客
05-23 571
QGridLayout基本原理是把窗口划分为若干个单元格，每个子部件被放置于一个或多个单元格之中，各 单元格的大小可由拉伸因子和一行或列中单元格的数量来确定，若子部件的大小(由 sizeHint()确定)小于单元格，则可以设置该子部件位于单元格的什么位置(顶部、左侧、底 部等)，还可设置该子部件是否可以拉伸以填满该单元格等等。
Qt 代码实现页面布局 水平、垂直、网格
qq_43838261的博客
08-24 2877
QtCreator 可以使用ui对页面进行布局，但有时需求不方便创建单独的.h .cpp .ui文件，需要在代码中实现页面布局。最常见的布局为水平布局：QHBoxLayout、垂直布局：QVBoxLayout、网格布局：QGridLayout今天讲一下水平布局和垂直布局，网格布局后期补上。
从新手小白入门Qt编程(Windows 10)
07-11
Qt是由Qt Company开发的主流跨平台C++图形用户界面应用程序开发框架。Qt是面向对象的框架、容易扩展，并且允许真正地组件编程，既可以开发GUI程序，也可用于控制台工具和服务器。其跨平台集成开发环境Qt Creator 全面支持Windows ，mac、Linux、iOS、Android、WP等。本课程主要帮助学员熟练掌握Qt 5.9框架下的C++开发，通过核心类的详细讲解与源码分析，以及所有UI控件的讲解演示，迅速帮助学员达到企业级Qt开发工程师的能力！
【Qt】Qt之网格布局
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师---欢迎大家一起交流(私信添加博主微信)
03-30 9852
00. 目录 文章目录00. 目录01. 概述02. 开发环境03. 常用函数详解04. Qt设计师使用网格布局05. 使用代码实现网格布局06. 附录 01. 概述 QGridLayout：格栅布局，也被称作网格布局（多行多列）。 栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的： 它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管
[QT] QT常用的布局方式
weixin_68016945的博客
05-06 3354
QT提供了许多种不同的布局管理器，以便于开发者根据自己的需要创建不同的布局。在本文中，我们将介绍QT的五种常用布局：水平布局、垂直布局、网格布局、表单布局和堆栈布局，并分别展示它们的用法和示例代码。运行环境在qt creator，部分例子可能需要添加头文件，自行添加即可。例子我力求最简，演示一下最理想又简单的效果，方便我日后重新用到。
Qt学习笔记—Qt中的常用布局
tgs1291035260的博客
04-23 2419
本篇文章主要将Qt中几种常见的布局如垂直布局、水平布局、网格布局、栅格布局，欢迎大佬前来指导
Qt之网格布局
weixin_54500078的博客
07-12 1454
QGridLayout *Grid = new QGridLayout; Grid->addWidget(lineEdit,1,1,1,4,Qt::Alignment()); 6个参数含义： 1：部件的指针 2、3：所在行和列 4、5：占用几行和几列 6：对齐方式 ———————————————— 版权声明：本文为CSDN博主「tiantianfendou」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.cs..
Qt网格布局应用.zip
06-12
在本文中，我们将深入探讨Qt框架中的网格布局（Grid Layout）及其在实际应用中的使用方法。Qt是一个跨平台的应用程序开发框架，广泛用于创建桌面、移动和嵌入式应用程序。网格布局是Qt Widgets模块中的一种布局管理...
QT布局：实现动态布局
05-01
QT布局是Qt库中一种强大的功能，用于在用户界面上管理控件的排列和尺寸调整。在QT中，布局管理器能够自动调整控件的位置和大小，以适应窗口的变化，从而提供灵活且响应良好的界面。本文将深入探讨如何在QT中实现动态...
Qt类似于网格布局的窗口容器QGridWidget
04-08
Qt的基本布局有水平布局（QHBoxLayout）、垂直布局（QVBoxLayout）、网格布局（QGridLayout）、表单布局（QFormLayout）等。QGridWidget作为一个类似网格布局的窗口容器，将加入到容器中的窗口按照网格布局方式排列...
Qt类似于网格布局的窗口容器QBoxWidget简介
03-31
Qt的基本布局有水平布局（QHBoxLayout）、垂直布局（QVBoxLayout）、网格布局（QGridLayout）、表单布局（QFormLayout）等。QBoxWidget作为一个类似网格布局的窗口容器，将加入到容器中的窗口按照网格布局方式排列，...
Qt FlowLayout布局
02-23
与标准的Qt布局（如QVBoxLayout、QHBoxLayout和QGridLayout）不同，FlowLayout允许控件按照特定的方向（水平或垂直）流式排列，当空间不足时会自动换行。这种布局非常适合用于创建动态的、自适应大小的界面，例如...
Qt Quick - GridLayout 网格布局
洪源兄
03-13 3811
GridLayout 是最常用的布局器，也叫网格布局器，如果网格布局被调整大小，布局中的所有 Item 将被重新排列。它类似于基于widget的QGridLayout。GridLayout元素的所有可见子元素都将属于该布局。如果你想要一个只有一行或一列的布局，可以使用RowLayout或ColumnLayout。这些提供了更方便的API，并提高了可读性。默认情况下， Item 将根据 flow 属性进行排列。flow属性的默认值是GridLayout.LeftToRight，就是从左到右排列。
QT入门之布局 水平布局、垂直布局、表单布局、网格布局
最新发布
weixin_53370274的博客
05-13 1468
布局主要是用来管理多个组件如何排列的。如果没有布局的话，我们可能需要给每个组件都设置一下在界面中的位置，这样就比较麻烦了。有了布局，我们就可以将一些组件放在一个布局中，通过布局去管理各个组件的位置，我们就只需要给布局设置在界面中的位置即可。在 QT 中一共有 5 种布局，他们的继承关系如下图：QT 的QLayout布局属性。
QT 栅格布局 (QGridLayout)
houxian1103的博客
02-28 3745
QGridLayout 占用来自其父布局或 parentWidget()获得的空间，将其划分为行列表格形式，在每个布局的表格里放置控件或者布局器就行。新建QGridLayout之后，在桌面上就会出现一个网格状的布局，这个布局是看不见的，如下表格一样，那么如何确定这样的表格有几行几列呢？可以对其进行初始化。
QT 多层视图（视图叠加显示）
qq_42261354的博客
02-23 5507
QT 多层视图控件
QT网格布局控件
qq_22878985的博客
07-17 303
QT 自定义控件
QT QGridLayout网格布局控件
断点
05-05 2118
本文详细的介绍了QGridLayout控件的各种操作，例如：新建界面、控件布局、获取行、获取列、某行伸缩系数、某列伸缩系数、某列最小宽度、某行最小宽度、总单元格数、移除布局条目、移动布局条目、其它文章等操作。 实际开发中，一个界面上可能包含十几个控件，手动调整它们的位置既费时又费力。布局管理器可以完成两件事：自动调整控件的位置，包括控件之间的间距、对齐等；当用户调整窗口大小时，位于布局管理器内的控件也会随之调整大小，从而保持整个界面的美观。 本系列QT全面详解文章目前共有二
Qt5小白入门：布局管理器详解与实战
章节名为"第8章Qt布局管理"，主要讲解了布局管理在Qt开发中的重要性，特别是在创建用户界面时，它确保了部件的整洁排列和适应窗口大小变化的能力。 布局管理器是Qt中一种核心的概念，它允许开发者在容器中自动调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值