【Qt】Qt之网格布局

一时失言乱红尘 2022-11-15 03:51 350阅读 0赞

## 00. 目录 ##

### 文章目录 ###

*   *  00. 目录
     *  01. 概述
     *  02. 开发环境
     *  03. 常用函数详解
     *  04. Qt设计师使用网格布局
     *  05. 使用代码实现网格布局
     *  06. 附录

## 01. 概述 ##

QGridLayout：格栅布局，也被称作网格布局（多行多列）。

栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的：

它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中，这里所指的单元（cell）即是指由行和列交叉所划分出来的空间。

在栅格布局中，行和列本质上是相同的，只是叫法不同而已。下面将重点讨论列，这些内容当然也适用于行。

在栅格布局中，每个列（以及行）都有一个最小宽度（使用setColumnMinimumWidth()设置）以及一个伸缩因子（使用setColumnStretch()设置）。最小宽度指的是位于该列中的窗口部件的最小的宽度，而伸缩因子决定了该列内的窗口部件能够获得多少空间。

## 02. 开发环境 ##

**Windows系统**：Windows10

**Qt版本**：Qt5.15或者Qt6

## 03. 常用函数详解 ##

QGridLayout 类将控件放置到网格中布局，它本身会从父窗口或父布局中占据尽可能多的界面空间，然后把自己的空间划分为行和列，再把每个控件塞到设置好的一个或多个单元格中。

QGridLayout 类既有控制行的函数，也有对应控制列的函数。对于列来说，有设置每列的最小宽度的函数：
    void setColumnMinimumWidth(int column, int minSize)
    如果要设置各个列在窗口变化时拉伸比例不同，可以用如下函数：
    void setColumnStretch(int column, int stretch)
    每列控件之间可以设置布局的水平间隙：
    void setHorizontalSpacing(int spacing)
    对于行，也都有类似的函数，只是把英文单词换一下：
    void setRowMinimumHeight(int row, int minSize) //设置行最小高度
    void setRowStretch(int row, int stretch)       //设置行的伸展因子
    void setHorizontalSpacing(int spacing)         //设置行的垂直间隙
    
    如果要添加控件或其他布局器、自定义布局条目，使用如下函数：
    void addWidget(QWidget * widget, int row, int column, Qt::Alignment alignment = 0)
    void addWidget(QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0)
    void addLayout(QLayout * layout, int row, int column, Qt::Alignment alignment = 0)
    void addLayout(QLayout * layout, int row, int column, int rowSpan, int columnSpan, Qt::Alignment alignment = 0)
    void addItem(QLayoutItem * item, int row, int column, int rowSpan = 1, int columnSpan = 1, Qt::Alignment alignment = 0)
    函数第一个参数都是要添加的控件、布局器或自定义布局条目，
    row 和 column 是左上角起始的单元格坐标，
    如果没有指定 rowSpan 和 columnSpan 那么就是 1*1 的唯一单元格，
    指定了 rowSpan 和 columnSpan 就会占据 rowSpan * columnSpan 的小矩形，占据连续多行多列单元格。
    最后的 alignment 是控件或布局器、布局条目在单元格中的对齐方式，比如水平的左对齐、居中、右对齐，垂直方向顶部对齐、底部对齐、垂直居中等等，具体 的可以查 Qt 帮助文档。Qt 关于对齐方式的枚举常量都是通用的。
    通常情况下 QGridLayout 不需要自己添加空白条 QSpacerItem，因为其他功能控件把各自的单元格占据之后，剩下没控件占据的单元格自然就是空的，空的格子默认里面什么都没有，也没有空白条。
    如果要获知网格有多少行、有多少列（包括空的格子计数），使用如下函数：
    int rowCount() const      //行计数
    int columnCount() const   //列计数
    如果要获取某个单元格的布局条目，使用：
    QLayoutItem * itemAtPosition(int row, int column) const
    注意，如果某个格子是全空的，也没有手动添加空白条，那么 itemAtPosition() 返回 NULL 指针。因此使用这个函数必须判断返回值是否为空。
    
    rowCount * columnCount 是总共的单元格计数，但并不是控件或子布局的计数。控件或子布局的计数用重载的虚函数：
    virtual int count() const
    用 add* 函数添加控件或子布局时，每个控件或子布局都对应一个序号，这个序号与网格坐标是无关的，是由 add* 函数添加顺序决定的。
    QGridLayout 提供了根据控件或子布局序号查询单元格位置、分布的函数（但没有反查序号的函数）：
    void getItemPosition(int index, int * row, int * column, int * rowSpan, int * columnSpan) const
    getItemPosition() 函数会填充参数里的四个指针指向的变量，四个指针指向的变量就是 add* 函数里面指定的单元格坐标和分布。
    根据控件或子布局的序号获取布局条目的函数为：
    virtual QLayoutItem * itemAt(int index) const
    根据控件序号可以从 QGridLayout 中移除布局条目：
    virtual QLayoutItem * takeAt(int index)
    凡是函数返回值为指针的都要判断是否为空指针，因为上面函数的序号如果超出范围，也会返回空指针。涉及到指针的操作一定要细心判断。
    
    得到非空的 QLayoutItem 对象指针之后，就可以从 QLayoutItem 对象里提取实际的控件或布局器、空白条：
    QWidget * QLayoutItem::widget()
    QLayout * QLayoutItem::layout()
    QSpacerItem * QLayoutItem::spacerItem()
    另外如果是自己定制的 QLayoutItem 派生类对象，可以把获取的基类对象指针 QLayoutItem * ，通过 dynamic_cast 转成派生类对象指针试试。 注意判断函数返回的指针是否为空，非空指针才能进行下一步操作。

