阿源的知识库正点原子QT之布局管理
7 布局管理
（1） Vertiacl Layout:垂直布局
（2） Horizontal Layout:水平布局
（3） Grid Layout:网格布局
（4） Form Layout:表单布局7.1 QBoxLayout
QBoxLayout 继承 QLayout。 QBoxLayout 类提供水平或垂直地排列子部件。 QBoxLayout 获取从它的父布局或从 parentWidget()中所获得的空间，将其分成一列框，并使每个托管小部件填充一个框。案例：垂直或水平布局
例 29_qboxlayout，垂直或水平布局（难度：简单），使用几个按钮，将他们设置为垂直排布和水平排布，以及设置它们的一些属性。
可以看到在 hWidget 中添加了 3 个水平排布的按钮，在 vWidget中添加了 3 个垂直排布的按钮。
cpp
#include "mainwindow.h"
#include <QList>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置主窗口的位置与大小 */
this->setGeometry(0, 0, 800, 480);
/* 实例化与设置位置大小 */
hWidget = new QWidget(this);
hWidget->setGeometry(0, 0, 800, 240);
vWidget = new QWidget(this);
vWidget->setGeometry(0, 240, 800, 240);
hLayout = new QHBoxLayout();
vLayout = new QVBoxLayout();
/* QList<T>是Qt的一种泛型容器类。
* 它以链表方式存储一组值，
* 并能对这组数据进行快速索引
*/
QList <QString>list;
/* 将字符串值插入list */
list<<"one"<<"two"<<"three"<<"four"<<"five"<<"six";
/* 用一个循环实例化6个按钮 */
for(int i = 0; i < 6; i++){
pushButton[i] = new QPushButton();
pushButton[i]->setText(list[i]);
if(i < 3) {
/* 将按钮添加至hLayout中 */
hLayout->addWidget(pushButton[i]);
} else {
/* 将按钮添加至vLayout中 */
vLayout->addWidget(pushButton[i]);
}
}
/* 设置间隔为50 */
hLayout->setSpacing(50);
/* hWidget与vWidget的布局设置为hLayout/vLayout */
hWidget->setLayout(hLayout);
vWidget->setLayout(vLayout);
}
MainWindow::~MainWindow()
{
}7.2 QGridLayout
QGridLayout继承 QLayout。QGridLayout获取可用的空间(通过其父布局或 parentWidget()))，将其分为行和列，并将其管理的每个小部件放入正确的单元格中。由于网格布局管理器中的组件也是会随着窗口拉伸而发生变化的，所以也是需要设置组件之间的比例系数的，与 QBoxLayout 不同的是网格布局管理器还需要分别设置行和列的比例系数。案例：网格布局
例 30_qgridlayout，网格布局（难度：简单），使用几个按钮，将他们设置为网格布局，同时设置它们的行、列比例系数（拉伸因子），以及设置它们的一些属性。
cpp
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置位置与大小 */
this->setGeometry(0, 0, 800, 480);
/* 实例化 */
gWidget = new QWidget(this);
/* 设置gWidget居中央 */
this->setCentralWidget(gWidget);
gridLayout = new QGridLayout();
/* QList链表，字符串类型 */
QList <QString> list;
list<<"按钮1"<<"按钮2"<<"按钮3"<<"按钮4";
for (int i = 0; i < 4; i++){
pushButton[i] = new QPushButton();
pushButton[i]->setText(list[i]);
/* 设置最小宽度与高度 */
pushButton[i]->setMinimumSize(100, 30);
/* 自动调整按钮的大小 */
pushButton[i]->setSizePolicy(
QSizePolicy::Expanding,
QSizePolicy::Expanding
);
switch (i) {
case 0:
/* 将pushButton[0]添加至网格的坐标(0,0),下同 */
gridLayout->addWidget(pushButton[i], 0, 0);
break;
case 1:
gridLayout->addWidget(pushButton[i], 0, 1);
break;
case 2:
gridLayout->addWidget(pushButton[i], 1, 0);
break;
case 3:
gridLayout->addWidget(pushButton[i], 1, 1);
break;
default:
break;
}
}
/* 设置第0行与第1行的行比例系数 */
gridLayout->setRowStretch(0, 2);
gridLayout->setRowStretch(1, 3);
/* 设置第0列与第1列的列比例系数 */
gridLayout->setColumnStretch(0, 1);
gridLayout->setColumnStretch(1, 3);
/* 将gridLayout设置到gWidget */
gWidget->setLayout(gridLayout);
}
MainWindow::~MainWindow()
{
}7.3 QFormLayout
QFormLayout 继承 QLayout。 QFormLayout 类管理输入小部件及其关联标签的表单。 QFormLayout 是一个方便的布局类，它以两列的形式布局其子类。左列由标签组成，右列由“字段”小部件(QLineEdit(行编辑器)、 QSpinBox(旋转框等))组成。通常使用 setRowWrapPolicy(RowWrapPolicy policy)接口函数设置布局的换行策略进行布局等。案例：表单布局
例 31_qformlayout，表单布局（难度：简单），将使用 addRow(const QString &labelText,QWidget *field)来创建一个带有给定文本的 QLabel 及 QWidget 小部件，并且它们是伙伴关系。简单的展示表单布局的使用。
QFomLayout 布局比较适用于行与列比较少的布局格局。如果是多行多列的布局，应该使用 QGirdLayout 布局。
cpp
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置位置与大小 */
this->setGeometry(0, 0, 800, 480);
/* 实例化及设置位置与大小，下同 */
fWidget = new QWidget(this);
fWidget->setGeometry(250, 100, 300, 200);
userLineEdit = new QLineEdit();
passwordLineEdit = new QLineEdit();
formLayout = new QFormLayout();
/* 添加行 */
formLayout->addRow("用户名：", userLineEdit);
formLayout->addRow("密码 ：", passwordLineEdit);
/* 设置水平垂直间距 */
formLayout->setSpacing(10);
/* 设置布局外框的宽度 */
formLayout->setMargin(20);
/* 将formLayout布局到fWidget */
fWidget->setLayout(formLayout);
}
MainWindow::~MainWindow()
{
}7.4 空间间隔 QSpacerItem
QSpacerItem 继承 QLayoutItem。 QSpacerItem 类在布局中提供空白(空间间隔)。所以 QSpacerItem 是在布局中使用的。案例
例 32_qspaceritem，空间间隔（难度：一般），使用 4 个按钮，在垂直布局添加垂直间隔与按钮 1，在水平布局添加按钮 2~4 与水平间隔。
cpp
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置主窗体显示位置与大小 */
this->setGeometry(0, 0, 800, 480);
widget = new QWidget(this);
/* 居中widget */
this->setCentralWidget(widget);
/* 实例化对象 */
vSpacer = new QSpacerItem(10, 10,
QSizePolicy::Minimum,
QSizePolicy::Expanding
);
hSpacer = new QSpacerItem(10, 10,
QSizePolicy::Expanding,
QSizePolicy::Minimum
);
vBoxLayout = new QVBoxLayout();
hBoxLayout = new QHBoxLayout();
mainLayout = new QHBoxLayout();
/* 在vBoxLayout添加垂直间隔 */
vBoxLayout->addSpacerItem(vSpacer);
QList <QString>list;
/* 将字符串值插入list */
list<<"按钮1"<<"按钮2"<<"按钮3"<<"按钮4";
/* 用一个循环实例化4个按钮 */
for(int i = 0; i < 4 ; i++){
bt[i] = new QPushButton();
bt[i]->setText(list[i]);
if (i == 0){
/* 按钮1,设置为100*100 */
bt[i]->setFixedSize(100, 100);
/* 在vBoxLayout添加按钮1 */
vBoxLayout->addWidget(bt[i]);
} else {
/* 按钮2～4,设置为60*60 */
bt[i]->setFixedSize(60, 60);
/* 在hBoxLayout添加按钮2～4 */
hBoxLayout->addWidget(bt[i]);
}
}
/* 在hBoxLayout添加水平间隔 */
hBoxLayout->addSpacerItem(hSpacer);
/* 在主布局里添加垂直布局 */
mainLayout->addLayout(vBoxLayout);
/* 在主布局里添加水平布局 */
mainLayout->addLayout(hBoxLayout);
/* 设置部件间距 */
mainLayout->setSpacing(50);
/* 将主布局设置为widget的布局 */
widget->setLayout(mainLayout);
}
MainWindow::~MainWindow()
{
}