00. 目錄

文章目錄

• • 00. 目錄
  • 01. 概述
  • 02. 開發(fā)環(huán)境
  • 03. 常用函數(shù)詳解
  • 04. Qt設(shè)計師使用網(wǎng)格布局
  • 05. 使用代碼實現(xiàn)網(wǎng)格布局
  • 06. 附錄

01. 概述

QGridLayout：格柵布局，也被稱作網(wǎng)格布局（多行多列）。

柵格布局將位于其中的窗口部件放入一個網(wǎng)狀的柵格之中。QGridLayout需要將提供給它的空間劃分成的行和列，并把每個窗口部件插入并管理到正確的單元格。 柵格布局是這樣工作的：

它計算了位于其中的空間，然后將它們合理的劃分成若干個行（row）和列（column），并把每個由它管理的窗口部件放置在合適的單元之中，這里所指的單元（cell）即是指由行和列交叉所劃分出來的空間。

在柵格布局中，行和列本質(zhì)上是相同的，只是叫法不同而已。下面將重點討論列，這些內(nèi)容當(dāng)然也適用于行。

在柵格布局中，每個列（以及行）都有一個最小寬度（使用setColumnMinimumWidth()設(shè)置）以及一個伸縮因子（使用setColumnStretch()設(shè)置）。最小寬度指的是位于該列中的窗口部件的最小的寬度，而伸縮因子決定了該列內(nèi)的窗口部件能夠獲得多少空間。

02. 開發(fā)環(huán)境

Windows系統(tǒng)：Windows10

Qt版本：Qt5.15或者Qt6

03. 常用函數(shù)詳解

QGridLayout 類將控件放置到網(wǎng)格中布局，它本身會從父窗口或父布局中占據(jù)盡可能多的界面空間，然后把自己的空間劃分為行和列，再把每個控件塞到設(shè)置好的一個或多個單元格中。

QGridLayout 類既有控制行的函數(shù)，也有對應(yīng)控制列的函數(shù)。對于列來說，有設(shè)置每列的最小寬度的函數(shù)： void setColumnMinimumWidth(int column, int minSize) 如果要設(shè)置各個列在窗口變化時拉伸比例不同，可以用如下函數(shù)： void setColumnStretch(int column, int stretch) 每列控件之間可以設(shè)置布局的水平間隙： void setHorizontalSpacing(int spacing) 對于行，也都有類似的函數(shù)，只是把英文單詞換一下： void setRowMinimumHeight(int row, int minSize) //設(shè)置行最小高度 void setRowStretch(int row, int stretch) //設(shè)置行的伸展因子 void setHorizontalSpacing(int spacing) //設(shè)置行的垂直間隙如果要添加控件或其他布局器、自定義布局條目，使用如下函數(shù)： 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) 函數(shù)第一個參數(shù)都是要添加的控件、布局器或自定義布局條目， row 和 column 是左上角起始的單元格坐標(biāo)， 如果沒有指定 rowSpan 和 columnSpan 那么就是 1*1 的唯一單元格， 指定了 rowSpan 和 columnSpan 就會占據(jù) rowSpan * columnSpan 的小矩形，占據(jù)連續(xù)多行多列單元格。 最后的 alignment 是控件或布局器、布局條目在單元格中的對齊方式，比如水平的左對齊、居中、右對齊，垂直方向頂部對齊、底部對齊、垂直居中等等，具體 的可以查 Qt 幫助文檔。Qt 關(guān)于對齊方式的枚舉常量都是通用的。 通常情況下 QGridLayout 不需要自己添加空白條 QSpacerItem，因為其他功能控件把各自的單元格占據(jù)之后，剩下沒控件占據(jù)的單元格自然就是空的，空的格子默認(rèn)里面什么都沒有，也沒有空白條。 如果要獲知網(wǎng)格有多少行、有多少列（包括空的格子計數(shù)），使用如下函數(shù)： int rowCount() const //行計數(shù) int columnCount() const //列計數(shù) 如果要獲取某個單元格的布局條目，使用： QLayoutItem * itemAtPosition(int row, int column) const 注意，如果某個格子是全空的，也沒有手動添加空白條，那么 itemAtPosition() 返回 NULL 指針。因此使用這個函數(shù)必須判斷返回值是否為空。rowCount * columnCount 是總共的單元格計數(shù)，但并不是控件或子布局的計數(shù)。控件或子布局的計數(shù)用重載的虛函數(shù)： virtual int count() const 用 add* 函數(shù)添加控件或子布局時，每個控件或子布局都對應(yīng)一個序號，這個序號與網(wǎng)格坐標(biāo)是無關(guān)的，是由 add* 函數(shù)添加順序決定的。 QGridLayout 提供了根據(jù)控件或子布局序號查詢單元格位置、分布的函數(shù)（但沒有反查序號的函數(shù)）： void getItemPosition(int index, int * row, int * column, int * rowSpan, int * columnSpan) const getItemPosition() 函數(shù)會填充參數(shù)里的四個指針指向的變量，四個指針指向的變量就是 add* 函數(shù)里面指定的單元格坐標(biāo)和分布。 根據(jù)控件或子布局的序號獲取布局條目的函數(shù)為： virtual QLayoutItem * itemAt(int index) const 根據(jù)控件序號可以從 QGridLayout 中移除布局條目： virtual QLayoutItem * takeAt(int index) 凡是函數(shù)返回值為指針的都要判斷是否為空指針，因為上面函數(shù)的序號如果超出范圍，也會返回空指針。涉及到指針的操作一定要細(xì)心判斷。得到非空的 QLayoutItem 對象指針之后，就可以從 QLayoutItem 對象里提取實際的控件或布局器、空白條： QWidget * QLayoutItem::?widget() QLayout * QLayoutItem::?layout() QSpacerItem * QLayoutItem::?spacerItem() 另外如果是自己定制的 QLayoutItem 派生類對象，可以把獲取的基類對象指針 QLayoutItem * ，通過 dynamic_cast 轉(zhuǎn)成派生類對象指針試試。 注意判斷函數(shù)返回的指針是否為空，非空指針才能進(jìn)行下一步操作。

