Qt之格栅布局（QGridLayout）

简述

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功能类似。

总结

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

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

时间： 2024-11-12 12:27:11

Qt之格栅布局（QGridLayout）的相关文章

qt——常用的布局方法

布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置.Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackLayout.(布局管理类)这些类简单易用,无论在代码中还是用Qt Designer开发程序都能用到. 1)         布局类简介 QHBoxLayout:水平布局 QVBoxLayout:垂直布局 QGridLayout: 表格布局 QGridLayout::addWidget()语法 layo

qt坐标系统与布局的简单入门

 qt坐标系统 qt坐标系统比較简单 button.setGeometry(20,20,100,100); 上面的代码把button显示为父窗体的20,20处宽度为100,高度为100 接下去是布局 qt里面布局须要增加<QLayout.h>这个头文件. qt里面垂直布局 qt里面的垂直布局须要导入<QVBoxLayout.h>这个头文件. qt里面的水平布局须要导入<QHBoxLayout.h>这个头文件. 以下是是一段布局的代码 QHBoxLayout layo

Qt学习四 - 布局管理器

开发界面程序,一定会涉及到布局的问题.我们需要让控件显示在理想中的位置,可以直接设置控件的坐标和宽高.但是这样带来一个问题,当用户改变窗口大小时,例如点击最大化按钮或者拖拽窗口边缘,控件是不会改变的(包括控件的坐标和宽高).因为在窗口改变时,你没有告诉程序是否更新控件以及如何更新.如果需要让控件自动更新,那么就要自己来写一些函数来相应这些变化.针对这种情况,Qt提供了一种机制 - 布局,来解决这个问题(大部分用于开发界面程序的语言或者框架,都会提供类似的机制).只需要将控件放入某一种布局,当位置

QT的组件布局

在QT的IDE下,编写一个自定义布局. 1 #include<QApplication> 2 #include<QWidget> 3 #include<QSpinBox> 4 #include<QSlider> 5 #include<QHBoxLayout> 6 7 int main (int argc,char *argv[]) 8 { 9 QApplication app(argc, argv); 10 QWidget * window =

Qt之自定义布局管理器（QFlowLayout）

简述 QFlowLayout,顾名思义-流布局,实现了处理不同窗口大小的布局.根据应用窗口的宽度来进行控件放置的变化. 具体实现要求不再赘述,请参考前两节内容. 简述 实现 效果 源码 实现 QFlowLayout主要采用QLayout和QWidgetItem实现,而窗口使用了QWidget和QPushButton. 效果 源码 QFlowLayout.h #ifndef QFLOWLAYOUT_H #define QFLOWLAYOUT_H #include <QLayout> #inclu

Qt之自定义布局管理器（QBorderLayout）

简述 QBorderLayout,顾名思义-边框布局,实现了排列子控件包围中央区域的布局. 具体实现要求不再赘述,请参考前几节内容. 简述 实现 效果 源码 使用 实现 QBorderLayout主要采用QLayout和QWidgetItem实现,而窗口使用了QWidget,中央窗体使用QTextBrowser,四周以QLabel排列. 效果 源码 QBorderLayout.h #ifndef QBORDERLAYOUT_H #define QBORDERLAYOUT_H #include <

Qt之手动布局

简述 手动布局,可以实现和水平布局.垂直布局.网格布局等相同的效果,也可实现属于自己的自定义布局,当窗体缩放时,控件可以随之变化. 其对于坐标系的建立有严格要求,纯代码思维,使用复杂,不易维护,所以一般不建议使用. 下面我们以简单的例子来讲解如何使用. 简述 事件 垂直布局 简略图 效果 源码 水平布局 效果 源码 总结 事件 在Qt之布局管理器一节中,我们介绍了对于手动布局的实现思路. 通过QWidget::resizeEvent()来计算所需要分配的大小,并且给每个子控件调用setGeome

26.QT颜色与布局

dialog.h 1 #ifndef PALETTE_H 2 #define PALETTE_H 3 4 #include <QDialog> 5 #include <QComboBox> 6 #include <QLabel> 7 #include <QTextEdit> 8 #include <QPushButton> 9 #include <QLineEdit> 10 11 class Palette : public QDia

Qt系列04 布局管理

本节介绍Qt常用布局管理,QSplitter类.QDockWidget类和QStackedWidget类. QSplitter类 #include "widget.h" #include <QApplication> #include <QSplitter> #include <QLineEdit> int main(int argc, char *argv[]) { QApplication a(argc, argv); QSplitter *sp