## 04. Qt设计师使用网格布局 ##

第一种方式：选中所有需要使用网格布局的控件，然后鼠标右击选择布局，然后再选择网格布局。

第二种方式：选中所有需要使用网格布局的控件，然后在工具栏中选择使用网格布局。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]

## 05. 使用代码实现网格布局 ##

程序示例一：

#include <QApplication>
    
    #include <QGridLayout>
    #include <QPushButton>
    #include <QWidget>
    #include <QObject>
    #include <QDebug>
    
    int main(int argc, char **argv)
    { 
        QApplication a(argc, argv);
    
        QWidget w;
    
        //创建布局对象
        QGridLayout *layout = new QGridLayout();
    
        QPushButton *btn1 = new QPushButton;
        btn1->setText("Test Button 1");
        //设置组件大小可以扩展
        btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn1->setMinimumSize(160, 30);
    
    
        QPushButton *btn2 = new QPushButton;
        btn2->setText("Test Button 2");
        //设置组件大小可以扩展
        btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn2->setMinimumSize(160, 30);
    
        QPushButton *btn3 = new QPushButton;
        btn3->setText("Test Button 3");
        //设置组件大小可以扩展
        btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn3->setMinimumSize(160, 30);
    
        QPushButton *btn4 = new QPushButton;
        btn4->setText("Test Button 4");
        //设置组件大小可以扩展
        btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn4->setMinimumSize(160, 30);
    
    
        //设置间距
        layout->setSpacing(10);
        //网格不同坐标添加不同的组件
        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, 3);
        layout->setColumnStretch(0, 1);
        layout->setColumnStretch(1, 3);
    
        w.setLayout(layout);
        w.show();
    
        return a.exec();
    }

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]

程序示例二：

执行结果  
![在这里插入图片描述][20210330221543590.png]

程序示例三：

#include <QApplication>
    
    #include <QGridLayout>
    #include <QPushButton>
    #include <QWidget>
    #include <QObject>
    #include <QDebug>
    
    int main(int argc, char **argv)
    { 
        QApplication a(argc, argv);
    
        QWidget w;
    
        //创建布局对象
        QGridLayout *layout = new QGridLayout();
    
        QPushButton *btn1 = new QPushButton;
        btn1->setText("Test Button 1");
        //设置组件大小可以扩展
        btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn1->setMinimumSize(160, 30);
    
    
        QPushButton *btn2 = new QPushButton;
        btn2->setText("Test Button 2");
        //设置组件大小可以扩展
        btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn2->setMinimumSize(160, 30);
    
        QPushButton *btn3 = new QPushButton;
        btn3->setText("Test Button 3");
        //设置组件大小可以扩展
        btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn3->setMinimumSize(160, 30);
    
        QPushButton *btn4 = new QPushButton;
        btn4->setText("Test Button 4");
        //设置组件大小可以扩展
        btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn4->setMinimumSize(160, 30);
    
    
        //设置间距
        layout->setSpacing(10);
        //网格不同坐标添加不同的组件
        //坐标(0, 0)的组件占用两行一列
        layout->addWidget(btn1, 0, 0, 2, 1);
        //坐标(0, 1)的组件占用两行一列
        layout->addWidget(btn2, 0, 1, 2, 1);
        //坐标(2, 0)的组件占用一行两列
        layout->addWidget(btn3, 2, 0, 1, 2);
        //坐标(3, 0)的组件占用一行两列
        layout->addWidget(btn4, 3, 0, 1, 2);
    
    
        w.setLayout(layout);
        w.show();
    
        return a.exec();
    }

执行结果  
![在这里插入图片描述][20210330221554610.png]

程序示例四：

