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

news2024/11/15 18:05:42

盒子布局

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

}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1151403.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

测试环境内存溢出排查过程

测试环境内存溢出排查过程

基本信息 客户名称&#xff1a;xxx 产品名称&#xff1a; 版本号&#xff1a; 问题分类&#xff1a;编码问题 环境类型&#xff1a;实体机 问题现象 保险公司测试环境爆内存&#xff0c;机器挂掉。总共64g的内存&#xff0c;在没有开始测试tomcat部署war包前内存使用率为25%左…
阅读更多...
钉钉超过90天的文件需要一分钟重新激活的实现原理是什么？

钉钉超过90天的文件需要一分钟重新激活的实现原理是什么？

具体实现原理可能包括以下几点&#xff1a; 冷热数据分类&#xff1a;系统会根据文件的访问频率将文件分为热数据和冷数据两类。热数据是经常被访问的文件&#xff0c;这些文件会被存储在快速的存储设备上&#xff0c;以便快速访问。冷数据是很少被访问的文件&#xff0c;这些…
阅读更多...
2023.10.29.CODE_CHECK

2023.10.29.CODE_CHECK

阅读更多...
基于ROS发布里程计信息

基于ROS发布里程计信息

参考文档&#xff1a; navigationTutorialsRobotSetupOdom 参考博客&#xff1a; &#xff08;1&#xff09;ROS机器人里程计模型 &#xff08;2&#xff09;ROS里程计消息nav_msgs/Odometry的可视化方法 1 常用坐标系系统模型 世界坐标系是描述机器人全局信息的坐标系&#…
阅读更多...
洛谷 B2004 对齐输出 C++代码

洛谷 B2004 对齐输出 C++代码

目录 推荐专栏 题目描述 AC Code 切记 推荐专栏 http://t.csdnimg.cn/Z1tCAhttp://t.csdnimg.cn/Z1tCA 题目描述 题目网址&#xff1a;对齐输出 - 洛谷 AC Code #include<bits/stdc.h> using namespace std; typedef long long ll; int main() { int a,b,c;cin&g…
阅读更多...
【仙逆】尸阴宗始祖现身，王林修得黄泉生窍诀，阿呆惊险逃生

【仙逆】尸阴宗始祖现身，王林修得黄泉生窍诀，阿呆惊险逃生

【侵权联系删除】【文/郑尔巴金】 深度爆料最新集&#xff0c;王林终于成功筑基&#xff0c;这一集的《仙逆》动漫真是让人热血沸腾啊&#xff01;在这个阶段&#xff0c;王林展现出了他的决心和毅力&#xff0c;成功地击杀了藤厉&#xff0c;并采取了夺基大法&#xff0c;从藤…
阅读更多...
Hive On Spark 概述、安装配置、计算引擎更换、应用、异常解决

Hive On Spark 概述、安装配置、计算引擎更换、应用、异常解决

文章目录 Hadoop 安装Hive 安装Hive On Spark 与 Spark On Hive 区别Hive On SparkSpark On Hive 部署 Hive On Spark查询 Hive 对应的 Spark 版本号下载 Spark解压 Spark配置环境变量指定 Hadoop 路径在 Hive 配置 Spark 参数上传 Jar 包并更换引擎 测试 Hive On Spark解决依赖…
阅读更多...
Springboot的Container Images，docker加springboot

Springboot的Container Images，docker加springboot

Spring Boot应用程序可以使用Dockerfiles容器化&#xff0c;或者使用Cloud Native Buildpacks来创建优化的docker兼容的容器映像&#xff0c;您可以在任何地方运行。 1. Efficient Container Images 很容易将Spring Boot fat jar打包为docker映像。然而&#xff0c;像在docke…
阅读更多...
智能分析视频平台EasyCVR地图功能出现异常该如何解决？

智能分析视频平台EasyCVR地图功能出现异常该如何解决？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…
阅读更多...
41基于matlab的CNN的图像边缘提取，程序已调通，可直接运行。

41基于matlab的CNN的图像边缘提取，程序已调通，可直接运行。

基于matlab的CNN的图像边缘提取&#xff0c;程序已调通&#xff0c;可直接运行。 41matlabCNN图像边缘提取 (xiaohongshu.com)
阅读更多...
《AI时代架构师修炼之道：ChatGPT让架构师插上翅膀》

《AI时代架构师修炼之道：ChatGPT让架构师插上翅膀》

