Qt之格栅布局(QGridLayout)

原创 2016年05月30日 15:17:20

简述

QGridLayout:格栅布局,也被称作网格布局(多行多列)。

栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列,并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的:

它计算了位于其中的空间,然后将它们合理的划分成若干个行(row)和列(column),并把每个由它管理的窗口部件放置在合适的单元之中,这里所指的单元(cell)即是指由行和列交叉所划分出来的空间。

在栅格布局中,行和列本质上是相同的,只是叫法不同而已。下面将重点讨论列,这些内容当然也适用于行。

在栅格布局中,每个列(以及行)都有一个最小宽度(使用setColumnMinimumWidth()设置)以及一个伸缩因子(使用setColumnStretch()设置)。最小宽度指的是位于该列中的窗口部件的最小的宽度,而伸缩因子决定了该列内的窗口部件能够获得多少空间。

详细描述

一般情况下我们都是把某个窗口部件放进栅格布局的一个单元中,但窗口部件有时也可能会需要占用多个单元。这时就需要用到addWidget()方法的一个重载版本,原型如下:

  • void addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0);

这个单元将从row和column开始,扩展到rowSpan和columnSpan指定的倍数的行和列。如果rowSpan或columnSpan的值为-1,则窗口部件将扩展到布局的底部或者右边边缘处。

在创建栅格布局完成后,就可以使用addWidget(),addItem(),以及addLayout()方法向其中加入窗口部件,以及其它的布局。

使用

下面我们以企鹅为例,来讲解如何使用QGridLayout。

效果

这里写图片描述

源码

// 构建控件 头像、用户名、密码输入框等
QLabel *pImageLabel = new QLabel(this);
QLineEdit *pUserLineEdit = new QLineEdit(this);
QLineEdit *pPasswordLineEdit = new QLineEdit(this);
QCheckBox *pRememberCheckBox = new QCheckBox(this);
QCheckBox *pAutoLoginCheckBox = new QCheckBox(this);
QPushButton *pLoginButton = new QPushButton(this);
QPushButton *pRegisterButton = new QPushButton(this);
QPushButton *pForgotButton = new QPushButton(this);

pLoginButton->setFixedHeight(30);
pUserLineEdit->setFixedWidth(200);

// 设置头像
QPixmap pixmap(":/Images/logo");
pImageLabel->setFixedSize(90, 90);
pImageLabel->setPixmap(pixmap);
pImageLabel->setScaledContents(true);

// 设置文本
pUserLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));
pPasswordLineEdit->setPlaceholderText(QStringLiteral("密码"));
pPasswordLineEdit->setEchoMode(QLineEdit::Password);
pRememberCheckBox->setText(QStringLiteral("记住密码"));
pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));
pLoginButton->setText(QStringLiteral("登录"));
pRegisterButton->setText(QStringLiteral("注册账号"));
pForgotButton->setText(QStringLiteral("找回密码"));

QGridLayout *pLayout = new QGridLayout();
// 头像 第0行,第0列开始,占3行1列
pLayout->addWidget(pImageLabel, 0, 0, 3, 1);
// 用户名输入框 第0行,第1列开始,占1行2列
pLayout->addWidget(pUserLineEdit, 0, 1, 1, 2);
pLayout->addWidget(pRegisterButton, 0, 4);
// 密码输入框 第1行,第1列开始,占1行2列
pLayout->addWidget(pPasswordLineEdit, 1, 1, 1, 2);
pLayout->addWidget(pForgotButton, 1, 4);
// 记住密码 第2行,第1列开始,占1行1列 水平居左 垂直居中
pLayout->addWidget(pRememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
// 自动登录 第2行,第2列开始,占1行1列 水平居右 垂直居中
pLayout->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
// 登录按钮 第3行,第1列开始,占1行2列
pLayout->addWidget(pLoginButton, 3, 1, 1, 2);
// 设置水平间距
pLayout->setHorizontalSpacing(10);
// 设置垂直间距
pLayout->setVerticalSpacing(10);
// 设置外间距
pLayout->setContentsMargins(10, 10, 10, 10);
setLayout(pLayout);

常用接口

  • addWidget(QWidget *, int row, int column, Qt::Alignment = 0)
  • addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0)
    添加窗口部件至布局。

