Qt布局管理详解（5种布局控件）

一、说明

在实际开发中，一个界面上可能包含十几个控件，手动调整它们的位置既费时又费力。作为一款成熟的 GUI 框架，Qt 提供了丰富的布局管理工具，可以帮助开发者快速完成布局设计。这些布局管理器不仅可以自动调整控件的位置和间距，还能根据窗口大小动态调整布局，确保界面始终美观。

Qt 提供了5种主要的布局管理器，每种布局管理器对应一个类，分别是 QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout 和 QStackedLayout。这些布局管理器可以通过嵌套使用，满足不同复杂布局需求。

二、5种布局控件概述

Qt 提供的5种布局管理器分别是：

QVBoxLayout（垂直布局）：将控件从上到下（或从下到上）依次排列。

QHBoxLayout（水平布局）：将控件从左到右（或从右到左）依次排列。

QGridLayout（网格布局）：将控件按行和列排列成表格形式。

QFormLayout（表单布局）：用于创建表单布局，通常用于标签和输入框的布局。

QStackedLayout（分组布局）：允许在一个区域内显示多个控件，但每次只显示其中一个。

这些布局管理器可以通过嵌套使用，满足复杂的布局需求。

三、`QVBoxLayout` 垂直布局

1. 基本使用

QVBoxLayout 用于将控件垂直排列。例如，可以将多个 QPushButton 按钮依次排列如下：

#include 
   
    
#include 
    
     
int main(int argc, char *argv) {
    QApplication a(argc, argv);
    QWidget widget;
    widget.setWindowTitle("QVBoxLayout垂直布局");
    
    QVBoxLayout *layout = new QVBoxLayout;
    layout->setDirection(QBoxLayout::TopToBottom); // 从上到下排列
    
    QLabel lab1("Label1");
    lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    lab1.setAlignment(Qt::AlignCenter);
    
    QLabel lab2("Label2");
    lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
    lab2.setAlignment(Qt::AlignCenter);
    
    QLabel lab3("Label3");
    lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
    lab3.setAlignment(Qt::AlignCenter);
    
    layout->addStretch(2); // 添加空白行
    layout->addWidget(lab1, 1);
    layout->addWidget(lab2, 2);
    layout->addWidget(lab3, 3);
    layout->addStretch(3);
    
    widget.setLayout(layout);
    widget.show();
    return a.exec();
}

2. 常用方法

QVBoxLayout 提供以下常用方法：

addWidget(QWidget *widget, int stretch = 0, Qt::Alignment alignment = Qt::Alignment())：将控件添加到布局中，stretch 参数控制控件的拉伸比例，alignment 控制对齐方式。

addStretch(int stretch = 0)：添加空白区域，stretch 参数控制空白区域的拉伸比例。

setDirection(QBoxLayout::Direction direction)：设置布局方向，支持 TopToBottom（从上到下）和 BottomToTop（从下到上）。

setContentsMargins(int left, int top, int right, int bottom)：设置布局区域的外边距。

四、`QHBoxLayout` 水平布局

1. 基本使用

QHBoxLayout 用于将控件水平排列。例如，可以将多个 QPushButton 按钮依次排列如下：

#include 
   
    
#include 
    
     
int main(int argc, char *argv) {
    QApplication a(argc, argv);
    QWidget widget;
    widget.setWindowTitle("QHBoxLayout水平布局");
    
    QHBoxLayout *layout = new QHBoxLayout;
    layout->setDirection(QBoxLayout::RightToLeft); // 从右到左排列
    
    QLabel lab1("Label1");
    lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    lab1.setAlignment(Qt::AlignCenter);
    
    QLabel lab2("Label2");
    lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
    lab2.setAlignment(Qt::AlignCenter);
    
    QLabel lab3("Label3");
    lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
    lab3.setAlignment(Qt::AlignCenter);
    
    layout->addStretch(2);
    layout->addWidget(lab1, 1);
    layout->addWidget(lab2, 2);
    layout->addWidget(lab3, 3);
    layout->addStretch(3);
    
    widget.setLayout(layout);
    widget.show();
    return a.exec();
}

2. 常用方法

