目錄

引言

1. QVBoxLayout：垂直布局管理器

基本功能

創(chuàng)建 QVBoxLayout

添加控件

添加控件和設(shè)置對(duì)齊方式

設(shè)置對(duì)齊方式

示例代碼與詳解

2. QHBoxLayout：水平布局管理器

基本功能

創(chuàng)建 QHBoxLayout

添加控件

添加控件和設(shè)置對(duì)齊方式

設(shè)置對(duì)齊方式

示例代碼與詳解

3. QGridLayout：網(wǎng)格布局管理器

基本功能

創(chuàng)建 QGridLayout

添加控件

添加控件和設(shè)置控件跨度

設(shè)置控件跨度

示例代碼與詳解

4. 綜合示例：結(jié)合 QVBoxLayout、QHBoxLayout 和 QGridLayout 創(chuàng)建一個(gè)復(fù)雜布局應(yīng)用程序

綜合示例代碼

代碼解析

主垂直布局（QVBoxLayout）

頂部按鈕區(qū)域（QHBoxLayout）

中心控件區(qū)域（QGridLayout）

底部按鈕區(qū)域（QHBoxLayout）

5. 總結(jié)

關(guān)鍵要點(diǎn)

---

引言

????????在 Qt 開發(fā)中，布局管理器（Layouts）是組織和管理控件（widgets）位置和大小的關(guān)鍵工具。通過(guò)使用布局管理器，可以創(chuàng)建響應(yīng)式和高度自適應(yīng)的用戶界面。本篇技術(shù)博客將詳細(xì)講解 QtGui 和 QtWidgets 模塊中的布局管理：QVBoxLayout、QHBoxLayout 和 QGridLayout，幫助你輕松掌握這些布局管理器的基本概念和應(yīng)用技術(shù)。

1. QVBoxLayout：垂直布局管理器

QVBoxLayout 是一個(gè)垂直布局管理器，用于將控件從上到下排列。它是創(chuàng)建垂直排列控件的理想選擇。

基本功能

創(chuàng)建 QVBoxLayout

可以通過(guò) QVBoxLayout 構(gòu)造函數(shù)創(chuàng)建垂直布局管理器。

QVBoxLayout *vboxLayout = new QVBoxLayout();

添加控件

可以使用 addWidget 方法將控件添加到布局中。

QPushButton *button1 = new QPushButton("Button 1", this);
QPushButton *button2 = new QPushButton("Button 2", this);
vboxLayout->addWidget(button1);
vboxLayout->addWidget(button2);

添加控件和設(shè)置對(duì)齊方式

設(shè)置對(duì)齊方式

可以使用 setAlignment 方法設(shè)置控件的對(duì)齊方式。

vboxLayout->setAlignment(button1, Qt::AlignLeft);
vboxLayout->setAlignment(button2, Qt::AlignRight);

示例代碼與詳解

以下是一個(gè)完整的示例，展示了如何使用 QVBoxLayout 創(chuàng)建一個(gè)垂直布局，并將控件從上到下排列：

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>class VBoxLayoutExample : public QWidget {
public:VBoxLayoutExample(QWidget *parent = nullptr) : QWidget(parent) {QVBoxLayout *vboxLayout = new QVBoxLayout(this);QPushButton *button1 = new QPushButton("Button 1", this);QPushButton *button2 = new QPushButton("Button 2", this);QPushButton *button3 = new QPushButton("Button 3", this);vboxLayout->addWidget(button1);vboxLayout->addWidget(button2);vboxLayout->addWidget(button3);vboxLayout->setAlignment(button1, Qt::AlignLeft);vboxLayout->setAlignment(button2, Qt::AlignCenter);vboxLayout->setAlignment(button3, Qt::AlignRight);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);VBoxLayoutExample window;window.show();return app.exec();
}

運(yùn)行如下：

這個(gè)示例展示了如何使用 QVBoxLayout 創(chuàng)建一個(gè)垂直布局，并將按鈕控件從上到下排列，同時(shí)設(shè)置每個(gè)按鈕的對(duì)齊方式。

2. QHBoxLayout：水平布局管理器

QHBoxLayout 是一個(gè)水平布局管理器，用于將控件從左到右排列。它是創(chuàng)建水平排列控件的理想選擇。

基本功能

創(chuàng)建 QHBoxLayout

可以通過(guò) QHBoxLayout 構(gòu)造函數(shù)創(chuàng)建水平布局管理器。

QHBoxLayout *hboxLayout = new QHBoxLayout();

添加控件

可以使用 addWidget 方法將控件添加到布局中。

