【Qt】常用控件（十八）QVBoxLayout，QHBoxLayout的属性和使用，布局管理器之间的嵌套

小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、QVBoxLayoutQVBoxLayout的属性使用QVBoxLayout管理多个控件代码实现图形化实现二、QHBoxLayoutQHBoxLayout的属性使用QHBoxLayout管理多个控件三、布局管理器之间的嵌套总结前言【Qt】常用控件十七QGroupBoxQTabWidget的属性和使用——书接上文 详情请点击——本文由小编为大家介绍——【Qt】常用控件十八QVBoxLayoutQHBoxLayout的属性和使用一、QVBoxLayoutQVBoxLayout的属性那么我们之前把控件放在界面上都是通过代码或者拖拽这类手动的方式来进行布局的这种通过手动调整的方式是不科学的为什么呢1首先手动布局的方式较为复杂并且不精确并且如果小编对Widget窗口进行调整大小2Widget窗口内的控件并不能根据Widget窗口的大小来适当的调整大小即Widget窗口内的控件的大小是固定的当Widget窗口大小改变的时候不能自适应的调整控件本身的大小进而造成控件在Widget界面上显示不完全或者显示不出来等情况而Qt中针对这种问题提供了解决方案那么就是使用布局管理器布局管理器分为四种对于如下这四种布局管理器仅仅是用于布局所以并没有提供信号1垂直布局管理器让控件自适应的垂直分布2水平布局管理器让控件自适应的水平分布3网格布局管理器让控件在水平和竖直方向自适应分布4表单布局管理器让控件在水平和竖直方向自适应分布那么竖直方向上有两列控件水平方向上可以有很多行控件下面我们先来学习一下垂直布局管理器QVBoxLayout的相关属性1layoutLeftMargin垂直布局管理器内控件距离左侧的边距2layoutRightMargin垂直布局管理器内控件距离右侧的边距3layoutTopMargin垂直布局管理器内控件距离上侧的边距4layoutBottomMargin垂直布局管理器内控件距离下侧的边距5layoutSpacing垂直布局管理器内控件和控件之间的距离使用QVBoxLayout管理多个控件代码实现那么垂直布局管理器长什么样子又该如何使用呢又该如何管理的多个控件呢所以接下来我们创建一个项目名为QVBoxLayout基类为QWidget派生类为Widget的项目#includewidget.h#includeui_widget.h#includeQPushButton#includeQVBoxLayoutWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*button1newQPushButton();button1-setText(按钮1);QPushButton*button2newQPushButton();button2-setText(按钮2);QPushButton*button3newQPushButton();button3-setText(按钮3);QVBoxLayout*layoutnewQVBoxLayout(this);layout-addWidget(button1);layout-addWidget(button2);layout-addWidget(button3);}Widget::~Widget(){deleteui;}所以此时我们期望创建三个按钮然后使用垂直布局管理器将三个按钮管理起来那么在Widget的构造函数中我们先创建三个按钮然后分别使用setText给按钮设置对应的文本这里值得注意的是我们并没有给三个按钮传入this指针指定三个按钮的父元素为Widget窗口这是为什么呢因为我们要使用垂直布局管理器将三个按钮管理起来所以也就意味着要将三个按钮添加到垂直布局管理器中换句话来说三个按钮的父元素应该是垂直布局管理器那么接下来我们创建垂直布局管理器然后传入WIdget窗口对应的this指针指定垂直布局管理器的父元素为Widget窗口这一步其实就是将垂直布局管理器添加到Widget窗口中然后我们要使用垂直布局管理器将三个按钮管理起来所以就要将三个按钮添加到垂直布局管理器中所以使用addWidget就可以将三个按钮添加到垂直布局管理器中运行结果如下所以此时Widget界面上就有了三个按钮并且这三个按钮的位置我们并没有进行设置尺寸我们也并没有进行设置 关于位置和尺寸在第一点QWidget的geometry中的geometry中进行的讲解详情请点击——这三个按钮是处于垂直布局管理器中并且呈现垂直分布那么我们可以看到随着小编拖动Widget窗口的大小那么处于垂直布局管理器中的三个按钮自动的调整自己的位置和尺寸去自适应Widget窗口的大小那么我们也要意识到由于三个按钮已经被垂直布局管理器管理起来了自适应根据Widget窗口的大小调整自己的位置和尺寸所以诸如setGeometrymoveresize等调整位置和尺寸的方法就会失效无法起到作用的#includewidget.h#includeui_widget.h#includeQPushButton#includeQVBoxLayoutWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);QPushButton*button3newQPushButton(按钮3);QVBoxLayout*layoutnewQVBoxLayout();this-setLayout(layout);layout-addWidget(button1);layout-addWidget(button2);layout-addWidget(button3);}Widget::~Widget(){deleteui;}其实如果要给按钮设置文本我们也可以不使用setText的方式而是直接在按钮的构造函数中直接进行传参因为按钮的构造函数有进行重载的QString版本所以我们直接将要给按钮设置的文本在构造函数中进行传参即可同样的如果要给一个Widget窗口使用代码的方式设置布局管理器也就是要指定布局管理器的父元素是Widget窗口对应的this指针但是我们通常采用的方法并不是在布局管理器的构造函数中传入this指针的这种方式进行设置而是使用this指针调用setLayout设置布局管理器如上运行结果如下这三个按钮是处于垂直布局管理器中并且呈现垂直分布那么我们可以看到随着小编拖动Widget窗口的大小那么处于垂直布局管理器中的三个按钮自动的调整自己的位置和尺寸去自适应Widget窗口的大小无误其实每个Widget窗口中只能设置一个布局管理器而通过代码的方式也就是只能在Widget窗口中设置一个布局管理器那么如果想要设置多个布局管理器就要通过图形化的方式实现图形化实现上述是通过代码实现的使用QVBoxLayout管理多个控件其实我们也可以通过图形化的方式实现使用QVBoxLayout管理多个控件所以接下来我们创建一个项目名为QVBoxLayout基类为QWidget派生类为Widget的项目接下来我们点击ui文件进入Qt Designer所以此时我们拖拽左侧红框内的控件Vertical Layout拖拽两个到Widget窗口上不对呀小编你前面不是讲的是一个Widget窗口上只能设置一个布局管理器吗为什么这里的Widget窗口上可以设置两个布局管理器呢所以此时我们点击左侧编辑进入ui文件探寻一下真相而在ui文件中我们可以看出如果在Qt Designer通过图形化方式创建的QVBoxLayout要先创建一个QWidget窗口然后在这个QWidget窗口中添加QVBoxLayout换句话来说主界面是一个Widget窗口当我们通过图形化的方式创建QVBoxLayout那么就要先在主界面对应的Widget窗口下创建QWidget窗口然后再在QWidget窗口下添加QVBoxLayout对的Widget窗口下是可以嵌套QWidget窗口的所以既然Widget窗口下可以有多个QWidget窗口而在这些QWidget窗口内部添加QVBoxLayout此时就可以实现一个主界面对应的Widget窗口下可以有多个QVBoxLayout垂直布局管理器此时我们再回过头思考如何使用代码的方式在一个主界面对应的Widget窗口下创建多个QVBoxLayout垂直布局管理器呢我们在代码中创建了一个QVBoxLayout垂直布局管理器其实是仅仅创建了一个QVBoxLayout垂直布局管理器所以此时一个Widget窗口下只能包含一个QVBoxLayout垂直布局管理器那么如果我们也给Widget窗口下也创建多个QWidget窗口那么我们继续在QWidget下添加QVBoxLayout垂直布局管理器此时也可以以代码的方式实现一个主界面对应的Widget窗口下可以有多个QVBoxLayout垂直布局管理器那么如上此时我们在左侧拖拽一个一个的按钮到两个布局管理器中可以看到按钮一放到布局管理器中那么此时就会在布局管理器内自动适应布局管理器的大小并且按钮放置的顺序可以调整很完美运行结果如下所以此时确实两个布局管理器内部的三个按钮被放在的恰当的位置但是此时如果小编拖拽主窗口Widget的大小那么此时两个布局管理器内部三个按钮并没有根据主窗口Widget的大小调整而做出位置和尺寸的变化这是为什么呢那么我们要理解三个按钮是相对于两个布局管理器的那么布局管理器的作用是让布局管理器内的控件相对于布局管理器所在的窗口进行自适应的调整位置和尺寸所以这里的窗口是什么呢这里的窗口是QWidget窗口而QWidget窗口是位于主界面对应的Widget窗口上的QWidget窗口虽然我们拖拽改变了主界面对应的Widget窗口的大小但是QWidget窗口的大小改变吗没有QWidget窗口的位置和尺寸仍然没有改变所以自然的QWidget窗口内的两个布局管理器内部的三个按钮也自然不会自适应的调整位置和尺寸了所以此时我们再来看一下垂直布局管理器和其它控件的关系垂直布局管理器外面创建了QWidget窗口QWidget窗口外面是主界面对应的Widget窗口垂直布局管理器内部是三个按钮那么我们刚刚是先将垂直布局管理器拖过去然后再向垂直布局管理器中添加的多个控件那么我们是否可以先将控件拖过去然后再给这些控件套上垂直布局管理器呢其实是可以的如下首先如上我们在左侧拖拽三个按钮Push Button那么小编调整任意大小随意放置位置此时我们通过上图中最上方中间的小红框内对应的三个横杠按钮这个按钮实现给三个按钮套上垂直布局管理器所以此时小编使用鼠标左键长按选中三个按钮然后点击中最上方中间的小红框内对应的三个横杠按钮那么这个三条横杠按钮对应的作用就是将若干选中的控件外面套上一个垂直布局管理器那么一点击此时三个按钮就被自动放到了垂直布局管理器中并且自适应垂直布局管理器对应的QWidget窗口的大小此时小编拖拽QWidget窗口的大小可以看到三个按钮是可以进行自适应调整位置和尺寸的接下来小编运行程序那么拖拽主界面对应的Widget窗口大小此时主界面Widget上垂直布局管理器内部的三个按钮并没有随着主界面对应的Widget窗口大小的调整而自适应调整自身的位置和尺寸为什么呢那么也很好理解这个小编前面已经解释过了简单来讲垂直布局管理器内部的三个按钮是要随着垂直布局管理器外的QWidget窗口自适应的调整自身的大小而QWidget窗口的大小并不会随着QWidget窗口外部的主界面Widget窗口的大小改变而进行改变即QWidget窗口的大小是固定的所以垂直布局管理器内部的三个按钮并不会随着主界面对应的Widget窗口大小的调整而自适应调整自身的位置和尺寸接下来其实我们还可以选中垂直布局管理器3然后在右边可以调整对应的属性例如将垂直布局管理器内控件的左边距修改为10像素所以此时我们可以修改layoutLeftMargin为10同样的我们也可以调整垂直布局管理器内控件的右边距修改为10像素所以此时我们可以修改layoutRightMargin为10 那么此时如上图垂直布局管理器3和垂直布局管理器1和2中控件的左边距和右边距就可以很明显的看出不同同样的我们可以调整上边距下边距以及控件之间的边距等都可以根据实际需要去进行调整二、QHBoxLayoutQHBoxLayout的属性QHBoxLayout是水平布局管理器其中的H是horizontal水平的缩写那么关于水平布局管理器的相关属性其实是和垂直布局管理器是一致的如下1layoutLeftMargin水平布局管理器内控件距离左侧的边距2layoutRightMargin水平布局管理器内控件距离右侧的边距3layoutTopMargin水平布局管理器内控件距离上侧的边距4layoutBottomMargin水平布局管理器内控件距离下侧的边距5layoutSpacing水平布局管理器内控件和控件之间的距离使用QHBoxLayout管理多个控件那么水平布局管理器长什么样子又该如何使用呢又该如何管理的多个控件呢所以接下来我们创建一个项目名为QHBoxLayout基类为QWidget派生类为Widget的项目#includewidget.h#includeui_widget.h#includeQPushButton#includeQHBoxLayoutWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QHBoxLayout*layoutnewQHBoxLayout();this-setLayout(layout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);QPushButton*button3newQPushButton(按钮3);layout-addWidget(button1);layout-addWidget(button2);layout-addWidget(button3);}Widget::~Widget(){deleteui;}其实对于使用水平布局管理器去管理多个控件和使用垂直布局管理器去管理多个控件的思路是一致的那么这里小编就简要讲解了首先我们创建QHBoxLayout水平布局管理器然后通过this指针调用setLayout将QHBoxLayout水平布局管理器添加到主界面对应的Widget窗口中接下来创建三个按钮并设置文本接下来调用addWidget将三个按钮添加到QHBoxLayout水平布局管理器中即可运行结果如下这三个按钮是处于水平布局管理器中并且呈现水平分布那么我们可以看到随着小编拖动Widget窗口的大小那么处于水平布局管理器中的三个按钮自动的调整自己的位置和尺寸去自适应Widget窗口的大小无误三、布局管理器之间的嵌套其实布局管理器内不仅仅可以放入我们之前学习的控件例如按钮标签单行输入框等其实布局管理器内还可以放入布局管理器实现更复杂的功能所以接下来我们创建一个项目名为QHBoxLayout基类为QWidget派生类为Widget的项目所以如上我们想让Widget窗口中放垂直布局管理器然后在垂直布局管理器中放两个按钮然后再放入一个水平布局管理器而水平布局管理器内部再放入两个按钮总体上是垂直布局管理器嵌套水平布局管理器垂直布局管理界面中的控件是按照垂直分布的那么也就是说按钮按钮水平布局管理器这三个控件是垂直分布在吹瓶管理器内部的两个按钮是水平分布的#includewidget.h#includeui_widget.h#includeQPushButton#includeQVBoxLayout#includeQHBoxLayoutWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QVBoxLayout*vlayoutnewQVBoxLayout();this-setLayout(vlayout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);vlayout-addWidget(button1);vlayout-addWidget(button2);QHBoxLayout*hlayoutnewQHBoxLayout();QPushButton*button3newQPushButton(按钮3);QPushButton*button4newQPushButton(按钮4);hlayout-addWidget(button3);hlayout-addWidget(button4);vlayout-addLayout(hlayout);}Widget::~Widget(){deleteui;}那么在Widget的构造函数中首先我们创建垂直布局管理器然后通过this指针调用setLayout将垂直布局管理器添加到主界面对应的Widget窗口中接下来我们创建两个按钮并设置文本将这个两个按钮通过addWidget添加到垂直布局管理器中接下来我们创建一个水平布局管理器然后我们在创建两个按钮并设置文本将这个两个按钮通过addWidget添加到水平布局管理器中此时我们再通过addLayout将水平布局管理器添加到垂直布局管理器中此时就实现了布局管理器之间的嵌套运行结果如下这三个控件也就是按钮按钮水平布局管理器是处于垂直布局管理器中的并且呈现垂直分布没有问题那么我们可以看到随着小编拖动Widget窗口的大小那么处于垂直布局管理器中的三个按钮自动的调整自己的位置和尺寸去自适应Widget窗口的大小无误那么我们有没有想过一个问题为什么处于水平布局管理器的两个按钮也会随着小编拖动Widget窗口的大小进而调整调整自身的位置和尺寸去自适应Widget窗口的大小呢那么本质上是由于处于水平布局管理器的两个按钮是处于水平布局管理器中我们知道我们通过代码的方式创建了垂直布局管理器并且添加到了主界面对应的Widget窗口中那么此时的垂直布局管理器内的控件是会随着Widget窗口的改变而自适应的调整自己的位置和尺寸的我们要意识到水平布局管理器也是处于垂直布局管理器内的一个控件所以水平布局管理器也要随着Widget窗口的改变而自适应的调整自己的位置和尺寸的其实这里的水平管理器内部的两个按钮的位置和尺寸的计算本质其实是递归式的计算位置和尺寸最外部主界面Widget大小的改变由垂直布局管理器分配给水平管理器的空间大小水平布局管理器内的两个按钮控件是根据分配给水平管理器的控件进行计算位置和尺寸的但是这里为了便于理解我们可以想象垂直布局管理器给水平布局管理器分配了一个QWidget窗口所以此时QWidget窗口的大小改变那么自然的作为水平布局管理器内的两个按钮也自然的需要调整自身的位置和尺寸去适应QWidget窗口的改变总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路