72常用控件_QGridLayout的使用
目录
代码⽰例: 使⽤ QGridLayout 管理元素
代码⽰例: 设置 QGridLayout 中元素的⼤⼩⽐例.
代码⽰例: 设置垂直⽅向的拉伸系数
⽹格布局
Qt 中还提供了 QGridLayout ⽤来实现⽹格布局的效果. 可以达到 M * N 的这种⽹格的效果
核⼼属性
整体和 QVBoxLayout 以及 QHBoxLayout 相似. 但是设置 spacing 的时候是按照垂直⽔平两个 ⽅向来设置的
| 属性 | 说明 |
|---|---|
| layoutLeftMargin | 左侧边距 |
| layoutRightMargin | 右侧边距 |
| layoutTopMargin | 上方边距 |
| layoutBottomMargin | 下方边距 |
| layoutHorizontalSpacing | 相邻元素之间水平方向的间距 |
| layoutVerticalSpacing | 相邻元素之间垂直方向的间距 |
| layoutRowStretch | 行方向的拉伸系数 |
| layoutColumnStretch | 列方向的拉伸系数 |
代码⽰例: 使⽤ QGridLayout 管理元素
1) 代码中创建 QGridLayout 和 4 个按钮.
• 使⽤ addWidget 添加控件到布局管理器中. 但是添加的同时会指定两个坐标. 表⽰放在第⼏⾏, 第
⼏列
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 1, 0);layout->addWidget(button4, 1, 1);this->setLayout(layout);}Widget::~Widget()
{delete ui;
} 2) 执⾏代码, 观察效果. 可以看到当前的这⼏个按钮是按照 2 ⾏ 2 列的⽅式排列的
3)如果调整行列坐标为下列代码
layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 0, 2);layout->addWidget(button4, 0, 3); 执⾏代码, 可以看到这⼏个按钮都在同⼀⾏了. 相当于 QHBoxLayout
4) 如果调整⾏列坐标为下列代码
// 这个写法就相当于垂直布局了layout->addWidget(button1, 0, 0);layout->addWidget(button2, 1, 0);layout->addWidget(button3, 2, 0);layout->addWidget(button4, 3, 0); 执⾏代码, 可以看到这⼏个按钮都在同⼀列了. 相当于 QVBoxLayout
5) 任意调整⾏列, 即可看到不同的效果
6) 编写代码形如
此处也要注意, 设置⾏和列的时候, 如果设置的是⼀个很⼤的值, 但是这个值和上⼀个值之间并 没有其他的元素, 那么并不会在中间腾出额外的空间
虽然把 botton4 设置在第 100 ⾏, 但是由于前面⾏没有元素. 因此botton4 仍然会紧挨在 botton3 斜下⽅. 看起来和上 ⾯的 0 1 2 3 的情况是相同的
代码⽰例: 设置 QGridLayout 中元素的⼤⼩⽐例.
1) 创建 6 个按钮, 按照 2 ⾏ 3 列的⽅式排列
• 使⽤ setColumnStretch 设置每⼀列的拉伸系数
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 6 个按钮, 使用网格布局按照 2 * 3 的方式来排列QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");// 创建网格布局管理器, 把这些控件添加进去QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 0, 2);layout->addWidget(button4, 1, 0);layout->addWidget(button5, 1, 1);layout->addWidget(button6, 1, 2);this->setLayout(layout);layout->setColumnStretch(0, 0);layout->setColumnStretch(1, 1);layout->setColumnStretch(2, 2);}Widget::~Widget()
{delete ui;
} 2) 执⾏程序, 可以看到每⼀列的宽度是不同的. 并且随着窗⼝调整动态变化
另外, QGridLayout 也提供了 setRowStretch 设置⾏之间的拉伸系数.上述案例中, 直接设置 setRowStretch 效果不明显, 因为每个按钮的⾼度是固定的. 需要把按钮的垂直⽅向的 sizePolicy 属性设置为 QSizePolicy::Expanding 尽可能填充满布局管理器, 才能看到效果
代码⽰例: 设置垂直⽅向的拉伸系数
1) 编写代码, 创建 6 个按钮, 按照 3 ⾏ 2 列⽅式排列.
使⽤ setSizePolicy 设置按钮的尺⼨策略. 可选的值如下:
• QSizePolicy::Ignored : 忽略控件的尺⼨，不对布局产⽣影响。
• QSizePolicy::Minimum : 控件的最⼩尺⼨为固定值，布局时不会超过该值。
• QSizePolicy::Maximum : 控件的最⼤尺⼨为固定值，布局时不会⼩于该值。
• QSizePolicy::Preferred : 控件的理想尺⼨为固定值，布局时会尽量接近该值。
• QSizePolicy::Expanding : 控件的尺⼨可以根据空间调整，尽可能占据更多空间。
• QSizePolicy::Shrinking : 控件的尺⼨可以根据空间调整，尽可能缩⼩以适应空间。
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>
#include <QSizePolicy>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 6 个按钮. 按照 3 行 2 列的方式进行排列QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");// 创建 layout 并把按钮添加进去QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 1, 0);layout->addWidget(button4, 1, 1);layout->addWidget(button5, 2, 0);layout->addWidget(button6, 2, 1);button1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 把 layout 设置到窗口中this->setLayout(layout);// 把 layout 设置到窗口中layout->setRowStretch(0, 1);layout->setRowStretch(1, 2);layout->setRowStretch(2, 3);}Widget::~Widget()
{delete ui;
} 2) 执⾏代码, 观察效果.
此时的按钮垂直⽅向都舒展开了. 并且调整窗⼝尺⼨, 也会按照设定的⽐例同步变化.
总的来说, 使⽤ QGridLayout 能够代替很多 QHBoxLayout 和 QVBoxLayout 嵌套的场景. 毕竟嵌套的代码写起来是⽐较⿇烦的.另外不要忘了, QGridLayout ⾥⾯也能嵌套 QHBoxLayout 和 QVBoxLayout ,QHBoxLayout 和 QVBoxLayout ⾥⾯也能嵌套 QGridLayout .灵活使⽤上述布局管理器, 就可以实现出任意的复杂界⾯.
刚刚创建的布局管理器，这里的控件尺寸都是均等的~~
当需要创建出尺寸不同的控件的时候，就可以通过拉伸系数来设置，
拉伸系数就相当于设置控件之间尺寸的”比例
//设置水平拉伸系数．
layout->setcolumnStretch(e, 1);
layout->setcolumnStretch(1, 1);
layout->setColumnStretch(2, 2);此处代码的含义，就是这三个列按照1:1:2的方式来设置宽度~~
如果拉伸系数设为0，意思是不参与拉伸~～
此时按钮的宽度是固定值～～~
不设置SizePolicy
上述代码，直接设置拉伸系数，发现无效的!！
这里之所以没有拉伸，是因为SizePolicy起到的影响～~
这个是QWidget 的属性~~
由于按钮垂直方向默认没有拉伸开（水平方向默认是拉伸的）
因此垂直方向不会受到拉伸系数的影响了～～
要想让垂直方向的拉伸系数生效，就需要让按钮先能够拉伸展开~~
QSizePolicy::Ignored:忽略控件的尺寸，不对布局产生影响。
QSizePolicy::Minimum:控件的最小尺寸为固定值，布局时不会超过该值。
QSizePolicy::Maximum:控件的最大尺寸为固定值，布局时不会小于该值。
QSizePolicy::Preferred:控件的理想尺寸为固定值，布局时会尽量接近该值。
QSizePolicy::Expanding:控件的尺寸可以根据空间调整，尽可能占据更多空间。
QSizePolicy::Shrinking:控件的尺寸可以根据空间调整，尽可能缩小以适应空间。