04. Qt設(shè)計師使用網(wǎng)格布局

第一種方式：選中所有需要使用網(wǎng)格布局的控件，然后鼠標(biāo)右擊選擇布局，然后再選擇網(wǎng)格布局。

第二種方式：選中所有需要使用網(wǎng)格布局的控件，然后在工具欄中選擇使用網(wǎng)格布局。

05. 使用代碼實現(xiàn)網(wǎng)格布局

程序示例一：

#include <QApplication>#include <QGridLayout> #include <QPushButton> #include <QWidget> #include <QObject> #include <QDebug>int main(int argc, char **argv) {QApplication a(argc, argv);QWidget w;//創(chuàng)建布局對象QGridLayout *layout = new QGridLayout();QPushButton *btn1 = new QPushButton;btn1->setText("Test Button 1");//設(shè)置組件大小可以擴(kuò)展btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn1->setMinimumSize(160, 30);QPushButton *btn2 = new QPushButton;btn2->setText("Test Button 2");//設(shè)置組件大小可以擴(kuò)展btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn2->setMinimumSize(160, 30);QPushButton *btn3 = new QPushButton;btn3->setText("Test Button 3");//設(shè)置組件大小可以擴(kuò)展btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn3->setMinimumSize(160, 30);QPushButton *btn4 = new QPushButton;btn4->setText("Test Button 4");//設(shè)置組件大小可以擴(kuò)展btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn4->setMinimumSize(160, 30);//設(shè)置間距layout->setSpacing(10);//網(wǎng)格不同坐標(biāo)添加不同的組件layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 1, 0);layout->addWidget(btn4, 1, 1);//設(shè)置行列比例系數(shù)layout->setRowStretch(0, 1);layout->setRowStretch(1, 3);layout->setColumnStretch(0, 1);layout->setColumnStretch(1, 3);w.setLayout(layout);w.show();return a.exec(); }

執(zhí)行結(jié)果

程序示例二：

#include <QApplication>#include <QGridLayout> #include <QPushButton> #include <QWidget> #include <QObject> #include <QDebug>int main(int argc, char **argv) {QApplication a(argc, argv);QWidget w;//創(chuàng)建布局對象QGridLayout *layout = new QGridLayout();QPushButton *btn1 = new QPushButton("one");QPushButton *btn2 = new QPushButton("two");QPushButton *btn3 = new QPushButton("three");QPushButton *btn4 = new QPushButton("four");QPushButton *btn5 = new QPushButton("five");layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 1, 0, 1, 2);layout->addWidget(btn4, 2, 0);layout->addWidget(btn5, 2, 1);w.setLayout(layout);w.show();return a.exec(); }

