Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)

原创 2016年05月30日 13:28:09

简述

QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout、QVBoxLayout所继承。

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

通过查看源码,我们可以发现,水平布局、垂直布局除了构造时的方向(LeftToRight、TopToBottom)不同外,其它均相同。

下面我们以QHBoxLayout为例,来讲解QBoxLayout的常用功能。

使用

下面介绍下水平布局的基本使用。

效果

这里写图片描述

源码

下面,我们创建5个按钮,然后添加至水平不居中。

QPushButton *pButton1 = new QPushButton("One");
QPushButton *pButton2 = new QPushButton("Two");
QPushButton *pButton3 = new QPushButton("Three");
QPushButton *pButton4 = new QPushButton("Four");
QPushButton *pButton5 = new QPushButton("Five");

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);

setLayout(pHLayout);

常用接口

我们可以看到,默认的外边距为0,为了美观性我们可以设置下Margin。

  • setMargin(int)
  • setContentsMargins(int left, int top, int right, int bottom);
  • setContentsMargins(const QMargins &margins)
    设置外边距

setMargin可以设置左、上、右、下的外边距,设置之后,他们的外边距是相同的。
setContentsMargins与其功能相同,但是可以将左、上、右、下的外边距设置为不同的值。

这里我使用setMargin(10)将外边距设置为10。

这里写图片描述


  • setSpacing(int)
    设置间距

一般情况下,会有一个默认间距值,为了保持所有布局的统一性,或者你需要一个更合适的间距值,则需要手动设置。

这里我使用setSpacing(0)将间距设置为0。

这里写图片描述


  • addStretch()
    添加了一个伸缩空间(QSpacerItem)。

居右

这里写图片描述

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

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch();  // 添加伸缩
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);

居左

这里写图片描述

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

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);
pHLayout->addStretch();  // 添加伸缩

居中

这里写图片描述

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

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch();  // 第一个控件之前添加伸缩
pHLayout->addWidget(pButton1);
pHLayout->addWidget(pButton2);
pHLayout->addWidget(pButton3);
pHLayout->addWidget(pButton4);
pHLayout->addWidget(pButton5);
pHLayout->addStretch();  // 最后一个控件之后添加伸缩
pHLayout->setSpacing(10);

均分

这里写图片描述

在每一个控件之间都添加伸缩,这样所有的控件之间的间距都会相同。

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch();
pHLayout->addWidget(pButton1);
pHLayout->addStretch();
pHLayout->addWidget(pButton2);
pHLayout->addStretch();
pHLayout->addWidget(pButton3);
pHLayout->addStretch();
pHLayout->addWidget(pButton4);
pHLayout->addStretch();
pHLayout->addWidget(pButton5);
pHLayout->addStretch();
pHLayout->setSpacing(0);

  • addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0)
    添加控件

默认的,我们添加控件至水平布局中,默认都是垂直方向居中对齐的。

例如:

这里写图片描述

其中有控件大小不相同的时候就会看得很明显了,如果我们需要将其中的某些控件居上、居下显示,那么可以使用对齐方式Qt::Alignment。

下面,我们使用向上、向下对齐来设置其它控件。

这里写图片描述

QHBoxLayout *pHLayout = new QHBoxLayout();
pHLayout->addStretch();
// 水平居左 垂直居上
pHLayout->addWidget(pButton1, 0 , Qt::AlignLeft | Qt::AlignTop);
pHLayout->addWidget(pButton2, 0 , Qt::AlignLeft | Qt::AlignTop);
pHLayout->addWidget(pButton3);
// 水平居左 垂直居下
pHLayout->addWidget(pButton4, 0 , Qt::AlignLeft | Qt::AlignBottom);
pHLayout->addWidget(pButton5, 0 , Qt::AlignLeft | Qt::AlignBottom);
pHLayout->setSpacing(10);

  • setDirection(Direction)
    设置布局方向

可以设置从左到右、从右到左、从上到下、从下到上等。。。

setDirection(QBoxLayout::RightToLeft)

这里写图片描述

setDirection(QBoxLayout::TopToBottom);

这里写图片描述

