【Qt开发】布局管理器
目录
前言:
1,垂直布局
2,水平布局
3,网格布局
4,表单布局
5,Spacer
前言:
在 Qt 中,布局管理器是用于自动管理和排列控件的工具。它能够根据窗口大小、控件尺寸策略等自动调整控件的位置和大小。说白了,布局管理器就是管理部件的摆放位置和大小的工具。
Qt中常用的布局管理器有四个——垂直布局(从上到下排列控件)、水平布局(从左到右排列控件)、网格布局(按行和列排列控件)、表单布局(用于标签+输入控件的成对排列)。
注意:布局管理器是管理控件的工具,它只是用于界面布局,并没有提供信号。
1,垂直布局
QVBoxLayout 表示垂直的布局管理器。这里的 V 是 vertical 的缩写。核心属性如下:
// 创建三个按钮,使用垂直布局管理器管理起来
QPushButton* btn1 = new QPushButton("按钮1");
QPushButton* btn2 = new QPushButton("按钮2");
QPushButton* btn3 = new QPushButton("按钮3");
// 创建布局管理器, 并且把按钮添加进去
// 注意: 如果创建的时候指定⽗元素为this, 则后⾯不需要setLayout⽅法了
QVBoxLayout* layout = new QVBoxLayout();
layout->addWidget(btn1);
layout->addWidget(btn2);
layout->addWidget(btn3);
// 把布局管理器设置到widget窗口中
this->setLayout(layout);
注意:若是限制布局管理器的范围,那么它不会随着窗口的大小变动而变化。因为这种情况下,布局管理器并非是窗口 widget 的布局管理器。这里是先创建窗口 widget,然后再创建布局管理器,通过 geometry 属性,把布局管理器设置到窗口中。
2,水平布局
QHBoxLayout 表示水平布局管理器。H是 horizontal 的缩写。
布局管理器之间可以嵌套使用,下面来实现在垂直布局管理器中嵌套水平布局。
// 创建顶层的垂直布局管理器
QVBoxLayout* layoutParent = new QVBoxLayout();
this->setLayout(layoutParent);
// 添加两个按钮进去
QPushButton* btn1 = new QPushButton("按钮1");
QPushButton* btn2 = new QPushButton("按钮2");
layoutParent->addWidget(btn1);
layoutParent->addWidget(btn2);
// 创建⼦layout,并添加两个按钮
QHBoxLayout* layoutChild = new QHBoxLayout();
QPushButton* btn3 = new QPushButton("按钮3");
QPushButton* btn4 = new QPushButton("按钮4");
layoutChild->addWidget(btn3);
layoutChild->addWidget(btn4);
// 把⼦layout添加到⽗layout中即可实现嵌套功能
layoutParent->addLayout(layoutChild);
3,网格布局
QGridLayout 用于实现网格布局。这里的网格是一个由行和列组成的二维表格,排列时可达到 M * N 的网格效果。
这里要介绍下拉伸系数。拉伸系数是部件在布局管理器中所占的大小比例,相当于设置控件之间尺寸的 “比例”。当需要创建出尺寸不同的控件的时候,就可以通过拉伸系数来设置。拉伸系数设为0时表示固定大小,即不参与拉伸比。
另外,设置行和列的时候需注意,如果设置的是一个很大的值,但是这个值和上一个值之间并没有其他的元素,那么并不会在中间腾出额外的空间。比如,若把控件放在(1,2)位置,其中(1,1)没有元素,那么会放在(1,1),不会腾出额外的空间。
// 网格布局QGridLayout
QPushButton* btn1 = new QPushButton("按钮1");
QPushButton* btn2 = new QPushButton("按钮2");
QPushButton* btn3 = new QPushButton("按钮3");
QPushButton* btn4 = new QPushButton("按钮4");
// addWidget添加控件到布局管理器中时,需要指定两个坐标,表示放在第⼏⾏,第⼏列
QGridLayout* layout = new QGridLayout();
layout->addWidget(btn1, 0, 0); // 0行0列
layout->addWidget(btn2, 0, 1); // 0行1列
layout->addWidget(btn3, 1, 0); // 1行0列
layout->addWidget(btn4, 1, 1); // 1行1列
// 设置水平方向控件的宽度拉伸系数,即拉伸⽐例。拉伸比例为0即固定⼤⼩,不参与拉伸
layout->setColumnStretch(0, 1); // 第0列拉伸⽐例设为1
layout->setColumnStretch(1, 2); // 第1列拉伸⽐例设为2,即第1列的宽度是第0列的3倍
// 设置layout到窗⼝中
this->setLayout(layout);
注意:QGridLayout 也提供了 setRowStretch 设置行之间的拉伸系数,但是,以上面为例,直接设置 setRowStretch 拉伸系数这里不会产生任何效果。因为每个按钮的高度是固定的,这里需要把按钮在垂直方向的 sizePolicy 属性设置为 QSizePolicy::Expanding 以尽可能填充满布局管理器,才能看到效果。
SizePolicy 定义了控件如何根据可用空间进行调整。每个QWidget都有一个 SizePolicy 属性,这个属性决定了当布局中的空间发生变化时,该控件是否以及如何扩展或收缩。使用setSizePolicy 可以设置控件的尺寸策略。其中,参数的可选值如下:
- QSizePolicy::Ignored:忽略控件的尺寸,不对布局产生影响。
- QSizePolicy::Minimum:布局时控件可以增大,但不能小于它的最小尺寸。
- QSizePolicy::Maximum:布局时控件可以缩小,但不能大于它的最大尺寸。
- QSizePolicy::Preferred:布局时控件的理想尺寸为固定值,布局时会尽量接近该值。
- QSizePolicy::Expanding:控件的尺寸可以根据空间调整,尽可能占据更多空间。
- QSizePolicy::Shrinking:控件的尺寸可以根据空间调整,尽可能缩小以适应空间。
QPushButton* btn1 = new QPushButton("按钮1");
QPushButton* btn2 = new QPushButton("按钮2");
QPushButton* btn3 = new QPushButton("按钮3");
QPushButton* btn4 = new QPushButton("按钮4");
// 设置按钮的 sizePolicy, 此时按钮的⽔平⽅向和垂直⽅向都会尽量舒展开
btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
// 创建⽹格布局管理器, 并且添加元素
QGridLayout* layout = new QGridLayout(this);
layout->addWidget(btn1, 0, 0);
layout->addWidget(btn2, 0, 1);
layout->addWidget(btn3, 1, 0);
layout->addWidget(btn4, 1, 1);
// 设置拉伸比例
layout->setRowStretch(0, 1);
layout->setRowStretch(1, 2);
// 设置 layout 到窗口中
this->setLayout(layout);
4,表单布局
QFormLayout 是 Qt 中的表单布局。表单布局属于是 QGridLayout 的特殊情况,是专门用于实现两列表单的布局。该布局中,左侧列为提示,右侧列为输入框。它适用于组织 “标签 + 输入控件” 这样的结构,让用户填写信息的场景。
QFormLayout 的属性与上面类似,这里不再说明,直接代码演示。
// 表单布局QFormLayout
QFormLayout* layout = new QFormLayout();
this->setLayout(layout);
QLabel* label1 = new QLabel("姓名");
QLabel* label2 = new QLabel("年龄");
QLabel* label3 = new QLabel("电话");
QLineEdit* lineEdit1 = new QLineEdit();
QLineEdit* lineEdit2 = new QLineEdit();
QLineEdit* lineEdit3 = new QLineEdit();
QPushButton* btn = new QPushButton("提交");
// 把上述元素添加到表单布局layout中
// addRow方法来添加⼀行。每⾏包含两个控件。第⼀个控件固定是QLabel⽂本,第⼆个控件可以是任意控件
layout->addRow(label1, lineEdit1);
layout->addRow(label2, lineEdit2);
layout->addRow(label3, lineEdit3);
layout->addRow(nullptr, btn); // 如果把第⼀个参数填写为NULL,则什么都不显示
5,Spacer
Spacer 是 Qt 中的间隔器,它通过 QSpacerItem 创建,用于在界面中创建空白区域或控制控件之间的间距。使用布局管理器的时候,可能需要在控件之间添加一段空白,这里就可以使用 QSpacerItem 来表示。QSpacerItem 核心属性如下:
// Spacer布局管理的空间占位符
QHBoxLayout* layout = new QHBoxLayout();
this->setLayout(layout);
QPushButton* btn1 = new QPushButton("按钮1");
QPushButton* btn2 = new QPushButton("按钮2");
// 创建 Spacer
QSpacerItem* spacer = new QSpacerItem(200, 20);
layout->addWidget(btn1);
// 顺序添加。在两个按钮中间添加空⽩,调整spacer大小,即可看到不同间距
layout->addSpacerItem(spacer); // 两个按钮之间已经存在了间隔
layout->addWidget(btn2);