本专注于帮助架构师在AI时代 实现晋级、提高效率的图书 书中介绍了如何使用 ChatGPT 来完成架构设计的各个环节 并通过实战案例展示了ChatGPT在实际架构设计中的应用方法 关键点 1.架构设计新模式&#xff1a;让架构设计更高效、更快捷、更完美。 2.全流程解析&#xff1a;涵盖…
阅读更多...
List的add(int index,E element)陷阱，不得不防

List的add(int index,E element)陷阱，不得不防

项目场景&#xff1a; 项目中有两个List列表&#xff0c;一个是List1用来存储一个标识&#xff0c;后续会根据这个标识去重。 一个List2是用来返回对象的&#xff0c;其中对象里也有一个属性List3。现需要将重复的标识数据追加到List3 我想到的两个方案&#xff1a; 尽量不动…
阅读更多...
设计工位卡片

设计工位卡片

因为今天接到了一个设计工位卡片的任务&#xff0c;于是在这里记录一哈&#xff0c;设计卡片所需要的一些东西&#xff1a; 设计卡片的网站有以下几个可供参考&#xff1a; Canva&#xff1a;提供各种类型的卡片设计模板&#xff0c;包括圣诞贺卡、生日贺卡、感谢卡等&#x…
阅读更多...
CL_MVSNet复现可能会出现的问题汇总

CL_MVSNet复现可能会出现的问题汇总

1.最好按照说明文档要求配好python3.7和pytorch1.0 2. 【已解决】 FutureWarning: The module torch.distributed.launch is deprecated and will be removed in future. torch.distributed.launch被弃用&#xff0c;考虑使用torchrun模块进行替换。 解决方案&#xff1a; 将…
阅读更多...
pyzed.sl 突然 ImportError: DLL load failed while importing sl: 找不到指定的程序。 的解决

pyzed.sl 突然 ImportError: DLL load failed while importing sl: 找不到指定的程序。 的解决

问题描述 >>> import pyzed.sl Traceback (most recent call last):File "<stdin>", line 1, in <module> ImportError: DLL load failed while importing sl: 找不到指定的程序。解决 1 按网上说的&#xff0c;将bin文件夹下所有dll复制到py…
阅读更多...
2023年美团外卖商家数据（含销量）

2023年美团外卖商家数据（含销量）

2023年美团外卖商家、地址、电话、经纬度、起送价、月销量、评分、经营许可
阅读更多...
前端移动web高级详细解析三

前端移动web高级详细解析三

模拟移动设备&#xff0c;方便查看页面效果 屏幕分辨率 分类&#xff1a; 物理分辨率&#xff1a;硬件分辨率&#xff08;出厂设置&#xff09; 逻辑分辨率&#xff1a;软件 / 驱动设置 结论&#xff1a;制作网页参考 逻辑分辨率 视口 作用&#xff1a;显示 HTML 网页的区…
阅读更多...
数据结构：绪论（数据对象，逻辑结构，数据的运算，物理结构）

数据结构：绪论（数据对象，逻辑结构，数据的运算，物理结构）

目录 1.数据2.数据元素、数据项3.数据对象4.数据结构1.逻辑结构1.集合结构2.线性结构3.树形结构4.图状结构 2.数据的运算3.物理结构&#xff08;存储结构&#xff09;1.顺序存储2.链式存储3.索引存储4.散列存储 4.数据结构的选择 5.数据类型 1.数据 数据是信息的载体&#xff0…
阅读更多...
返利管理系统建设指南

返利管理系统建设指南

目录 引子 一、返利业务模式介绍 1. 什么是返利 2. 返利与优惠区别 3. 业务模式 4. 返利管理业务流程 二、返利系统建设说明 1. 业务架构 2. 主要功能 三、结束语 引子 返利作为供应商在商业活动开拓新市场、挖掘存量市场潜力&#xff0c;激励经销商的销售策略&…
阅读更多...
Mac/Linux类虚拟机_CrossOver虚拟机CrossOver 23.6正式发布2024全新功能解析

Mac/Linux类虚拟机_CrossOver虚拟机CrossOver 23.6正式发布2024全新功能解析

CodeWeivers 公司于今年 10 月发布了 CrossOver 23.6 测试版&#xff0c;重点添加了对 DirectX 12 支持&#xff0c;从而在 Mac 上更好地模拟运行 Windows 游戏。 该公司今天发布新闻稿&#xff0c;表示正式发布 CrossOver 23 稳定版&#xff0c;在诸多新增功能中&#xff0c;最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023