《QT从基础到进阶·六》布局及布局中的小部件排列

文章介绍了如何在Qt中使用Layout布局组件,如QVBoxLayout和QHBoxLayout,使窗口内的控件随窗口大小变化自动调整。重点讲解了垂直布局、水平布局和九宫格布局的使用方法以及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:
如果要改变窗体的大小,它内部的控件一般不随它的变化而变化,内部部件怎么随窗体的大小而改变自身的大小呢? 这里我们一般可以对窗口整体进行布局,我们要用到Layout布局部件。
Layout是一种各种UI都很长用的布局手段,Qt的就很不错,比如说GridLayout,你可以把整个窗体布局一个GridLayout,然后再往GridLayout里面放控件或者其他布局,这种布局的手段可以随窗体变化而改变布局内的控件的大小,而相对的位置不变。

1、对界面设置布局

窗口变化时窗口内的部件依然按照原排列方式铺满窗口,则只需设置窗口如下:
直接为QMainWindow设置一个局部方式即可,水平或垂直布局都可以

m_pCenterWgt = new QWidget(this);
mainLayout = new QVBoxLayout(m_pCenterWgt);       //垂直布局
mainLayout->setSpacing(10);         //控件与控件距离
mainLayout->setMargin(10);          //设置边缘间距
testBtn = new QPushButton("open", this);
…
mainLayout->addWidget(testBtn);
mainLayout->addWidget(tableView);    //添加控件
mainLayout->addStretch(); // 增加一个可伸缩空间,像是被弹簧压着,如果没有会分散很开
m_pCenterWgt->setLayout(mainLayout);        //显示垂直布局
this->setCentralWidget(m_pCenterWgt); //将widget设置为窗口的中心控件

注意:需要创建新的窗口QWidget,用这个窗口进行布局,如果用原来的窗口布局显示不出效果,因为原来的窗口已经有布局了,需要在原来窗口的Central Widget上重新布局QWidget显示控件
在这里插入图片描述

类比到word文档上为:
在这里插入图片描述
注意:任何窗口,如果已经有了QLayout对象,你再添加的时候,就不能替换原有的QLayout,不仅是QMainWIndow这样的类,qt中还有别的类也是这样,你应该使用Layout获取它内部默认的Layout,然后进行操作,或是删除之后,再添加自己的Layout

2、布局内的小部件排列
(1)垂直布局中放入小部件

QWidget* widget = new QWidget();
QPushButton* bt1 = new QPushButton("one");
QPushButton* bt2 = new QPushButton("Two");
QPushButton* bt3 = new QPushButton("Three");
QPushButton* bt4 = new QPushButton("Four");
QPushButton* bt5 = new QPushButton("Five");

QVBoxLayout* layout = new QVBoxLayout();
layout->addWidget(bt1);
layout->addWidget(bt2);
layout->addWidget(bt3);
layout->addWidget(bt4);
layout->addWidget(bt5);

widget->setLayout(layout);
widget->show();

我们先在布局中创建所需的小部件,然后创建一个垂直布局,并把所有的小部件加入到布局中。最后,调用widget的setLayout函数将布局设置到界面中。这时,布局中的小部件将重新设置父级,以将窗口作为其父级。
在这里插入图片描述

(2)布局中的空间设置

//水平居左,垂直居上,第二个参数为组件拉伸系数
pLayout->addWidget(p1,0,Qt::AlignLeft | Qt::AlignTop);
//居左,居下
pLayout->addWidget(p2,0,Qt::AlignLeft | Qt::AlignBottom);

在这里插入图片描述

水平布局自右向左排列:

QHBoxLayout* Layout = new QHBoxLayout();//水平布局
QPushButton* p1 = new QPushButton("p1");
QPushButton* p2 = new QPushButton("p2");
QPushButton* p3 = new QPushButton("p3");
QPushButton* p4 = new QPushButton("p4");
Layout->addWidget(p1);
Layout->addWidget(p2);
Layout->addWidget(p3);
Layout->addWidget(p4);
Layout->setDirection(QBoxLayout::RightToLeft);//自右向左
this->setLayout(pLayout);

在这里插入图片描述

设置拉伸系数:

QHBoxLayout* pLayout = new QHBoxLayout();//水平布局
QPushButton* p1 = new QPushButton("p1");
QPushButton* p2 = new QPushButton("p2");
QPushButton* p3 = new QPushButton("p3");
QPushButton* p4 = new QPushButton("p4");
pLayout->addWidget(p1);
pLayout->addWidget(p2);
pLayout->addWidget(p3);
pLayout->addWidget(p4);
pLayout->setStretchFactor(p1,1);//设置p1的拉伸系数为1
pLayout->setStretchFactor(p2,2);//设置p1的拉伸系数为2
this->setLayout(pLayout);

