目錄

2 如何使用Layouts部件

2.1 QBoxLayout組件-垂直或水平布局

2.2 QGridLayout組件-網(wǎng)格布局

2.3 QFormLayout組件-表單布局

在Qt中，布局管理器（Layouts）是用來管理窗口中控件位置和大小的重要工具。布局管理器可以確保窗口中的控件在不同尺寸的窗口中正確排列和調(diào)整大小，使得界面具有良好的可伸縮性和適應性。

1. 垂直布局（Vertical Layout）：垂直布局是一種布局方式，它會按照垂直方向依次排列控件。在Qt中，可以使用QVBoxLayout來創(chuàng)建垂直布局。通過使用這些布局管理器，你可以更加便捷地設計和管理界面，使得界面布局更加靈活和美觀。
2. 水平布局（Horizontal Layout）：水平布局是一種布局方式，它會按照水平方向依次排列控件。在Qt中，可以使用QHBoxLayout來創(chuàng)建水平布局。
3. 網(wǎng)格布局（Grid Layout）：網(wǎng)格布局是一種布局方式，它會將控件放置在一個二維的網(wǎng)格中，每個控件占據(jù)一個網(wǎng)格。在Qt中，可以使用QGridLayout來創(chuàng)建網(wǎng)格布局。
4. 表單布局（Form Layout）：表單布局是一種專門用于表單設計的布局方式，它會將標簽和輸入控件進行組合，使得界面看起來更加整潔。在Qt中，可以使用QFormLayout來創(chuàng)建表單布局。

2 如何使用Layouts部件

2.1 QBoxLayout組件-垂直或水平布局

垂直或水平布局，使用幾個按鈕，將他們設置為垂直排布和水平排布，以及設置它們的一些屬性。

在Qt中，QBoxLayout是一個抽象基類，用于管理布局中的控件。QBoxLayout有兩個具體的子類：QVBoxLayout和QHBoxLayout，分別用于垂直布局和水平布局。QBoxLayout提供了一些方法和屬性，用于設置布局的各種屬性和功能。QBoxLayout的常用方法和功能設置：

• 將一個控件添加到布局中。addWidget(widget, stretch=0, alignment=0)：stretch參數(shù)用于設置控件在布局中的拉伸因子，alignment參數(shù)用于設置控件在布局中的對齊方式。
• 將一個布局添加到當前布局中。addLayout(layout, stretch=0)：stretch參數(shù)用于設置布局在父布局中的拉伸因子。
• 在指定位置插入一個控件。insertWidget(index, widget, stretch=0, alignment=0)
• 在指定位置插入一個布局。insertLayout(index, layout, stretch=0)
• 設置指定位置的控件或布局的拉伸因子。setStretch(index, stretch)
• 設置指定控件的對齊方式。setAlignment(widget, alignment)
• 設置布局中控件之間的間距。setSpacing(spacing)
• 設置布局的內(nèi)容邊距。setContentsMargins(left, top, right, bottom)

案例：使用幾個按鈕，將他們設置為垂直排布和水平排布，以及設置它們的一些屬性。

（1）首先按照文章新建項目（Qt教程 — 1.3 如何創(chuàng)建Qt項目-CSDN博客）。

（2）在頭文件“mainwindow.h”修改代碼，具體代碼如下。1）導入<QHBoxLayout>、<QVBoxLayout>、<QPushButton>文件 —> 2）聲明一個QPushButton、QWidget、QHBoxLayout對象。完整代碼如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPushButton>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// 聲明按鈕對象數(shù)組QPushButton *pushButton[6];// 定義兩個 widget，用于容納排布按鈕QWidget *hWidget;QWidget *vWidget;// QHBoxLayout 與 QVBoxLayout 對象QHBoxLayout *hLayout;QVBoxLayout *vLayout;  
};
#endif // MAINWINDOW_H

