【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，在构造函数中初始化相应控件

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
7.     QVBoxLayout *layout = new QVBoxLayout();
8.     QPushButton *button1 = new QPushButton("按钮1");
9.     QPushButton *button2 = new QPushButton("按钮2");
10.     QPushButton *button3 = new QPushButton("按钮3");
11.     //将控件添加至布局管理器中
12.     layout->addWidget(button1);
13.     layout->addWidget(button2);
14.     layout->addWidget(button3);
15.     //将布局管理器应用在界面上
16.     this->setLayout(layout);
17. }

复制代码

由于整个窗口就是一个界面，将布局管理器应用在该界面，此中添加的控件就会自顺应窗口的巨细 

---

Qt Designer添加布局管理器，范例有如下，通过拖拽的方式添加到窗口中

通过 Qt Designer 添加的布局管理器，其可调节管理范围，本质是在大窗口上创建了一个小窗口，然后在这个小窗口中启用布局管理器
如此布局管理器中的控件就不会随窗口巨细改变而自顺应，由于这些小窗口没有自顺应大窗口的改变，自然此中的控件也不会变化

QHBoxLayout 水平布局

QHBoxLayout 和 QVBoxLayout 都继承自 QBoxLayout ，属性和方法都一致，此处不过多赘述
代码示例：利用水平布局管理三个按钮

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
7.     //QVBoxLayout *layout = new QVBoxLayout();
8.     QHBoxLayout *layout = new QHBoxLayout();
9.     QPushButton *button1 = new QPushButton("按钮1");
10.     QPushButton *button2 = new QPushButton("按钮2");
11.     QPushButton *button3 = new QPushButton("按钮3");
12.     //将控件添加至布局管理器中
13.     layout->addWidget(button1);
14.     layout->addWidget(button2);
15.     layout->addWidget(button3);
16.     //将布局管理器应用在界面上
17.     this->setLayout(layout);
18. }

复制代码

---

代码示例：嵌套布局管理器。实现三行按钮，前两行各有一个按钮，末了一行有两个按钮
 编写 widget.cpp 的构造函数

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
7.     //垂直布局
8.     QVBoxLayout *main_layout = new QVBoxLayout();
9.     QPushButton *button1 = new QPushButton("按钮1");
10.     QPushButton *button2 = new QPushButton("按钮2");
11.     main_layout->addWidget(button1);
12.     main_layout->addWidget(button2);
13.     //水平布局
14.     QHBoxLayout *layout = new QHBoxLayout();
15.     QPushButton *button3 = new QPushButton("按钮3");
16.     QPushButton *button4 = new QPushButton("按钮4");
17.     layout->addWidget(button3);
18.     layout->addWidget(button4);
19.     //将水平布局设置进垂直布局中
20.     main_layout->addLayout(layout);
21.     //将布局设置进窗口
22.     this->setLayout(main_layout);
23. }

复制代码

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的构造函数

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
6.     QGridLayout *layout = new QGridLayout();
7.     QPushButton *button1 = new QPushButton("按钮1");
8.     QPushButton *button2 = new QPushButton("按钮2");
9.     QPushButton *button3 = new QPushButton("按钮3");
10.     QPushButton *button4 = new QPushButton("按钮4");
11.     //将按钮添加到布局管理器中
12.     layout->addWidget(button1, 0, 0);
13.     layout->addWidget(button2, 0, 1);
14.     layout->addWidget(button3, 1, 0);
15.     layout->addWidget(button4, 1, 1);
16.     //将布局管理设置进窗口
17.     this->setLayout(layout);
18. }

复制代码

 

调整指定的行列，观察差别结果

   可以看到，并不是设置到第几行第几列就会将界面划分到几行几列，而是根据有多少行列值差别而划分
  Stretch 拉伸系数

有时我们并不想布局管理器中全部的控件巨细都相同，此时就可以通过 stretch 改变行列间控件的巨细。
通过设置拉伸系数，会将一行/列的控件按各自的拉伸系数，等比例的划分行/列

---