QHBoxLayout 的方法与 QVBoxLayout 相同，包括 addWidget、addStretch、setDirection 和 setContentsMargins 等。

五、`QGridLayout` 网格布局

1. 基本使用

QGridLayout 用于将控件按行和列排列成网格形式。例如，可以创建一个 3x3 的网格布局如下：

#include 
   
    
#include 
    
     
#include 
     
      
int main(int argc, char *argv) {
    QApplication a(argc, argv);
    QWidget widget;
    widget.setWindowTitle("QGridLayout网格布局");
    
    QGridLayout *layout = new QGridLayout;
    
    QPushButton *but1 = new QPushButton("but1");
    QPushButton *but2 = new QPushButton("but2");
    QLabel *lab3 = new QLabel("lab");
    lab3->setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    lab3->setAlignment(Qt::AlignCenter);
    
    layout->addWidget(but1, 0, 0); // (0,0) 坐标
    layout->addWidget(but2, 0, 2);
    layout->addWidget(lab3, 1, 0, 3, 3); // 占据 3 行 3 列
    layout->addWidget(but3, 4, 0);
    layout->addWidget(but4, 4, 2);
    
    widget.setLayout(layout);
    widget.show();
    return a.exec();
}

2. 常用方法

QGridLayout 提供以下常用方法：

addWidget(QWidget *widget, int row, int column, int rowSpan, int columnSpan, Qt::Alignment alignment = 0)：将控件添加到指定的网格位置，rowSpan 和 columnSpan 控制控件所占的行列数。

setContentsMargins(int left, int top, int right, int bottom)：设置网格布局的外边距。

六、`QFormLayout` 表单布局

1. 基本使用

QFormLayout 用于创建表单布局，通常用于标签和输入框的布局。例如，可以创建如下表单布局：

#include 
   
    
#include 
    
     
#include 
     
      
int main(int argc, char *argv) {
    QApplication a(argc, argv);
    QWidget widget;
    widget.setWindowTitle("QFormLayout表单布局");
    
    QFormLayout *layout = new QFormLayout;
    layout->setRowWrapPolicy(QFormLayout::WrapAllRows);
    
    layout->addRow("Name:", new QLineEdit());
    layout->addRow("Email:", new QLineEdit());
    layout->addRow("Adress:", new QLineEdit());
    
    layout->setSpacing(10);
    
    widget.setLayout(layout);
    widget.show();
    return a.exec();
}

2. 常用方法

QFormLayout 提供以下常用方法：

addRow(const QString &label, QWidget *widget)：添加一个行布局，label 是控件前的标签，widget 是输入控件。

setSpacing(int spacing)：设置控件之间的间距。

setRowWrapPolicy(QFormLayout::RowWrapPolicy policy)：设置行是否自动换行。

七、`QStackedLayout` 分组布局

1. 基本使用

QStackedLayout 用于在一个区域内显示多个控件，但每次只显示其中一个。例如，可以创建一个分组布局如下：

#include 
   
    
#include 
    
     
#include 
     
      
#include 
      
       
int main(int argc, char *argv) {
    QApplication a(argc, argv);
    QWidget widget;
    widget.setWindowTitle("QStackedLayout分组布局");
    widget.resize(600, 400);
    
    QHBoxLayout *layout = new QHBoxLayout;
    
    QListWidget listWidget(&widget);
    listWidget.setMinimumWidth(150);
    listWidget.setFont(QFont("宋体", 14));
    listWidget.addItem("QPushButton");
    listWidget.addItem("QLabel");
    listWidget.addItem("QLineEdit");
    
    QStackedLayout *stackedLayout = new QStackedLayout;
    stackedLayout->addWidget(new QPushButton("这是一个按钮"));
    stackedLayout->addWidget(new QLabel("这是一个文本框"));
    stackedLayout->addWidget(new QLineEdit("这是一个单行输入框"));
    
    layout->addWidget(listWidget, 1);
    layout->addLayout(stackedLayout, 4);
    
    widget.setLayout(layout);
    widget.show();
    
    // 连接信号
    QObject::connect(&listWidget, &QListWidget::currentRowChanged, stackedLayout, &QStackedLayout::setCurrentIndex);
    
    return a.exec();
}