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

简述

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功能也相同或类似,一通百通。

时间: 2024-09-21 20:29:36

Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)的相关文章

android-设置布局的水平垂直中心

问题描述 设置布局的水平垂直中心 在XML布局文件中有scrollview <ScrollView android:id=""@+id/container"" android:layout_width=""match_parent"" android:layout_height=""match_parent"" android:layout_marginLeft="&qu

Qt之表单布局(QFormLayout)

简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:QLineEdit.QSpinBox等. 简述 使用 常用接口 总结 使用 我们可以通过addRow(const QString &labelText, QWidget *field)来创建一个带有给定文本的QLabel及QWidget控件行,它们可以自动的设置为伙伴关系. QFormLayout *

CollectionView缩放水平卡片布局

概述 本篇一起来学习如何使用UICollectionView来实现水平滚动的缩放式卡片布局,就像Nice App中的卡片布局. 前一篇中讲了如何实现CollectionView旋转水平卡片布局,如果还没有阅读过,不防先看看再继续往下阅读. 实现效果 实现思路 从Demo效果图中,可以看出来,主要是缩放系数的计算.对于不同距离的cell,其缩放系数要变化,以便整体协调显示. 所以,我们必须重写-layoutAttributesForElementsInRect:方法来实现所有当前可见的cell的a

t窗口布局-Qt用QSplitter窗口布局初始化每一块大小

问题描述 Qt用QSplitter窗口布局初始化每一块大小 我在使用QSplitter进行窗口布局的时候发现当splitter->addWidget(QWidget*) 里面的对象为 QWidget的时候无法通过setStretch()来控制窗口初始化的时候每一块被splitt分的的大小,请教下我该怎么处理 QSplitter* splitter = new QSplitter(Qt::Vertical); QWidget* widget1 = new QWidget; QWidget* wid

jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

1QPushButton的使用,QLineEdit的使用,设置组件位置,布局(QHBoxLayout,QGridLayout)

 1.新建一个空Qt项目 2 新建一个新的文件(右击项目à添加新文件) 3 配置pro文件属性 SOURCES += \     main.cpp QT += widgets gui 4 编写main.cpp /*应用程序抽象类*/ #include <QApplication> /*窗口类*/ #include <QWidget> /*按钮*/ #include <QPushButton>   int main(int argc,char *argv[]) {  

对分区表导入导出的水平,垂直切分

在工作中有时候碰到一些分区表,业务数据量很大,可能几百G,上T的规模,而且做数据的导入导出的时候,会感觉到exp/expdp的时候生成的dump文件太大了,做导入的时候也是很重的负担.比如500G的dump,你在使用imp做导入的时候,别无选择,只能看着日志里partition里的数据一个一个被导入.impdp可能稍微好点,还能指定个并行,但是问题又来了,一个500G的dump.impdp是在最后才做commit.对于数据空间和Undo,cpu资源都是挑战. 分区表有一个地方和普通表不同,对于每

CollectionView旋转水平卡片布局

概述 UICollectionView真的好强大,今天我们来研究一下这种很常见的卡片动画效果是如何实现了.本篇不能太深入地讲解,因为笔者也是刚刚摸索出点眉目,但是并没有深刻地理解.如果在讲解过程中,出现不对的地方,请及时反馈. 效果图 重写API 1 2 3 4 5 6 7 8 9 10 11 12   // 我们必须重写此方法,指定布局大小 // 每次layout invalidated或者重新query布局信息时,会调用 - (void)prepareLayout;   // 用于决定布局信

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div强迫向上移动div高度一半,向左移动div宽度一半 <style> html,body{padding:0;margin:0;} #container {  position:absolute;  left:50%;  width:400px;  height:200px;  margin-left:-200px;  top:50%;  mar