QPushButton *button1 = new QPushButton("Button 1", this);
QPushButton *button2 = new QPushButton("Button 2", this);
hboxLayout->addWidget(button1);
hboxLayout->addWidget(button2);

添加控件和設(shè)置對(duì)齊方式

設(shè)置對(duì)齊方式

可以使用 setAlignment 方法設(shè)置控件的對(duì)齊方式。

hboxLayout->setAlignment(button1, Qt::AlignTop);
hboxLayout->setAlignment(button2, Qt::AlignBottom);

示例代碼與詳解

以下是一個(gè)完整的示例，展示了如何使用 QHBoxLayout 創(chuàng)建一個(gè)水平布局，并將控件從左到右排列：

#include <QApplication>
#include <QWidget>
#include <QHBoxLayout>
#include <QPushButton>class HBoxLayoutExample : public QWidget {
public:HBoxLayoutExample(QWidget *parent = nullptr) : QWidget(parent) {QHBoxLayout *hboxLayout = new QHBoxLayout(this);QPushButton *button1 = new QPushButton("Button 1", this);QPushButton *button2 = new QPushButton("Button 2", this);QPushButton *button3 = new QPushButton("Button 3", this);hboxLayout->addWidget(button1);hboxLayout->addWidget(button2);hboxLayout->addWidget(button3);hboxLayout->setAlignment(button1, Qt::AlignTop);hboxLayout->setAlignment(button2, Qt::AlignCenter);hboxLayout->setAlignment(button3, Qt::AlignBottom);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);HBoxLayoutExample window;window.show();return app.exec();
}

運(yùn)行結(jié)果：

這個(gè)示例展示了如何使用 QHBoxLayout 創(chuàng)建一個(gè)水平布局，并將按鈕控件從左到右排列，同時(shí)設(shè)置每個(gè)按鈕的對(duì)齊方式。

3. QGridLayout：網(wǎng)格布局管理器

QGridLayout 是一個(gè)網(wǎng)格布局管理器，可以將控件放置在網(wǎng)格的單元格中。它是創(chuàng)建復(fù)雜布局的理想選擇。

基本功能

創(chuàng)建 QGridLayout

可以通過(guò) QGridLayout 構(gòu)造函數(shù)創(chuàng)建網(wǎng)格布局管理器。

QGridLayout *gridLayout = new QGridLayout();

添加控件

可以使用 addWidget 方法將控件添加到指定的網(wǎng)格單元格中。

QPushButton *button1 = new QPushButton("Button 1", this);
QPushButton *button2 = new QPushButton("Button 2", this);
gridLayout->addWidget(button1, 0, 0);
gridLayout->addWidget(button2, 0, 1);

添加控件和設(shè)置控件跨度

設(shè)置控件跨度

可以通過(guò) addWidget 方法的額外參數(shù)設(shè)置控件的行跨度和列跨度。

QPushButton *button3 = new QPushButton("Button 3", this);
gridLayout->addWidget(button3, 1, 0, 1, 2); // 跨兩列

示例代碼與詳解

以下是一個(gè)完整的示例，展示了如何使用 QGridLayout 創(chuàng)建一個(gè)網(wǎng)格布局，并將控件放置在指定的網(wǎng)格單元格中：

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QPushButton>class GridLayoutExample : public QWidget {
public:// 構(gòu)造函數(shù)，初始化一個(gè)新的窗口部件GridLayoutExample(QWidget *parent = nullptr) : QWidget(parent) {// 創(chuàng)建一個(gè)新的網(wǎng)格布局，父對(duì)象是當(dāng)前窗口部件QGridLayout *gridLayout = new QGridLayout(this);// 創(chuàng)建四個(gè)按鈕，并將它們的文本分別設(shè)置為"Button 1"到"Button 4"QPushButton *button1 = new QPushButton("Button 1", this);QPushButton *button2 = new QPushButton("Button 2", this);QPushButton *button3 = new QPushButton("Button 3", this);QPushButton *button4 = new QPushButton("Button 4", this);// 將button1添加到網(wǎng)格布局的第0行第0列g(shù)ridLayout->addWidget(button1, 0, 0);// 將button2添加到網(wǎng)格布局的第0行第1列g(shù)ridLayout->addWidget(button2, 0, 1);// 將button3添加到網(wǎng)格布局的第1行第0列，并跨兩列g(shù)ridLayout->addWidget(button3, 1, 0, 1, 2);// 將button4添加到網(wǎng)格布局的第2行第0列，并跨兩行g(shù)ridLayout->addWidget(button4, 2, 0, 2, 1);// 設(shè)置button1在網(wǎng)格中的對(duì)齊方式為頂部對(duì)齊gridLayout->setAlignment(button1, Qt::AlignTop);// 設(shè)置button2在網(wǎng)格中的對(duì)齊方式為居中對(duì)齊gridLayout->setAlignment(button2, Qt::AlignCenter);// 設(shè)置button3在網(wǎng)格中的對(duì)齊方式為底部對(duì)齊gridLayout->setAlignment(button3, Qt::AlignBottom);// 設(shè)置button4在網(wǎng)格中的對(duì)齊方式為右對(duì)齊gridLayout->setAlignment(button4, Qt::AlignRight);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);GridLayoutExample window;window.show();return app.exec();
}