这个单元将从row和column开始,扩展到rowSpan和columnSpan指定的倍数的行和列。如果rowSpan或columnSpan的值为-1,则窗口部件将扩展到布局的底部或者右边边缘处,Qt::Alignment为对齐方式。

-addLayout(QLayout *, int row, int column, Qt::Alignment = 0)
-addLayout(QLayout *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = 0)

和addWidget类似,这个是添加布局。


  • setRowStretch(int row, int stretch)
  • setColumnStretch(int column, int stretch)
    设置行/列的伸缩空间

和QBoxLayout的addStretch功能类似。


  • setSpacing(int spacing)
  • setHorizontalSpacing(int spacing)
  • setVerticalSpacing(int spacing)
    设置间距

setSpacing()可以同时设置水平、垂直间距,设置之后,水平、垂直间距相同。
setHorizontalSpacing()、setVerticalSpacing()可以分别设置水平间距、垂直间距。


  • setRowMinimumHeight(int row, int minSize)
    设置行最小高度

  • setColumnMinimumWidth(int column, int minSize)
    设置列最小宽度


  • columnCount()
    获取列数

  • rowCount()
    获取行数


  • setOriginCorner(Qt::Corner)
    设置原始方向

    和QBoxLayout的setDirection功能类似。

总结

当界面元素较为复杂时,应毫不犹豫的尽量使用栅格布局,而不是使用水平和垂直布局的组合或者嵌套的形式,因为在多数情况下,后者往往会使“局势”更加复杂而难以控制。栅格布局赋予了界面设计器更大的自由度来排列组合界面元素,而仅仅带来了微小的复杂度开销。

当要设计的界面是一种类似于两列和若干行组成的形式时,使用表单布局要比栅格布局更为方便些。

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

相关文章推荐

QGridLayout用法

刚开始用Qt布局管理的时候,发现界面管理没有先前认为的那样简单了,布局中控件的对齐、大小、间距等,都需要在代码中设置。但是当你用熟了这些设置,Qt的界面管理就变成一件轻松愉快的事情了。。。 先看代码...

动态修改QGridLayout

项目的图片浏览中需要单图、双图、四图等显示模式,之前使用QGraphicsScene显示多种图片,但这种方式扩展性不佳。当我们需要将每个图片组件包装成QWidget时,使用QGrapchicsScen...

关于Qt-QGridLayout布局的简单使用

注:此文是从我的QQ空间里移出来的,因为觉的用那么多空间,blog了太累了,它发表于   2010年01月07日 09:35 -------------------------------------...

QT学习 之 布局(一) QGridLayout

#include #include #include #include #include #include void setLayout2p1(QGridLay...

[Qt练习]QGridLayout

#include #include #include #include int main(int argc, char **argv) { QApplication app(argc...
  • ruglcc
  • ruglcc
  • 2012年09月14日 16:32
  • 13790

pyqt4文档阅读(6):QGridLayout

QGridLayout

关于Qt-QGridLayout布局的简单使用

分类: QT 2010-12-04 17:59 1791人阅读 评论(0) 收藏 举报 注:此文是从我的QQ空间里移出来的,因为觉的用那么多空间,blog了太累了,它发表于  ...

QGridLayout按比例设定布局

如何使用代码控制QGridLayout中的窗体比例呢? 有两个函数可以用上: QGridLayout::setColumnStretch(列码, 比例值); QGridLayout::setRo...

Qt之格栅布局(QGridLayout)

 简述 QGridLayout:格栅布局,也被称作网格布局(多行多列)。 栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列,并把每...

Qt入门-layout布局

开发一个图形界面应用程序,界面的布局影响到界面的美观。在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小、纵横比例、分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这...
  • xgbing
  • xgbing
  • 2012年07月19日 18:40
  • 54664
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt之格栅布局(QGridLayout)
举报原因:
原因补充:

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