在这里插入图片描述

3、其他布局的一些使用

(1)把组件放入九宫格布局QGridLayout的指定位置:

QPushButton* b1 = new QPushButton(this);
ui.gridLayout->addWidget(b1, 1, 4); //把按钮放在布局第二行,第五列的宫格位置

假如在QGridLayout布局的某个位置已经有了一个组件,比如QGroupBox,如右下角的groupbox,我怎么通过程序把一个按钮放到这个groupbox里?
在这里插入图片描述
首先可以看到groupbox组件已经放在gridlayout布局里了,现在要做的就是先在gruopbox组件上加入一个水平布局,然后把按钮放进去

QPushButton* b1 = new QPushButton(this);
QHBoxLayout* layout = new QHBoxLayout(this);
ui.groupBox->setLayout(layout);
layout->addWidget(b1);

布局中常用的一些方法:
(1)把widget放到布局:layout()->addwidget(widget);
(2)从布局获取widget: layout()->itemAt(0)->widget();
(3)布局中widget个数: layout()->count();
(4)从布局中移除widget:layout()->removeWidget(layout()->itemAt(0)->widget()); //注意,这只是把widget从布局中移除了,但打开界面看布局中的widget还在,那是因为widget还和centralWidget有父子关系,必须断开,widget->setParent(NULL); delete widget;
(5)移除布局中除widget以外的组件,如stretch
QLayoutItem * stretch = layout()->itemAt(i);
layout()->removeItem(stretch);
(6)horizontalLayout->addStretch(1); //水平布局添加一根弹簧
(7)layout->setColumnStretch(0, 1); //九宫格0行放置一根弹簧
(8)horizontalLayout->insertWidget(0, slider); //改变布局里组件的排放循序,0位置插入滑块

在这里插入图片描述

📢博客主页: 主页
📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!
📢本文由 梦回阑珊 原创,首发于 优快云,转载注明出处🙉
📢代码改变世界,你来改变代码!✨

### 回答1: 语法错误:错误:找不到模块'cache-loader'。 这个错误通常是由于缺少依赖项或安装不正确的模块引起的。您可以尝试重新安装缺少的模块或更新您的依赖项。如果问题仍然存在,请检查您的代码并确保正确导入了所需的模块。 ### 回答2: 发生此错误,说明在 Node.js 应用程序中引用了 'cache-loader' 模块,但 Node.js 无法找到此模块。故此错误出现通常有以下原因: 1. 模块没有正确安装:'cache-loader' 模块可能没有被正确地安装。 解决方法:使用 npm install cache-loader -g 命令全局安装此模块。 2. 模块被误删除:如果曾经安装过 'cache-loader' 模块,但删除了它,可能会导致这个错误。 解决方法:重新安装 'cache-loader' 模块即可。 3. Node.js 环境版本问题:'cache-loader' 模块需要 Node.js 环境支持,如果使用的 Node.js 版本不兼容,则会提示找不到模块。 解决方法:升级或降级 Node.js 环境即可。 4. 项目依赖不一致:项目中的其他依赖可能不兼容 'cache-loader' 模块,导致找不到此模块。 解决方法:尝试升级或降级项目中的其他依赖以解决依赖不一致问题。 总之,如果遇到此错误,最好确定 'cache-loader' 模块是否存在,如果存在,则需要查明问题的具体原因,并采取适当的解决方法。 ### 回答3: 该错误是因为在使用Webpack构建时,无法找到所需的模块“cache-loader”。这个模块通常是用来加速Webpack构建时间的。所以当我们试图使用缓存时,却找不到该模块时,就会出现这种错误。 如果出现这种错误,通常可以通过以下步骤来解决: 第一步是确认是否已经安装了“cache-loader”模块。如果没有安装,则需要使用npm命令来安装该模块。在终端中进入项目根目录,执行以下命令:npm install cache-loader --save-dev。 第二步是检查项目中是否存在依赖该模块的代码。如果没有,则需要在Webpack配置文件中将其删除。如果存在,则需要将其正确地引入到Webpack配置中。在Webpack配置文件中找到与该模块相关的配置项,将其添加到“module.rules”或“module.loaders”中。 第三步是重新启动Webpack构建,并确认是否还出现该错误。如果该错误仍然存在,则需要进一步排除问题。可以尝试升级或回滚该模块的版本,或尝试删除缓存和重新安装依赖项等方法。 总之,要解决这个错误,我们需要了解Webpack的基本概念和配置,掌握一些基本的调试技巧,以及有耐心、仔细地排除问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

梦回阑珊

一毛不嫌多,一分也是爱

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

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

打赏作者

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

抵扣说明:

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

余额充值