（3）在文件“mainwindow.cpp”修改代碼，具體代碼如下。 1）設置主窗體的顯示位置與大小。—>2）實例化兩個QWidget、QHBoxLayout、QVBoxLayout對象。—>3）實例化6個QPushButton，將按鈕垂直和水平布局中。—>4）設置布局間的間距。

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 設置主窗口的位置與大小this->setGeometry(0, 0, 800, 480);// 實例化與設置位置大小hWidget = new QWidget(this);hWidget->setGeometry(0, 0, 400, 50);vWidget = new QWidget(this);vWidget->setGeometry(0, 50, 400, 100);hLayout = new QHBoxLayout();vLayout = new QVBoxLayout();// QList<T>是 Qt 的一種泛型容器類。它以鏈表方式存儲一組值， 并能對這組數(shù)據(jù)進行快速索引QList <QString>list;// 將字符串值插入 listlist<<"按鈕1"<<"按鈕2"<<"按鈕3"<<"按鈕4"<<"按鈕5"<<"按鈕6";// 用一個循環(huán)實例化 6 個按鈕 */for(int i = 0; i < 6; i++){pushButton[i] = new QPushButton();pushButton[i]->setText(list[i]);if(i < 3) {// 將按鈕添加至 hLayout 中hLayout->addWidget(pushButton[i]);} else {// 將按鈕添加至 vLayout 中vLayout->addWidget(pushButton[i]);}}// 設置間隔為 50hLayout->setSpacing(10);//hWidget 與 vWidget 的布局設置為 hLayout/vLayouthWidget->setLayout(hLayout);vWidget->setLayout(vLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程序編譯運行的結果如下?？梢钥吹皆?hWidget 中添加了 3 個水平排布的按鈕，在 vWidget中添加了 3 個垂直排布的按鈕。?

2.2 QGridLayout組件-網(wǎng)格布局

在Qt中，QGridLayout是用于創(chuàng)建網(wǎng)格布局的類，可以將控件按照行和列的方式進行排列。QGridLayout提供了一系列方法和屬性，用于設置布局的各種功能和屬性。QGridLayout的常用方法和功能設置：

1. 將一個控件添加到網(wǎng)格布局中。addWidget(widget, row, column, rowSpan=1, columnSpan=1, alignment=0)：row和column參數(shù)指定控件應該放置在哪一行和哪一列，rowSpan和columnSpan參數(shù)指定控件應該跨越多少行和多少列，alignment參數(shù)指定控件在網(wǎng)格中的對齊方式。

2. 將一個布局添加到網(wǎng)格布局中。addLayout(layout, row, column, rowSpan=1, columnSpan=1, alignment=0)

3. 設置指定行的拉伸因子，控制行的高度。setRowStretch(row, stretch)

4. 設置指定列的拉伸因子，控制列的寬度。setColumnStretch(column, stretch)

5. 設置指定行的最小高度。setRowMinimumHeight(row, minSize)

6. 設置指定列的最小寬度。setColumnMinimumWidth(column, minSize)

7. 設置網(wǎng)格布局中控件之間的間距。setSpacing(spacing)

8. 設置網(wǎng)格布局的內(nèi)容邊距。setContentsMargins(left, top, right, bottom)

按鈕：使用幾個按鈕，將他們設置為網(wǎng)格布局，同時設置它們的行、列比例系數(shù)（拉伸因子），以及設置它們的一些屬性。

（1）首先按照文章新建項目（Qt教程 — 1.3 如何創(chuàng)建Qt項目-CSDN博客）。

（2）在頭文件“mainwindow.h”修改代碼，具體代碼如下。1）導入<QGridLayout>、<QPushButton>文件 —> 2）聲明一個QPushButton、QWidget、QGridLayout對象。完整代碼如下。

?
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QPushButton>
#include <QGridLayout>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// 聲明 widget 窗口部件，用于容納下面 4 個 pushButton 按鈕QWidget *gWidget;// 聲明 QGridLayout 對象QGridLayout *gridLayout;// 聲明 pushButton 按鈕數(shù)組QPushButton *pushButton[4];
};
#endif // MAINWINDOW_H?

（3）在文件“mainwindow.cpp”修改代碼，具體代碼如下。 1）設置主窗體的顯示位置與大小?！?gt;2）實例化兩個QGridLayout對象。—>3）實例化4個QPushButton，將按鈕網(wǎng)格布局中?！?gt;4）設置布局間的比例系數(shù)。

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 設置主窗口的位置與大小this->setGeometry(0, 0, 800, 480);/******* 2 *******/// 實例化gWidget = new QWidget(this);// 設置 gWidget 居中央this->setCentralWidget(gWidget);gridLayout = new QGridLayout();// QList 鏈表，字符串類型QList <QString> list;list<<"按鈕 1"<<"按鈕 2"<<"按鈕 3"<<"按鈕 4";for (int i = 0; i < 4; i++){pushButton[i] = new QPushButton();pushButton[i]->setText(list[i]);// 設置最小寬度與高度pushButton[i]->setMinimumSize(100, 30);// 自動調(diào)整按鈕的大小pushButton[i]->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);switch (i) {case 0:/* 將 pushButton[0]添加至網(wǎng)格的坐標(0,0),下同 */gridLayout->addWidget(pushButton[i], 0, 0);break;case 1:gridLayout->addWidget(pushButton[i], 0, 1);break;case 2:gridLayout->addWidget(pushButton[i], 1, 0);break;case 3:gridLayout->addWidget(pushButton[i], 1, 1);break;default:break;}}// 設置第 0 行與第 1 行的行比例系數(shù)gridLayout->setRowStretch(1, 1);gridLayout->setRowStretch(1, 1);// 設置第 0 列與第 1 列的列比例系數(shù)gridLayout->setColumnStretch(1, 1);gridLayout->setColumnStretch(1, 1);// 將 gridLayout 設置到 gWidgetgWidget->setLayout(gridLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程序編譯運行的結果如下?？梢钥吹皆?gWidget 中添加了 4 個按鈕，因為設置了行、列的系數(shù)比（拉伸因子），所以看到的按鈕是按系數(shù)比的比例顯示。