執(zhí)行結(jié)果

程序示例三：

#include <QApplication>#include <QGridLayout> #include <QPushButton> #include <QWidget> #include <QObject> #include <QDebug>int main(int argc, char **argv) {QApplication a(argc, argv);QWidget w;//創(chuàng)建布局對象QGridLayout *layout = new QGridLayout();QPushButton *btn1 = new QPushButton;btn1->setText("Test Button 1");//設(shè)置組件大小可以擴(kuò)展btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn1->setMinimumSize(160, 30);QPushButton *btn2 = new QPushButton;btn2->setText("Test Button 2");//設(shè)置組件大小可以擴(kuò)展btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn2->setMinimumSize(160, 30);QPushButton *btn3 = new QPushButton;btn3->setText("Test Button 3");//設(shè)置組件大小可以擴(kuò)展btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn3->setMinimumSize(160, 30);QPushButton *btn4 = new QPushButton;btn4->setText("Test Button 4");//設(shè)置組件大小可以擴(kuò)展btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn4->setMinimumSize(160, 30);//設(shè)置間距layout->setSpacing(10);//網(wǎng)格不同坐標(biāo)添加不同的組件//坐標(biāo)(0, 0)的組件占用兩行一列layout->addWidget(btn1, 0, 0, 2, 1);//坐標(biāo)(0, 1)的組件占用兩行一列layout->addWidget(btn2, 0, 1, 2, 1);//坐標(biāo)(2, 0)的組件占用一行兩列layout->addWidget(btn3, 2, 0, 1, 2);//坐標(biāo)(3, 0)的組件占用一行兩列layout->addWidget(btn4, 3, 0, 1, 2);w.setLayout(layout);w.show();return a.exec(); }

執(zhí)行結(jié)果

程序示例四：

#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;//創(chuàng)建布局對象QGridLayout *gLayout = new QGridLayout();QVBoxLayout *vLayout = new QVBoxLayout();QPushButton *btn1 = new QPushButton;btn1->setText("Test Button 1");//設(shè)置組件大小可以擴(kuò)展btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn1->setMinimumSize(160, 30);QPushButton *btn2 = new QPushButton;btn2->setText("Test Button 2");//設(shè)置組件大小可以擴(kuò)展btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn2->setMinimumSize(160, 30);QPushButton *btn3 = new QPushButton;btn3->setText("Test Button 3");//設(shè)置組件大小可以擴(kuò)展btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn3->setMinimumSize(160, 30);QPushButton *btn4 = new QPushButton;btn4->setText("Test Button 4");//設(shè)置組件大小可以擴(kuò)展btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn4->setMinimumSize(160, 30);QPushButton *btn5 = new QPushButton;btn5->setText("Test Button 5");//設(shè)置組件大小可以擴(kuò)展btn5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//設(shè)置最小尺寸btn5->setMinimumSize(160, 30);gLayout->setSpacing(10);//編號為1 2 3的進(jìn)行網(wǎng)格布局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(); }

執(zhí)行結(jié)果：

程序示例五：

#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;// 構(gòu)建控件 頭像、用戶名、密碼輸入框等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);// 設(shè)置頭像QPixmap pixmap("../image/b.png");pImageLabel->setFixedSize(90, 90);pImageLabel->setPixmap(pixmap);pImageLabel->setScaledContents(true);// 設(shè)置文本pUserLineEdit->setPlaceholderText(QStringLiteral("QQ號碼/手機(jī)/郵箱"));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);// 設(shè)置水平間距pLayout->setHorizontalSpacing(10);// 設(shè)置垂直間距pLayout->setVerticalSpacing(10);// 設(shè)置外間距pLayout->setContentsMargins(10, 10, 10, 10);w.setLayout(pLayout);w.show();return a.exec(); }

執(zhí)行結(jié)果:

06. 附錄

6.1 Qt教程匯總
網(wǎng)址：https://dengjin.blog.csdn.net/article/details/115174639

總結(jié)

以上是生活随笔為你收集整理的【Qt】Qt之网格布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。