QGridLayout（表格布局）详细使用说明

骑猪看日落 2022-09-05 14:52 2130阅读 0赞

**目录**

1.概述

2.图解表格布局中的常用术语和概念

2.1 表格布局有哪些属性

2.2 Margin(边距)

2.3 Spacing(间隔)

2.4 Strech(纵向和横向拉伸系数)

2.5 最小行高与最小列宽

2.6 SizeConstraint(尺寸控制模式)

3.基础用法

3.1 使用Qt设计师创建布局

3.2 使用代码创建布局

GridLayoutTest.h

GridLayoutTest.cpp

3.3 在指定的行和列中添加控件

3.4 在表格布局内部再嵌套布局

3.5 设置常见属性

3.6 设置尺寸控制模式

3.7 设置表格坐标原点

--------------------

# 1.概述 #

QGridLayout类在网格中布局小部件。

QGridLayout获取可用空间（通过其父布局或parentWidget()），将其划分为行和列，并将其管理的每个小部件放入正确的单元格中。

每列都有一个最小宽度和一个拉伸系数。最小宽度是使用setColumnMinimumWidth()设置的。拉伸因子是使用setColumnStretch()设置的，它决定了该列将获得多少可用空间，以及超过其必要的最小值。

通常，使用addWidget()将每个托管小部件或布局放入自己的单元格中。小部件也可以使用addItem()和addWidget()的跨行和跨列重载来占用多个单元格。如果这样做，QGridLayout将猜测如何在列/行上分布大小（基于拉伸系数）。

要从布局中删除小部件，请调用removeWidget()。在小部件上调用QWidget::hide()也可以有效地从布局中删除小部件，直到调用QWidget::show()。

此图显示了一个带有五列三行网格的对话框片段（网格以洋红色重叠显示）：

![20210818172223109.png][]

这个对话框片段中的第0、2和4列由QLabel、QLineEdit和QListBox组成。列1和3是由setColumnMinimumWidth()生成的占位符。第0行包含三个QLabel对象，第1行包含三个QLineEdit对象，第2行包含三个QListBox对象。我们使用占位符列(1和3)来获得列之间适当的空间。  
请注意，列和行不是同样宽或同样高。如果希望两列具有相同的宽度，则必须将它们的最小宽度和拉伸因子设置为相同。可以使用setColumnMinimumWidth()和setColumnStretch()来实现。

如果QGridLayout不是顶级布局(即不管理所有小部件的区域和子部件)，你必须在创建它时将它添加到其父布局中，但在你对它做任何事情之前。添加布局的通常方法是在父布局上调用addLayout()。一旦添加了布局，就可以开始使用addWidget()、addItem()和addLayout()将小部件和其他布局放入网格布局的单元格中。

QGridLayout还包括两个边距:内容边距和spacing()。内容边距是QGridLayout四个边中每个边的预留空间的宽度。spacing()是相邻框之间自动分配的间距的宽度。

默认的内容边距值由样式提供。Qt样式指定的默认值是子小部件9，窗口11。间距默认为与顶级布局的边距宽度相同，或与父布局相同。

# 2.图解表格布局中的常用术语和概念 #

## 2.1 表格布局有哪些属性 ##

为了方便描述，此节均以Qt设计师的截图来说明，下图展示了Qt设计师提供的可编辑的属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70][]

## 2.2 Margin(边距) ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1][]

## 2.3 Spacing(间隔) ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2][]

##  2.4 Strech(纵向和横向拉伸系数)![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3][] ##

## 2.5 最小行高与最小列宽 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4][]

## 2.6 SizeConstraint(尺寸控制模式) ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5][]

# 3.基础用法 #

## 3.1 使用Qt设计师创建布局 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6][]

## 3.2 使用代码创建布局 ##

### GridLayoutTest.h  ###

#pragma once
 
 #include <QtWidgets/QMainWindow>
 #include "ui_GridLayoutTest.h"
 #include "QGridLayout"
 
 class GridLayoutTest : public QMainWindow
 {
 Q_OBJECT
 
 public:
 GridLayoutTest(QWidget *parent = Q_NULLPTR);
 
 private:
 Ui::GridLayoutTestClass ui;
 QGridLayout *m_pLayout;
 };

### GridLayoutTest.cpp ###

#include "GridLayoutTest.h"
    #include "QPushButton"
    
    GridLayoutTest::GridLayoutTest(QWidget *parent)
        : QMainWindow(parent)
    {
        ui.setupUi(this);
        m_pLayout = new QGridLayout;
        ui.centralWidget->setLayout(m_pLayout);
    
        QPushButton *btn1 = new QPushButton("btn1");
        QPushButton *btn2 = new QPushButton("btn2");
        QPushButton *btn3 = new QPushButton("btn3");
        QPushButton *btn4 = new QPushButton("btn4");
        QPushButton *btn5 = new QPushButton("btn5");
    
        m_pLayout->addWidget(btn1);
        m_pLayout->addWidget(btn2);
        m_pLayout->addWidget(btn3);
        m_pLayout->addWidget(btn4);
        m_pLayout->addWidget(btn5);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7][]

## 3.3 在指定的行和列中添加控件 ##

3.2节中的代码没有指定行和列，所以显示效果看起来不像是表格，反而像是垂直布局，下面来看一下如何指定行和列。

m_pLayout->addWidget(btn1,0,0);//添加到（第0行，第0列）
        m_pLayout->addWidget(btn2,0,1);//添加到（第0行，第1列）
        m_pLayout->addWidget(btn3,0,2);//添加到（第0行，第2列）
        m_pLayout->addWidget(btn4,1,0);//添加到（第1行，第0列）
        m_pLayout->addWidget(btn5,1,1);//添加到（第1行，第1列）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8][]

