【Qt】布局管理器
界面中各元素排列有序往往会更加的雅观，Qt Designer虽然通过拖拽的方式添加控件轻便了开辟，但手动界面编排照旧较为麻烦，为此Qt提供了布局管理器布局管理器用于管理和安排窗口控件(widgets)，帮助确保界面在差别平台和窗口尺寸下保持一致和合理的布局。布局管理器负责调整和定位窗口部件，以便它们在窗口巨细变化时能顺应差别的布局需求
QBoxLayout
QBoxLayout 是矩形布局管理器，其管理的界面范围是一个矩形。Qt将其封装，形成了QVBoxLayout (垂直布局管理器) 和 QHBoxLayout (水平布局管理器)
QVBoxLayout 垂直布局
QVBoxLayout 是垂直布局管理器，用于将窗口部件垂直排列。其按照添加次序依次排列窗口控件，直到空间不敷为止。
焦点属性
属性阐明layoutLeftMargin左侧边距layoutRightMargin右侧边距layoutTopMargin上方边距layoutBottomMargin下方边距layoutSpacing相邻元素之间的间距 焦点方法
方法阐明addWidget(QWidget *widget, int stretch = 0, Qt::Alignment alignment = Qt::Alignment())将控件添加到布局管理器中，第一个参数是控件指针，第二个参数是拉伸系数(后续讲授)addSpacerItem(QSpacerItem *spacerItem)在布局管理器中添加一个可调整巨细的空缺控件(QSpacerItem)，可设置最小尺寸、最大尺寸和舒展系数。在其构造函数指定相关系数addSpacing(int size)添加固定巨细的空缺间隔，指定一个整数作为参数，表示在布局中插入的像素间隔addStretch(int stretch = 0) 添加一个舒展因子，可以明白为一个占位符，会根据布局中其他窗口控件的巨细，主动调整器巨细以添补可用空间
参数表示舒展因子的巨细
addStruct(int size) 添加一个固定巨细的占位控件
与addSpacing雷同，但addStruct创建的不是一个真正的控件，而是一次固定巨细的占位
addLayout(QLayout *layout)布局管理器嵌套布局管理器insertWidget(int index, QWidget *widget, int stretch = 0, Qt::Alignment alignment = Qt::Alignment())上述方法都有insert系列，多了第一个参数index，表示插入的下标，若index = 0，则插入后的widget为第0个insert ........ 布局管理器只用于界面布局，所以没有提供信号
代码示例：利用垂直布局管理器规范三个按钮
编写widget.cpp，在构造函数中初始化相应控件
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QVBoxLayout *layout = new QVBoxLayout();
QPushButton *button1 = new QPushButton("按钮1");
QPushButton *button2 = new QPushButton("按钮2");
QPushButton *button3 = new QPushButton("按钮3");
//将控件添加至布局管理器中
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
//将布局管理器应用在界面上
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/c18446ce38f7464f9bf1776a46ae0d47.png
由于整个窗口就是一个界面，将布局管理器应用在该界面，此中添加的控件就会自顺应窗口的巨细
Qt Designer添加布局管理器，范例有如下，通过拖拽的方式添加到窗口中
https://i-blog.csdnimg.cn/direct/2166d185d6464c2e8f584e31d7f1bba5.png
通过 Qt Designer 添加的布局管理器，其可调节管理范围，本质是在大窗口上创建了一个小窗口，然后在这个小窗口中启用布局管理器
如此布局管理器中的控件就不会随窗口巨细改变而自顺应，由于这些小窗口没有自顺应大窗口的改变，自然此中的控件也不会变化
https://i-blog.csdnimg.cn/direct/abf23602ecf84fecafd4ac54a0d9a9f8.png
QHBoxLayout 水平布局
QHBoxLayout 和 QVBoxLayout 都继承自 QBoxLayout ，属性和方法都一致，此处不过多赘述
代码示例：利用水平布局管理三个按钮
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//QVBoxLayout *layout = new QVBoxLayout();
QHBoxLayout *layout = new QHBoxLayout();
QPushButton *button1 = new QPushButton("按钮1");
QPushButton *button2 = new QPushButton("按钮2");
QPushButton *button3 = new QPushButton("按钮3");
//将控件添加至布局管理器中
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
//将布局管理器应用在界面上
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/218088394bf649c3821200f61c365ac1.png
代码示例：嵌套布局管理器。实现三行按钮，前两行各有一个按钮，末了一行有两个按钮
编写 widget.cpp 的构造函数
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//垂直布局
QVBoxLayout *main_layout = new QVBoxLayout();
QPushButton *button1 = new QPushButton("按钮1");
QPushButton *button2 = new QPushButton("按钮2");
main_layout->addWidget(button1);
main_layout->addWidget(button2);
//水平布局
QHBoxLayout *layout = new QHBoxLayout();
QPushButton *button3 = new QPushButton("按钮3");
QPushButton *button4 = new QPushButton("按钮4");
layout->addWidget(button3);
layout->addWidget(button4);
//将水平布局设置进垂直布局中
main_layout->addLayout(layout);
//将布局设置进窗口
this->setLayout(main_layout);
} https://i-blog.csdnimg.cn/direct/67ba8ad53e1441e6a18f84d701c70fa6.png
QGridLayout 网格布局
QGridLayout 用于实现网格布局的结果，将界面分成多少行和列，可以将控件放置在网格的指定位置上，支持跨越多行和多列的布局，可以到达 M * N 的网格结果
焦点属性
QGridLayout 整体属性和 QBoxLayout 相似，但是设置 spacing 的时间是按照垂直水平两个方向设置的
属性阐明layoutLeftMargin左侧边距layoutRightMargin右侧边距layoutTopMargin上方边距layoutBottomMargin下方边距layoutSpacing相邻元素之间的间距layoutHorizontalSpacing相邻元素之间水平方向的间距layoutVerticalSpacing相邻元素之间垂直方向的间距layoutRowStretch行方向的拉伸系数layoutColumnStretch列方向的拉伸系数 焦点方法
QGridLayout 整体方法也与 QBoxLayout 相似，不过由于QGridLayout管理的控件为多行多列，所以再设置控件/布局管理器时，需要指明行列号
方法阐明addWidget(QWidget *widget, int row, int column, Qt::Alignment alignment = Qt::Alignment())将控件添加到布局管理器中，第一个参数是控件指针，二三参数是指定的行列号addWidget(QWidget *widget, int fromRow, int formColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = Qt::Alignment()) 将控件放置在从 (fromRow, formColumn) 开始，控件宽度为 columnSpan，高度为 rowSpan
如果 columnSpan/rowSpan 为-1，那么将添补至列/行结尾
setVerticalSpacing(int spacing)只在垂直方向设置空缺间隔setHorizontalSpacing(int spacing)只在水平方向设置空缺间隔setSpacing(int spacing)在垂直和水平方向都添加空缺间隔setColumnStretch(int column, int stretch) 设置 column 列的拉伸系数
setRowStretch(int row, int stretch)设置 row 行的拉伸系数addLayout(QLayoutItem *item, int row, int column, Qt::Alignment alignment = Qt::Alignment())嵌套布局管理器，将布局管理器设置到指定行列addLayout(QLayoutItem *item, int fromRow, int formColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = Qt::Alignment())和第二个addWidget雷同，多了宽度和高度 代码示例：将按钮按两行两列排列
编写 widget.cpp的构造函数
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QGridLayout *layout = new QGridLayout();
QPushButton *button1 = new QPushButton("按钮1");
QPushButton *button2 = new QPushButton("按钮2");
QPushButton *button3 = new QPushButton("按钮3");
QPushButton *button4 = new QPushButton("按钮4");
//将按钮添加到布局管理器中
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 0, 1);
layout->addWidget(button3, 1, 0);
layout->addWidget(button4, 1, 1);
//将布局管理设置进窗口
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/ca2b3bdb4fca48d6ae922b0c129c166c.png
调整指定的行列，观察差别结果
https://i-blog.csdnimg.cn/direct/0a1886d5ffd547fcaaa46f43dcfd62f3.png
可以看到，并不是设置到第几行第几列就会将界面划分到几行几列，而是根据有多少行列值差别而划分
Stretch 拉伸系数
有时我们并不想布局管理器中全部的控件巨细都相同，此时就可以通过 stretch 改变行列间控件的巨细。
通过设置拉伸系数，会将一行/列的控件按各自的拉伸系数，等比例的划分行/列
代码示例：对两行三列的按钮，举行巨细改变
编写widget.cpp的构造函数
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QGridLayout *layout = new QGridLayout();
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->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);
//设置列拉伸系数为1:2:3
layout->setColumnStretch(0, 1);//第0列拉伸系数为1
layout->setColumnStretch(1, 2);//第1列拉伸系数为2
layout->setColumnStretch(2, 3);//第2列拉伸系数为3
//将布局管理设置进窗口
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/35146289f6b84224a3bbd12c32fc7f29.png
若想设置行拉伸系数，直接设置并没有用果，由于控件巨细还受 sizePolicy 影响
QSizePolicy 尺寸战略
QsizePolicy 类用于描述控件的巨细战略，即小控件在其父布局中如何调整自身巨细以顺应可用空间
焦点属性
属性阐明HorizontalPolicy水平方向的调整方式VerticalPolicy垂直方向的调整方式PolicyTypes 战略范例
[*]QSizePolicy::Fixed：固定巨细，不会被调整
[*]QSizePolicy::Minimum：控件可以缩小，但不能小于最小巨细
[*]QSizePolicy::Maximum：控件可以放大，但不能大于最大巨细
[*]QSizePolicy::Preferred：控件会尽大概靠近其建议的巨细，也可以调整
[*]QSizePolicy::Expanding：控件会尽大概扩展以添补可用空间
[*]QSizePolicy::Shrinking：控件会尽大概缩小以顺应空间
[*]QSizePolicy::MinimumExpanding：到达最小巨细后仍可以扩展
[*]QSizePolicy::Ignored：由其他因素(如布局)决定巨细
如果要设置行拉伸因子，还需要将控件的行尺寸战略设置为 QSizePolicy::Expanding
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//三行两列，行拉伸比例为1:0:3
QGridLayout *layout = new QGridLayout();
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");
//设置控件的尺寸策略
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->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);
//设置行拉伸系数为1:0:3
layout->setRowStretch(0, 1);
layout->setRowStretch(1, 0);//第1列行伸系数为0，设置为0，即为固定大小，不参与拉伸
layout->setRowStretch(2, 3);
//将布局管理设置进窗口
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/901caaf02347443cb324e1d6a073f317.png
利用 QGridLayout 可以代替很多 QHBoxLayout 和 QVBoxLayout 嵌套的场景
同时 QGridLayout 也可以嵌套 QHBoxLayout 和 QVBoxLayout，反之如此，QHBoxLayout也可以嵌套 QGridLayout
QFormLayout 表单布局
QFormLayout 属于 QGridLayout 的特别情况，专门用于实现两列表单的布局，将表单字段(如标签和输入框)构造成标签和对应控件的对，通常用于设置界面或设置界面
焦点方法
方法
阐明 addRow(QWidget *widget)
addRow(QLayout *layout)
添加一行，只有单个控件/布局器 addRow(QWidget *label, QWidget *field)
addRow(QWidget *label, QLayout *field)
添加一行，有标签和控件/布局器组成的对 insert(int row, QWidget *label, QWidget *field)
.......
插入一行表单
insert方法与add雷同，就多了第一个参数 row
removeRow(int row)删除一行表单rowCount()获取当前行数 代码示例：有姓名、密码两个表单
编写widget.cpp的构造函数
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QFormLayout *layout = new QFormLayout();
//创建标签
QLabel *label_name = new QLabel("姓名");
QLabel *label_password = new QLabel("密码");
//创建输入框
QLineEdit *edit_name = new QLineEdit();
QLineEdit *edit_password = new QLineEdit();
edit_password->setEchoMode(QLineEdit::Password);
//创建提交按钮
QPushButton *button = new QPushButton("提交");
//添加表单
layout->addRow(label_name, edit_name);
layout->addRow(label_password, edit_password);
layout->addRow(button);
//设置布局管理器
this->setLayout(layout);
} https://i-blog.csdnimg.cn/direct/4d973e51ccbd4be9a8b11f58b8b8c272.png
QSpacerItem 空缺区域
QSpacerItem 主要用于在布局中添加可调整的空缺区域，使界面更加雅观
焦点属性
属性阐明width宽度height高度hData 水平方向的 sizePolicy
Expanding、Ignored、Preferred等等
VDate 垂直方向的 sizePolicy
选项同上
代码示例：layout 是一个水平布局管理器，有两个按钮，在中间和后面添加 QSpacerItem，观察结果
https://i-blog.csdnimg.cn/direct/93e1bcab90e0466cba1902408ffb06de.png
竣事语
感谢你的阅读，如果觉得本篇文章对你有所帮助的话，不妨点个赞支持一下博主，拜托啦，这对我真的很紧张
https://i-blog.csdnimg.cn/direct/e00237866e4c4616b80becb1a5ed1602.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]