運(yùn)行結(jié)果：

這個(gè)示例展示了如何使用 QGridLayout 創(chuàng)建一個(gè)網(wǎng)格布局，并將按鈕控件放置在指定的網(wǎng)格單元格中，同時(shí)設(shè)置每個(gè)按鈕的對(duì)齊方式。

4. 綜合示例：結(jié)合 QVBoxLayout、QHBoxLayout 和 QGridLayout 創(chuàng)建一個(gè)復(fù)雜布局應(yīng)用程序

為了更好地展示 QVBoxLayout、QHBoxLayout 和 QGridLayout 的綜合應(yīng)用，我們將創(chuàng)建一個(gè)復(fù)雜的用戶界面布局。這個(gè)布局包含以下部分：

• 垂直布局（QVBoxLayout）用于排列主要部分
• 水平布局（QHBoxLayout）用于排列頂部按鈕區(qū)域
• 網(wǎng)格布局（QGridLayout）用于排列中心控件區(qū)域

綜合示例代碼

以下是完整的應(yīng)用程序代碼，展示了如何結(jié)合使用 QVBoxLayout、QHBoxLayout 和 QGridLayout 創(chuàng)建一個(gè)復(fù)雜的用戶界面布局：

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QGridLayout>
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>class ComplexLayoutExample : public QWidget {
public:// 構(gòu)造函數(shù)，初始化一個(gè)新的窗口部件ComplexLayoutExample(QWidget *parent = nullptr) : QWidget(parent) {// 創(chuàng)建一個(gè)垂直布局作為主布局，父對(duì)象是當(dāng)前窗口部件QVBoxLayout *mainLayout = new QVBoxLayout(this);// ==================// 頂部按鈕區(qū)域// ==================// 創(chuàng)建一個(gè)水平布局用于頂部按鈕區(qū)域QHBoxLayout *topButtonLayout = new QHBoxLayout();// 創(chuàng)建兩個(gè)按鈕，并將它們添加到頂部按鈕布局中QPushButton *button1 = new QPushButton("Button 1", this);QPushButton *button2 = new QPushButton("Button 2", this);topButtonLayout->addWidget(button1);topButtonLayout->addWidget(button2);// 將頂部按鈕布局添加到主布局中mainLayout->addLayout(topButtonLayout);// ==================// 中心控件區(qū)域// ==================// 創(chuàng)建一個(gè)網(wǎng)格布局用于中心控件區(qū)域QGridLayout *centerGridLayout = new QGridLayout();// 創(chuàng)建標(biāo)簽和文本編輯控件，并將它們添加到網(wǎng)格布局中QLabel *label1 = new QLabel("Label 1", this);QLineEdit *lineEdit1 = new QLineEdit(this);QLabel *label2 = new QLabel("Label 2", this);QLineEdit *lineEdit2 = new QLineEdit(this);centerGridLayout->addWidget(label1, 0, 0);centerGridLayout->addWidget(lineEdit1, 0, 1);centerGridLayout->addWidget(label2, 1, 0);centerGridLayout->addWidget(lineEdit2, 1, 1);// 將中心網(wǎng)格布局添加到主布局中mainLayout->addLayout(centerGridLayout);// ==================// 底部按鈕區(qū)域// ==================// 創(chuàng)建一個(gè)水平布局用于底部按鈕區(qū)域QHBoxLayout *bottomButtonLayout = new QHBoxLayout();// 創(chuàng)建兩個(gè)按鈕，并將它們添加到底部按鈕布局中QPushButton *button3 = new QPushButton("Button 3", this);QPushButton *button4 = new QPushButton("Button 4", this);bottomButtonLayout->addWidget(button3);bottomButtonLayout->addWidget(button4);// 添加一個(gè)彈簧，使底部按鈕區(qū)域靠底部排列mainLayout->addStretch();// 將底部按鈕布局添加到主布局中mainLayout->addLayout(bottomButtonLayout);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);ComplexLayoutExample window;window.show();return app.exec();
}

運(yùn)行結(jié)果：

代碼解析