2.3 QFormLayout組件-表單布局

在Qt中，QFormLayout是用于創(chuàng)建表單布局的類，通常用于顯示表單數(shù)據(jù)。QFormLayout將控件按照標簽-字段的形式進行排列，每個標簽和字段組合在一行上。下面是QFormLayout的常用方法和功能參數(shù)：

1. 在表單布局中添加一個標簽和字段組合。addRow(label, field)：???????label為標簽部分，field為字段部分。

2. 在指定的行中添加一個標簽和字段組合。addRow(label, field, row)。

3. 設置標簽的對齊方式。setLabelAlignment(alignment)。

4. 設置整個表單布局的對齊方式。setFormAlignment(alignment)。

5. 設置字段部分的增長策略。setFieldGrowthPolicy(policy)，可以是QFormLayout::ExpandingFieldsGrow或QFormLayout::AllNonFixedFieldsGrow。

6. 設置行的換行策略。setRowWrapPolicy(policy)，可以是QFormLayout::WrapLongRows或QFormLayout::DontWrapRows。

7. 設置標簽的角色。setLabelRole(role)，可以是QFormLayout::LabelRole或QFormLayout::FieldRole。

8. 設置指定行的最小高度。setRowMinimumHeight(row, minSize)。

按鈕：使用幾個按鈕，將他們設置為網(wǎng)格布局，同時設置它們的行、列比例系數(shù)（拉伸因子），以及設置它們的一些屬性。

（1）首先按照文章新建項目（Qt教程 — 1.3 如何創(chuàng)建Qt項目-CSDN博客）。

（2）在頭文件“mainwindow.h”修改代碼，具體代碼如下。1）導入<QLineEdit>、<QFormLayout>文件 —> 2）聲明一個QWidget、兩個QLineEdit、QFormLayout對象。完整代碼如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QFormLayout>
#include <QLineEdit>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// widget 對象QWidget *fWidget;// 用于輸入用戶名QLineEdit *userLineEdit;// 用于輸入密碼QLineEdit *passwordLineEdit;// 聲明 QFormLayout 對象QFormLayout *formLayout;
};
#endif // MAINWINDOW_H

（3）在文件“mainwindow.cpp”修改代碼，具體代碼如下。 1）設置主窗體的顯示位置與大小。—>2）實例化QWidget、QLineEdit、QFormLayout對象。—>3）添加登錄用戶名和密碼?！?gt;4）設置水平垂直間距和框的寬度?！?gt;5）將 formLayout 布局到 fWidget

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 設置主窗口的位置與大小this->setGeometry(0, 0, 800, 480);/******* 3 ******//* 實例化及設置位置與大小，下同 */fWidget = new QWidget(this);fWidget->setGeometry(250, 100, 300, 200);userLineEdit = new QLineEdit();passwordLineEdit = new QLineEdit();formLayout = new QFormLayout();/* 添加行 */formLayout->addRow("用戶名： ", userLineEdit);formLayout->addRow("密碼 ： ", passwordLineEdit);/* 設置水平垂直間距 */formLayout->setSpacing(10);/* 設置布局外框的寬度 */formLayout->setMargin(20);/* 將 formLayout 布局到 fWidget */fWidget->setLayout(formLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程程序編譯運行的結果如下?？梢钥吹皆?fWidget 中添加了兩行，同時設置了它們的間隔，與距邊框的寬度。與 QGirdLayout 布局比較， QFomLayout 布局比較適用于行與列比較少的布局格局。如果是多行多列的布局，應該使用 QGirdLayout 布局。