代码示例：对两行三列的按钮，举行巨细改变
编写widget.cpp的构造函数

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
6.     QGridLayout *layout = new QGridLayout();
7.     QPushButton *button1 = new QPushButton("按钮1");
8.     QPushButton *button2 = new QPushButton("按钮2");
9.     QPushButton *button3 = new QPushButton("按钮3");
10.     QPushButton *button4 = new QPushButton("按钮4");
11.     QPushButton *button5 = new QPushButton("按钮5");
12.     QPushButton *button6 = new QPushButton("按钮6");
13.     //将按钮添加到布局管理器中
14.     layout->addWidget(button1, 0, 0);
15.     layout->addWidget(button2, 0, 1);
16.     layout->addWidget(button3, 0, 2);
17.     layout->addWidget(button4, 1, 0);
18.     layout->addWidget(button5, 1, 1);
19.     layout->addWidget(button6, 1, 2);
20.     //设置列拉伸系数为1:2:3
21.     layout->setColumnStretch(0, 1);//第0列拉伸系数为1
22.     layout->setColumnStretch(1, 2);//第1列拉伸系数为2
23.     layout->setColumnStretch(2, 3);//第2列拉伸系数为3
24.     //将布局管理设置进窗口
25.     this->setLayout(layout);
26. }

复制代码

---

若想设置行拉伸系数，直接设置并没有用果，由于控件巨细还受 sizePolicy 影响
QSizePolicy 尺寸战略

QsizePolicy 类用于描述控件的巨细战略，即小控件在其父布局中如何调整自身巨细以顺应可用空间
焦点属性

属性	阐明
HorizontalPolicy	水平方向的调整方式
VerticalPolicy	垂直方向的调整方式
PolicyTypes	战略范例       QSizePolicy::Fixed：固定巨细，不会被调整 QSizePolicy::Minimum：控件可以缩小，但不能小于最小巨细 QSizePolicy::Maximum：控件可以放大，但不能大于最大巨细 QSizePolicy:referred：控件会尽大概靠近其建议的巨细，也可以调整 QSizePolicy::Expanding：控件会尽大概扩展以添补可用空间 QSizePolicy::Shrinking：控件会尽大概缩小以顺应空间 QSizePolicy::MinimumExpanding：到达最小巨细后仍可以扩展 QSizePolicy::Ignored：由其他因素(如布局)决定巨细

---

如果要设置行拉伸因子，还需要将控件的行尺寸战略设置为 QSizePolicy::Expanding

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
6.     //三行两列，行拉伸比例为1:0:3
7.     QGridLayout *layout = new QGridLayout();
8.     QPushButton *button1 = new QPushButton("按钮1");
9.     QPushButton *button2 = new QPushButton("按钮2");
10.     QPushButton *button3 = new QPushButton("按钮3");
11.     QPushButton *button4 = new QPushButton("按钮4");
12.     QPushButton *button5 = new QPushButton("按钮5");
13.     QPushButton *button6 = new QPushButton("按钮6");
14.     //设置控件的尺寸策略
15.     button1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
16.     button2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
17.     button3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
18.     button4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
19.     button5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
20.     button6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
21.     //将按钮添加到布局管理器中
22.     layout->addWidget(button1, 0, 0);
23.     layout->addWidget(button2, 0, 1);
24.     layout->addWidget(button3, 1, 0);
25.     layout->addWidget(button4, 1, 1);
26.     layout->addWidget(button5, 2, 0);
27.     layout->addWidget(button6, 2, 1);
28.     //设置行拉伸系数为1:0:3
29.     layout->setRowStretch(0, 1);
30.     layout->setRowStretch(1, 0);//第1列行伸系数为0，设置为0，即为固定大小，不参与拉伸
31.     layout->setRowStretch(2, 3);
32.     //将布局管理设置进窗口
33.     this->setLayout(layout);
34. }

复制代码

   利用 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的构造函数

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
7.     QFormLayout *layout = new QFormLayout();
8.     //创建标签
9.     QLabel *label_name = new QLabel("姓名");
10.     QLabel *label_password = new QLabel("密码");
11.     //创建输入框
12.     QLineEdit *edit_name = new QLineEdit();
13.     QLineEdit *edit_password = new QLineEdit();
14.     edit_password->setEchoMode(QLineEdit::Password);
15.     //创建提交按钮
16.     QPushButton *button = new QPushButton("提交");
17.     //添加表单
18.     layout->addRow(label_name, edit_name);
19.     layout->addRow(label_password, edit_password);
20.     layout->addRow(button);
21.     //设置布局管理器
22.     this->setLayout(layout);
23. }

复制代码

QSpacerItem 空缺区域

QSpacerItem 主要用于在布局中添加可调整的空缺区域，使界面更加雅观
焦点属性

属性	阐明
width	宽度
height	高度
hData	水平方向的 sizePolicy Expanding、Ignored、Preferred等等
VDate	垂直方向的 sizePolicy 选项同上

代码示例：layout 是一个水平布局管理器，有两个按钮，在中间和后面添加 QSpacerItem，观察结果

竣事语
感谢你的阅读，如果觉得本篇文章对你有所帮助的话，不妨点个赞支持一下博主，拜托啦，这对我真的很紧张   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。