既然使用了QHBoxLayout,一般就不建议使用TopToBottom或者BottomToTop,如果实在确定不了方向,或者方向可以随意变化,那么建议使用QBoxLayout。


  • setStretchFactor(QWidget *w, int stretch);
  • setStretchFactor(QLayout *l, int stretch);
    设置控件、布局的拉伸系数

当窗体大小变化时,控件会根据拉伸系数来做相应的调整。

这里写图片描述

setStretchFactor(pButton1, 1);
setStretchFactor(pButton2, 2);

设置pButton1的拉伸系数为1,pButton2拉伸系数为2,当窗体变大时,会优先将pButton2进行拉伸,当达到一定程度时,再拉伸pButton1,pButton1与pButton2的宽度比例为1:2。

总结

上面介绍了基本所有常用的接口使用,还有一些inset…接口,和它们功能相同,只不过是需要传递控件所在的索引index。常用的这些接口掌握了,其它布局QVBoxLayout、QGridLayout功能也相同或类似,一通百通。

版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣、好玩、靠谱。。。作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820

相关文章推荐

Qt入门-layout布局

开发一个图形界面应用程序,界面的布局影响到界面的美观。在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小、纵横比例、分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这...
  • xgbing
  • xgbing
  • 2012年07月19日 18:40
  • 54804

基本布局-QHBoxLayout类、QVBoxLayout类、QGridLayout类

(1)新建Qt Widget Application,项目名UserInfo,基类QDialog,取消创建界面; (2)打开dialog.h头文件,在头文件中声明对话框中的各个控件,添加代码#ifn...

PyQt之QHBoxLayout、QVBoxLayout 与QGridLayout

一. QHBoxLayout 先来看官方对QHBoxLayout 是怎样介绍的,原文如下: The QHBoxLayout class lines up widgets horizont...

Qt 窗体布局

布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置。Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackL...

QT布局管理器(QVBoxLayout,QHBoxLayout)不同部分比例大小设置方法

QT布局管理器(QVBoxLayout,QHBoxLayout)不同部分比例大小设置方法     默认情况如果将多个控件加入到QT的布局管理器中(QVBoxLayout、QHBoxLayout)所...
  • qinpanke
  • qinpanke
  • 2016年03月22日 10:18
  • 12253

QT4:水平布局管理器QHBoxLayout

 创建一个窗体并排摆放一个按钮一个标签,使他们能够随着窗体的水平缩放而缩放。实现这个功能需要使用布局管理器中的QHBoxLay进行布局,把这连个组件放入QHBoxlayout中。 #include #...
  • lhfeng
  • lhfeng
  • 2007年10月12日 11:36
  • 9898

QT QGridLayout QHBoxLayout QVBoxLayout 布局管理器运用

最近在学习QT编程,在百度贴吧中看到有人问关于窗口布局的问题 结合最近学到的东西 用代码实现了下该功能 http://tieba.baidu.com/p/2473655082  Q...
  • ziyi_bj
  • ziyi_bj
  • 2013年10月11日 11:49
  • 1363

qboxlayout与qt布局(一)

说实在的,qlayout的确很好用。不过,发觉用得越多就越是疑惑。例如动不动,它里面的控件就迭在一起了。唉,忍无可忍了,只好去分析下下它的源码罗~ qt有个叫做qGeomCalc()的函数,qbox...
  • jjjlike
  • jjjlike
  • 2012年07月24日 13:01
  • 1725

qboxlayout与qt布局(二)

一直被QLayout::setSizeConstraint()搞得很头大。其实,很大部分原因只能怪小弟我英文水平不过关,因为qt文档里已经说明得够清楚的了。如下: enum QLayout::Siz...
  • jjjlike
  • jjjlike
  • 2012年07月30日 12:11
  • 5084

Qt布局详解

界面开发首先要对整个界面进行布局,使窗体上的所有的控件必须有一个合适的尺寸和位置。那么做出来的界面才看起来美观。 那么如何对界面进行布局呢?Qt提供了一些类负责排列窗体上的控件,主要有:QHBo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)
举报原因:
原因补充:

(最多只允许输入30个字)