##  3.4 在表格布局内部再嵌套布局 ##

QPushButton *btn1 = new QPushButton("btn1");
        QPushButton *btn2 = new QPushButton("btn2");
        QPushButton *btn3 = new QPushButton("btn3");
        QPushButton *btn4 = new QPushButton("btn4");
        QPushButton *btn5 = new QPushButton("btn5");
    
        //在表格布局内部再嵌套布局
        QTextEdit *pEdit = new QTextEdit;
        QVBoxLayout *pVLayout = new QVBoxLayout;
        pVLayout->addWidget(btn1);
        pVLayout->addWidget(pEdit);
    
        m_pLayout->addLayout(pVLayout,0,0);
        m_pLayout->addWidget(btn2,0,1);//添加到（第0行，第1列）
        m_pLayout->addWidget(btn3,0,2);//添加到（第0行，第2列）
        m_pLayout->addWidget(btn4,1,0);//添加到（第1行，第0列）
        m_pLayout->addWidget(btn5,1,1);//添加到（第1行，第1列）

可以看到在第一列第一行中，btn1和pEdit是垂直布局的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 9][]

## 3.5 设置常见属性 ##

//设置最小列宽

void setColumnMinimumWidth(int column, int minSize)

//设置最小行高

void setRowMinimumHeight(int row, int minSize)

//设置每一列的列宽比例

void setColumnStretch(int column, int stretch)

//设置每一行的行高比例

void setRowStretch(int row, int stretch)

//设置水平方向各控件的间隔

void setHorizontalSpacing(int spacing)

//同时设置设置水平方向和垂直方向上各控件的间隔

void setSpacing(int spacing)

//设置垂直方向各控件的间隔

void setVerticalSpacing(int spacing)

## 3.6 设置尺寸控制模式 ##

通过如下函数设置：

void setSizeConstraint(SizeConstraint)

其参数有如下可选值：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:165pt;">Constant</td> 
 <td style="text-align:left;vertical-align:bottom;width:54pt;">Value</td> 
 <td style="vertical-align:bottom;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetDefaultConstraint</td> 
 <td style="text-align:left;vertical-align:bottom;">0</td> 
 <td style="vertical-align:bottom;">主小部件的最小尺寸被设置为minimumSize()，除非小部件已经有了最小尺寸。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetFixedSize</td> 
 <td style="text-align:left;vertical-align:bottom;">3</td> 
 <td style="vertical-align:bottom;">主部件的尺寸被设置为sizeHint();它根本无法调整尺寸。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetMinimumSize</td> 
 <td style="text-align:left;vertical-align:bottom;">2</td> 
 <td style="vertical-align:bottom;">主部件的最小尺寸设置为minimumSize();不能再小了。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetMaximumSize</td> 
 <td style="text-align:left;vertical-align:bottom;">4</td> 
 <td style="vertical-align:bottom;">主部件的最大尺寸设置为maximumSize();不能再大了。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetMinAndMaxSize</td> 
 <td style="text-align:left;vertical-align:bottom;">5</td> 
 <td style="vertical-align:bottom;">主小部件的最小尺寸设置为minimumSize()，最大尺寸设置为maximumSize()。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">QLayout::SetNoConstraint</td> 
 <td style="text-align:left;vertical-align:bottom;">1</td> 
 <td style="vertical-align:bottom;">小部件不受约束。</td> 
 </tr> 
 </tbody> 
</table>

##  3.7 设置表格坐标原点 ##

通过如下函数设置：

void setOriginCorner(Qt::Corner corner)

其参数有如下可选值：

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#eeeeee;vertical-align:middle;width:165pt;">Constant</td> 
 <td style="background-color:#eeeeee;vertical-align:middle;width:54pt;">Value</td> 
 <td style="background-color:#eeeeee;vertical-align:middle;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:165pt;">Qt::TopLeftCorner</td> 
 <td style="vertical-align:middle;width:54pt;">0x00000</td> 
 <td style="vertical-align:middle;">以矩形的左上角为原点。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:165pt;">Qt::TopRightCorner</td> 
 <td style="vertical-align:middle;width:54pt;">0x00001</td> 
 <td style="vertical-align:middle;">以矩形的右上角为原点。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:165pt;">Qt::BottomLeftCorner</td> 
 <td style="vertical-align:middle;width:54pt;">0x00002</td> 
 <td style="vertical-align:middle;">以矩形的左下角为原点。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:165pt;">Qt::BottomRightCorner</td> 
 <td style="vertical-align:middle;width:54pt;">0x00003</td> 
 <td style="vertical-align:middle;">以矩形的右下角为原点。</td> 
 </tr> 
 </tbody> 
</table>

[20210818172223109.png]: /images/20220829/b14bf5547bb14ff78cda1ace435f1490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70]: /images/20220829/5e8732b0bd9542dca17d9dffe1dde859.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1]: /images/20220829/65018adca0884796b63d60971ea9b4dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2]: /images/20220829/4223ee1229cf4c53aa9bf67481daef2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3]: /images/20220829/6f86ae0d2183441f9f9452eb882233c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4]: /images/20220829/7461b0ec14d143a6830dd7bd63cc883e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5]: /images/20220829/8ef637147e8a45c987b5568370d636cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6]: /images/20220829/1e5050be47a84677812a99b58bc65054.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7]: /images/20220829/15ef016c2d6944718d514083e03e75ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8]: /images/20220829/643b32e6db4748909e68fd5b239603de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 9]: /images/20220829/56386c0b6d1d4f42a715517f809149c7.png