這個(gè)綜合示例展示了如何結(jié)合使用 QVBoxLayout、QHBoxLayout 和 QGridLayout 創(chuàng)建一個(gè)復(fù)雜的用戶界面布局。以下是對(duì)各個(gè)部分的詳細(xì)解析：

主垂直布局（QVBoxLayout）

QVBoxLayout *mainLayout = new QVBoxLayout(this);

• QVBoxLayout：主垂直布局管理器，用于將各個(gè)部分從上到下排列。

頂部按鈕區(qū)域（QHBoxLayout）

QHBoxLayout *topButtonLayout = new QHBoxLayout();
QPushButton *button1 = new QPushButton("Button 1", this);
QPushButton *button2 = new QPushButton("Button 2", this);
topButtonLayout->addWidget(button1);
topButtonLayout->addWidget(button2);
mainLayout->addLayout(topButtonLayout);

• QHBoxLayout：頂部水平布局管理器，用于排列頂部按鈕區(qū)域的按鈕。
• addWidget：將按鈕控件添加到水平布局中，并將布局添加到主垂直布局中。

中心控件區(qū)域（QGridLayout）

QGridLayout *centerGridLayout = new QGridLayout();
QLabel *label1 = new QLabel("Label 1", this);
QLineEdit *lineEdit1 = new QLineEdit(this);
QLabel *label2 = new QLabel("Label 2", this);
QLineEdit *lineEdit2 = new QLineEdit(this);
centerGridLayout->addWidget(label1, 0, 0);
centerGridLayout->addWidget(lineEdit1, 0, 1);
centerGridLayout->addWidget(label2, 1, 0);
centerGridLayout->addWidget(lineEdit2, 1, 1);
mainLayout->addLayout(centerGridLayout);

• QGridLayout：中心網(wǎng)格布局管理器，用于排列中心控件區(qū)域的標(biāo)簽和文本輸入框。
• addWidget：將標(biāo)簽和文本輸入框添加到網(wǎng)格布局的指定單元格中，并將布局添加到主垂直布局中。

底部按鈕區(qū)域（QHBoxLayout）

QHBoxLayout *bottomButtonLayout = new QHBoxLayout();
QPushButton *button3 = new QPushButton("Button 3", this);
QPushButton *button4 = new QPushButton("Button 4", this);
bottomButtonLayout->addWidget(button3);
bottomButtonLayout->addWidget(button4);
mainLayout->addStretch(); // 添加一個(gè)彈簧，以便底部按鈕區(qū)域靠底部排列
mainLayout->addLayout(bottomButtonLayout);

• QHBoxLayout：底部水平布局管理器，用于排列底部按鈕區(qū)域的按鈕。
• addStretch：添加一個(gè)彈簧，使底部按鈕區(qū)域能夠靠底部排列。
• addWidget：將按鈕控件添加到水平布局中，并將布局添加到主垂直布局中。

這個(gè)綜合示例展示了如何結(jié)合使用 QVBoxLayout、QHBoxLayout 和 QGridLayout 創(chuàng)建一個(gè)復(fù)雜的用戶界面布局，幫助你了解多種布局管理器的綜合應(yīng)用。

5. 總結(jié)

本篇技術(shù)博客詳細(xì)介紹了 QtGui 和 QtWidgets 模塊中 QVBoxLayout、QHBoxLayout 和 QGridLayout 的基本概念和高級(jí)應(yīng)用技術(shù)。通過(guò)詳細(xì)解析和完整的示例代碼，我們展示了如何使用這些布局管理器創(chuàng)建響應(yīng)式和高度自適應(yīng)的用戶界面。

關(guān)鍵要點(diǎn)

• QVBoxLayout：垂直布局管理器，用于將控件從上到下排列，并支持設(shè)置控件的對(duì)齊方式。
• QHBoxLayout：水平布局管理器，用于將控件從左到右排列，并支持設(shè)置控件的對(duì)齊方式。
• QGridLayout：網(wǎng)格布局管理器，用于將控件放置在網(wǎng)格的單元格中，并支持設(shè)置控件的行跨度和列跨度。
• 綜合應(yīng)用：通過(guò)結(jié)合使用?QVBoxLayout、QHBoxLayout?和?QGridLayout，可以創(chuàng)建功能豐富且高度自適應(yīng)的復(fù)雜用戶界面布局。

通過(guò)掌握這些布局管理器及其應(yīng)用技術(shù)，你可以輕松開發(fā)復(fù)雜的 Qt 應(yīng)用程序，并自信地應(yīng)對(duì)各種用戶界面布局需求。希望這篇文章對(duì)你的 Qt 開發(fā)學(xué)習(xí)有所幫助！