#include <QApplication>
    
    #include <QGridLayout>
    #include <QVBoxLayout>
    #include <QPushButton>
    #include <QWidget>
    #include <QObject>
    #include <QDebug>
    
    int main(int argc, char **argv)
    { 
        QApplication a(argc, argv);
    
        QWidget w;
    
        //创建布局对象
        QGridLayout *gLayout = new QGridLayout();
        QVBoxLayout *vLayout = new QVBoxLayout();
    
        QPushButton *btn1 = new QPushButton;
        btn1->setText("Test Button 1");
        //设置组件大小可以扩展
        btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn1->setMinimumSize(160, 30);
    
    
        QPushButton *btn2 = new QPushButton;
        btn2->setText("Test Button 2");
        //设置组件大小可以扩展
        btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn2->setMinimumSize(160, 30);
    
        QPushButton *btn3 = new QPushButton;
        btn3->setText("Test Button 3");
        //设置组件大小可以扩展
        btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn3->setMinimumSize(160, 30);
    
        QPushButton *btn4 = new QPushButton;
        btn4->setText("Test Button 4");
        //设置组件大小可以扩展
        btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn4->setMinimumSize(160, 30);
    
        QPushButton *btn5 = new QPushButton;
        btn5->setText("Test Button 5");
        //设置组件大小可以扩展
        btn5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        //设置最小尺寸
        btn5->setMinimumSize(160, 30);
    
        gLayout->setSpacing(10);
    
        //编号为1 2 3的进行网格布局
        gLayout->addWidget(btn1, 0, 0);
        gLayout->addWidget(btn2, 0, 1);
        gLayout->addWidget(btn3, 1, 0);
    
        //将编号为4 5的按钮添加到垂直布局器中
        vLayout->addWidget(btn4);
        vLayout->addWidget(btn5);
    
        //布局管理器嵌套
        gLayout->addLayout(vLayout, 1, 1);
    
    
        w.setLayout(gLayout);
        w.show();
    
        return a.exec();
    }

执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]

程序示例五：

#include <QApplication>
    
    #include <QGridLayout>
    #include <QVBoxLayout>
    #include <QPushButton>
    #include <QWidget>
    #include <QObject>
    #include <QLabel>
    #include <QLineEdit>
    #include <QCheckBox>
    #include <QDebug>
    
    int main(int argc, char **argv)
    { 
        QApplication a(argc, argv);
    
        QWidget w;
        // 构建控件 头像、用户名、密码输入框等
        QLabel *pImageLabel = new QLabel;
        QLineEdit *pUserLineEdit = new QLineEdit;
        QLineEdit *pPasswordLineEdit = new QLineEdit;
        QCheckBox *pRememberCheckBox = new QCheckBox;
        QCheckBox *pAutoLoginCheckBox = new QCheckBox;
        QPushButton *pLoginButton = new QPushButton;
        QPushButton *pRegisterButton = new QPushButton;
        QPushButton *pForgotButton = new QPushButton;
    
        pLoginButton->setFixedHeight(30);
        pUserLineEdit->setFixedWidth(200);
    
        // 设置头像
        QPixmap pixmap("../image/b.png");
        pImageLabel->setFixedSize(90, 90);
        pImageLabel->setPixmap(pixmap);
        pImageLabel->setScaledContents(true);
    
        // 设置文本
        pUserLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));
        pPasswordLineEdit->setPlaceholderText(QStringLiteral("密码"));
        pPasswordLineEdit->setEchoMode(QLineEdit::Password);
        pRememberCheckBox->setText(QStringLiteral("记住密码"));
        pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));
        pLoginButton->setText(QStringLiteral("登录"));
        pRegisterButton->setText(QStringLiteral("注册账号"));
        pForgotButton->setText(QStringLiteral("找回密码"));
    
        QGridLayout *pLayout = new QGridLayout();
        // 头像 第0行，第0列开始，占3行1列
        pLayout->addWidget(pImageLabel, 0, 0, 3, 1);
        // 用户名输入框 第0行，第1列开始，占1行2列
        pLayout->addWidget(pUserLineEdit, 0, 1, 1, 2);
        pLayout->addWidget(pRegisterButton, 0, 4);
        // 密码输入框 第1行，第1列开始，占1行2列
        pLayout->addWidget(pPasswordLineEdit, 1, 1, 1, 2);
        pLayout->addWidget(pForgotButton, 1, 4);
        // 记住密码 第2行，第1列开始，占1行1列 水平居左 垂直居中
        pLayout->addWidget(pRememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
        // 自动登录 第2行，第2列开始，占1行1列 水平居右 垂直居中
        pLayout->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
        // 登录按钮 第3行，第1列开始，占1行2列
        pLayout->addWidget(pLoginButton, 3, 1, 1, 2);
        // 设置水平间距
        pLayout->setHorizontalSpacing(10);
        // 设置垂直间距
        pLayout->setVerticalSpacing(10);
        // 设置外间距
        pLayout->setContentsMargins(10, 10, 10, 10);
        w.setLayout(pLayout);
    
    
        w.show();
    
        return a.exec();
    }

执行结果:  
![在这里插入图片描述][20210330222335311.png]

## 06. 附录 ##

**6.1 Qt教程汇总**  
网址：[https://dengjin.blog.csdn.net/article/details/115174639][https_dengjin.blog.csdn.net_article_details_115174639]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: /images/20221022/ff250569916d409a89de13f28c808457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/6521b39c9d6144fcb48b040aa39f5a98.png
[20210330221543590.png]: /images/20221022/f545648f643641d6b1d82be9ab04bfe6.png
[20210330221554610.png]: /images/20221022/b222da482ddc41b9a132df1e712ab5bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210330221605480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng==,size_16,color_FFFFFF,t_70
[20210330222335311.png]: https://img-blog.csdnimg.cn/20210330222335311.png
[https_dengjin.blog.csdn.net_article_details_115174639]: https://dengjin.blog.csdn.net/article/details/115174639