【Qt】常用控件

目录

一、Qt控件概述

[1.1 核心概念](#1.1 核心概念)

[1.2 控件分类](#1.2 控件分类)

[1.3 基础工程准备](#1.3 基础工程准备)
二、按钮类控件

[2.1 普通按钮 QPushButton](#2.1 普通按钮 QPushButton)

[2.2 单选按钮 QRadioButton](#2.2 单选按钮 QRadioButton)

[2.3 复选框 QCheckBox](#2.3 复选框 QCheckBox)

[2.4 工具按钮 QToolButton](#2.4 工具按钮 QToolButton)
三、显示类控件

[3.1 文本/图片标签 QLabel](#3.1 文本/图片标签 QLabel)

[3.2 数字显示 QLCDNumber](#3.2 数字显示 QLCDNumber)

[3.3 进度条 QProgressBar](#3.3 进度条 QProgressBar)

[3.4 日历控件 QCalendarWidget](#3.4 日历控件 QCalendarWidget)
四、输入类控件

[4.1 单行输入框 QLineEdit](#4.1 单行输入框 QLineEdit)

[4.2 多行输入框 QTextEdit](#4.2 多行输入框 QTextEdit)

[4.3 下拉框 QComboBox](#4.3 下拉框 QComboBox)

[4.4 数值微调框 QSpinBox](#4.4 数值微调框 QSpinBox)

[4.5 日期/时间输入框 QDateEdit & QTimeEdit](#4.5 日期/时间输入框 QDateEdit & QTimeEdit)

[4.6 旋钮控件 QDial](#4.6 旋钮控件 QDial)

[4.7 滑动条 QSlider](#4.7 滑动条 QSlider)
五、多元素类控件

[5.1 列表控件 QListWidget](#5.1 列表控件 QListWidget)

[5.2 表格控件 QTableWidget](#5.2 表格控件 QTableWidget)

[5.3 树形控件 QTreeWidget](#5.3 树形控件 QTreeWidget)
六、容器类控件

[6.1 分组框 QGroupBox](#6.1 分组框 QGroupBox)

[6.2 标签页 QTabWidget](#6.2 标签页 QTabWidget)
七、布局管理器

[7.1 垂直布局 QVBoxLayout](#7.1 垂直布局 QVBoxLayout)

[7.2 水平布局 QHBoxLayout](#7.2 水平布局 QHBoxLayout)

[7.3 网格布局 QGridLayout](#7.3 网格布局 QGridLayout)

[7.4 表单布局 QFormLayout](#7.4 表单布局 QFormLayout)

[7.5 空白间隔 QSpacer](#7.5 空白间隔 QSpacer)

---

一、Qt控件概述

Qt 提供了丰富且强大的内置控件体系，控件（Widget）是构成 Qt 图形界面的基本单元，从简单的按钮、文本框，到复杂的表格、树形视图，再到布局管理、容器控件，Qt 都做了完善的封装。本文将从控件概述 、常用控件分类讲解 、布局管理器三个核心部分，介绍 Qt 中最常用的控件。

1.1 核心概念

Qt 中所有控件都继承自QWidget类，QWidget 作为所有控件的基类，提供了控件通用的属性和方法，比如位置尺寸（geometry）、启用/禁用（enabled）、鼠标光标（cursor）、样式表（styleSheet）等，这些属性和方法对所有子类控件都生效。

1.2 控件分类

Qt 的内置控件可根据功能分为几大类，日常开发中最常用的包括：

• 按钮类控件：实现点击、选择等交互操作，如 QPushButton、QRadioButton、QCheckBox；
• 显示类控件：用于展示文本、图片、数字、进度等信息，如 QLabel、QLCDNumber、QProgressBar；
• 输入类控件：用于接收用户的文本、数值、选择等输入，如 QLineEdit、QTextEdit、QComboBox；
• 多元素类控件：用于展示一组数据，如 QListWidget、QTableWidget；
• 容器类控件：用于对其他控件进行分组、管理，如 QGroupBox、QTabWidget；

同时，Qt 支持自定义控件，可通过继承现有控件或直接继承 QWidget，实现个性化的控件功能。

1.3 基础工程准备

本文所有代码示例均基于 Qt Widget 工程，核心头文件包含：

#include <QWidget>
// 按需包含对应控件头文件
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>

工程的main.cpp为 Qt 自动生成的默认代码，无需修改：

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

二、按钮类控件

按钮类控件是 Qt 中最基础的交互控件，均继承自QAbstractButton，拥有点击、按下、释放等通用的信号和槽，核心功能是响应用户的点击操作。

2.1 普通按钮 QPushButton

功能 ：最常用的按钮，点击触发交互，支持设置文本、图标、快捷键。
核心属性/方法：

• setText(const QString&)：设置按钮文本；
• setEnabled(bool)：设置按钮是否启用（false 为灰色禁用状态）；
• clicked()：按钮点击信号（最常用）；

简单示例 ：在界面上创建一个按钮，点击后打印信息。

在widget.cpp的构造函数中编写代码：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    // 设置窗口大小
    this->resize(400, 300);
    // 创建按钮，指定父控件为当前窗口
    QPushButton *btn = new QPushButton(this);
    // 设置按钮文本
    btn->setText("点击我");
    // 设置按钮位置和大小
    btn->setGeometry(150, 120, 100, 40);
    // 关联点击信号和槽函数（lambda 表达式简化写法）
    connect(btn, &QPushButton::clicked, this, [](){
        qDebug() << "按钮被点击了！";
    });
}

2.2 单选按钮 QRadioButton

功能 ：实现单选 功能，多个单选按钮为一组时，只能选中其中一个，默认支持排他性。
核心属性/方法：

• setChecked(bool)：设置是否默认选中；
• isChecked()：判断是否被选中；
• toggled(bool)：选中状态改变时触发的信号；

简单示例：创建两个性别选择的单选按钮。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 创建男/女单选按钮
    QRadioButton *rBtnMale = new QRadioButton("男", this);
    QRadioButton *rBtnFemale = new QRadioButton("女", this);
    // 设置位置
    rBtnMale->setGeometry(150, 100, 50, 30);
    rBtnFemale->setGeometry(220, 100, 50, 30);
    // 设置默认选中"男"
    rBtnMale->setChecked(true);
    // 关联状态改变信号
    connect(rBtnMale, &QRadioButton::toggled, this, [=](bool checked){
        if(checked) qDebug() << "选中了男";
    });
    connect(rBtnFemale, &QRadioButton::toggled, this, [=](bool checked){
        if(checked) qDebug() << "选中了女";
    });
}

2.3 复选框 QCheckBox

功能 ：实现多选 功能，可单独选中或取消，支持多选项同时选中。
核心属性/方法 ：与 QRadioButton 基本一致，isChecked()判断选中状态，clicked(bool)触发点击信号。

简单示例：创建三个爱好选择的复选框。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QCheckBox *cBtn1 = new QCheckBox("看书", this);
    QCheckBox *cBtn2 = new QCheckBox("运动", this);
    QCheckBox *cBtn3 = new QCheckBox("编程", this);
    cBtn1->setGeometry(120, 100, 50, 30);
    cBtn2->setGeometry(220, 100, 50, 30);
    cBtn3->setGeometry(300, 100, 50, 30);
    // 布局管理器
    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->addWidget(cBtn1);
    layout->addWidget(cBtn2);
    layout->addWidget(cBtn3);
    layout->setSpacing(20);
    layout->setContentsMargins(50, 50, 50, 50);
    // 点击打印选中状态
    connect(cBtn1, &QCheckBox::clicked, this, [=](bool checked){
        qDebug() << "看书：" << checked;
    });
    connect(cBtn2, &QCheckBox::clicked, this, [=](bool checked){
        qDebug() << "运动" << checked;
    });
    connect(cBtn3, &QCheckBox::clicked, this, [=](bool checked){
        qDebug() << "编程" << checked;
    });
}

2.4 工具按钮 QToolButton

QToolButton 的大部分功能与 QPushButton 一致，但主要应用在工具栏、菜单等场景，核心是配合图标实现快捷操作，用法与 QPushButton 类似，此处暂不展开详细示例。

三、显示类控件

显示类控件主要用于展示信息 ，不主动接收用户输入，是界面中信息展示的核心，其中QLabel是最常用的显示控件。

3.1 文本/图片标签 QLabel

功能 ：支持显示纯文本、富文本、图片、超链接，是 Qt 中最灵活的显示控件。
核心属性/方法：

• setText(const QString&)：设置显示的文本；
• setPixmap(const QPixmap&)：设置显示的图片；
• setScaledContents(bool)：设置图片是否自适应标签大小；
• setAlignment(Qt::Alignment)：设置文本/图片的对齐方式（如居中、左对齐）；

简单示例：显示文本和图片。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 1. 显示文本，居中对齐
    QLabel *labText = new QLabel(this);
    labText->setText("Hello Qt!");
    labText->setGeometry(150, 50, 100, 30);
    labText->setAlignment(Qt::AlignCenter); // 水平+垂直居中

    // 2. 显示图片
    QLabel *labImg = new QLabel(this);
    labImg->setGeometry(100, 100, 200, 150);
    // 加载图片（支持本地路径/Qt 资源文件）
    QPixmap pix(":/images/qt_logo.png"); // 资源文件路径
    labImg->setPixmap(pix);
    labImg->setScaledContents(true); // 图片自适应标签大小
}

3.2 数字显示 QLCDNumber

功能 ：以液晶数字 样式显示整数/浮点数，支持十进制、十六进制、二进制等格式。
核心方法 ：display(int/double)：设置要显示的数字。

简单示例：显示数字 666。

QLCDNumber *lcd = new QLCDNumber(this);
lcd->setGeometry(150, 120, 100, 50);
lcd->display(666); // 显示整数
// lcd->display(123.45); // 显示浮点数

3.3 进度条 QProgressBar

功能 ：展示任务的执行进度，如文件下载、程序加载等。
核心属性/方法：

• setRange(int min, int max)：设置进度范围（默认 0-100）；
• setValue(int)：设置当前进度值；
• setVisible(bool)：设置是否显示；

简单示例：创建一个进度为 50% 的进度条。

QProgressBar *bar = new QProgressBar(this);
bar->setGeometry(100, 120, 200, 30);
bar->setRange(0, 100); // 设置范围 0-100
bar->setValue(50); // 设置当前进度 50%

3.4 日历控件 QCalendarWidget

功能 ：展示日历并支持日期选择，可用于日期输入、日期筛选等场景。
核心属性/方法：

• selectedDate()：获取当前选中的日期；
• setMinimumDate(const QDate&)：设置最小可选日期；
• setMaximumDate(const QDate&)：设置最大可选日期；
• selectionChanged()：选中日期改变时触发的信号；

简单示例：选择日期并显示。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QCalendarWidget *calendar = new QCalendarWidget(this);
    calendar->setGeometry(50, 50, 300, 200);
    QLabel *labDate = new QLabel(this);
    labDate->setGeometry(150, 260, 100, 30);

    // 选中日期改变时更新标签
    connect(calendar, &QCalendarWidget::selectionChanged, this, [=](){
        QDate date = calendar->selectedDate();
        labDate->setText(date.toString("yyyy-MM-dd"));
    });
}

四、输入类控件

输入类控件用于接收用户输入，是界面与用户交互的核心，覆盖文本、数值、选择等多种输入场景。

4.1 单行输入框 QLineEdit

功能 ：接收单行文本输入，支持密码隐藏、输入提示、输入格式限制。
核心属性/方法：

• setText(const QString&)：设置输入框文本；
• text()：获取输入框的文本内容；
• setPlaceholderText(const QString&)：设置输入提示（占位符）；
• setEchoMode(QLineEdit::EchoMode)：设置显示模式（如密码模式）；

简单示例：创建普通输入框和密码输入框。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 普通输入框，带占位符
    QLineEdit *edit1 = new QLineEdit(this);
    edit1->setGeometry(100, 100, 200, 30);
    edit1->setPlaceholderText("请输入用户名");

    // 密码输入框
    QLineEdit *edit2 = new QLineEdit(this);
    edit2->setGeometry(100, 150, 200, 30);
    edit2->setPlaceholderText("请输入密码");
    edit2->setEchoMode(QLineEdit::Password); // 密码模式，输入内容以*显示

    // 按钮点击获取输入内容
    QPushButton *btn = new QPushButton("获取内容", this);
    btn->setGeometry(150, 200, 100, 30);
    connect(btn, &QPushButton::clicked, this, [=](){
        qDebug() << "用户名：" << edit1->text();
        qDebug() << "密码：" << edit2->text();
    });
}

4.2 多行输入框 QTextEdit

功能 ：接收多行文本 输入，支持富文本、自动换行、滚动条，可作为简单的文本编辑器。
核心方法：

• toPlainText()：获取纯文本内容；
• setPlainText(const QString&)：设置纯文本内容；

简单示例：创建多行输入框并获取内容。

QTextEdit *textEdit = new QTextEdit(this);
textEdit->setGeometry(50, 50, 300, 150);
textEdit->setPlaceholderText("请输入多行文本...");

QPushButton *btn = new QPushButton("获取多行文本", this);
btn->setGeometry(150, 220, 100, 30);
connect(btn, &QPushButton::clicked, this, [=](){
    qDebug() << "多行文本：" << textEdit->toPlainText();
});

4.3 下拉框 QComboBox

功能 ：提供下拉选择列表，支持添加选项、获取选中的选项文本/索引。
核心方法：

• addItem(const QString&)：添加下拉选项；
• currentText()：获取当前选中的选项文本；
• currentIndex()：获取当前选中的选项索引（从 0 开始）；
• currentIndexChanged(const QString&)：选中项改变时的信号；

简单示例：创建一个城市选择的下拉框。

QComboBox *comboBox;
comboBox = new QComboBox(this);
comboBox->setGeometry(80, 80, 120, 30);
// 添加选项
comboBox->addItem("北京");
comboBox->addItem("上海");
comboBox->addItem("广州");
comboBox->addItem("深圳");
// 连接信号：当文本改变时触发
connect(comboBox, &QComboBox::currentTextChanged,
        this, [](const QString &text) {
    qDebug() << "你选择了：" << text;
});

4.4 数值微调框 QSpinBox

功能 ：接收整数数值输入，支持通过上下按钮微调数值，可设置数值范围和步长。
核心方法：

• setRange(int min, int max)：设置数值范围；
• setSingleStep(int)：设置微调步长（默认 1）；
• value()：获取当前数值；
• valueChanged(int)：数值改变时的信号；

简单示例：创建一个 0-100 范围的数值微调框。

QSpinBox *spin = new QSpinBox(this);
spin->setGeometry(150, 120, 100, 30);
spin->setRange(0, 100); // 范围 0-100
spin->setSingleStep(5); // 步长 5
// 数值改变信号
connect(spin, &QSpinBox::valueChanged, this, [=](int val){
    qDebug() << "当前数值：" << val;
});

4.5 日期/时间输入框 QDateEdit & QTimeEdit

功能 ：专门用于输入日期或时间，支持微调操作，QDateTimeEdit 可同时输入日期和时间。
核心方法：

• setDate(const QDate&)：设置日期；
• setTime(const QTime&)：设置时间；
• date()/time()：获取日期/时间；
• displayFormat(const QString&)：设置显示格式（如 "yyyy-MM-dd"）；

简单示例：创建日期和时间输入框。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 日期输入框
    QDateEdit *dateEdit = new QDateEdit(this);
    dateEdit->setGeometry(100, 100, 150, 30);
    dateEdit->setDisplayFormat("yyyy-MM-dd"); // 显示格式
    dateEdit->setDate(QDate::currentDate()); // 默认当前日期

    // 时间输入框
    QTimeEdit *timeEdit = new QTimeEdit(this);
    timeEdit->setGeometry(100, 150, 150, 30);
    timeEdit->setDisplayFormat("HH:mm:ss");
    timeEdit->setTime(QTime::currentTime());
}

4.6 旋钮控件 QDial

功能 ：通过鼠标拖动旋钮旋转调整数值，适用于音量调节、亮度调节等场景。
核心属性/方法：

• setRange(int min, int max)：设置数值范围；
• setValue(int)：设置当前数值；
• valueChanged(int)：数值改变时触发的信号；
• setNotchesVisible(bool)：设置是否显示刻度线；

简单示例：通过旋钮调整窗口透明度。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QDial *dial = new QDial(this);
    dial->setGeometry(150, 100, 100, 100);
    dial->setRange(0, 100);
    dial->setValue(100); // 初始不透明度 100%
    dial->setNotchesVisible(true); // 显示刻度

    QLabel *lab = new QLabel("当前不透明度：100%", this);
    lab->setGeometry(150, 220, 100, 30);

    connect(dial, &QDial::valueChanged, this, [=](int val){
        lab->setText(QString("当前不透明度：%1%").arg(val));
        this->setWindowOpacity(val / 100.0);
    });
}

4.7 滑动条 QSlider

功能 ：通过拖动滑块调整数值，支持水平和垂直方向，用法与 QDial 类似。
核心属性/方法：

• setOrientation(Qt::Orientation)：设置方向（水平/垂直）；
• setRange(int min, int max)：设置数值范围；
• valueChanged(int)：数值改变时的信号；

简单示例：通过滑动条调整窗口大小。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 水平滑动条（控制宽度）
    QSlider *hSlider = new QSlider(Qt::Horizontal, this);
    hSlider->setGeometry(50, 250, 300, 30);
    hSlider->setRange(300, 600);
    hSlider->setValue(400);

    // 垂直滑动条（控制高度）
    QSlider *vSlider = new QSlider(Qt::Vertical, this);
    vSlider->setGeometry(370, 20, 30, 230);
    vSlider->setRange(200, 500);
    vSlider->setValue(300);

    // 调整宽度
    connect(hSlider, &QSlider::valueChanged, this, [=](int width){
        this->resize(width, this->height());
    });

    // 调整高度
    connect(vSlider, &QSlider::valueChanged, this, [=](int height){
        this->resize(this->width(), height);
    });
}

五、多元素类控件

多元素类控件用于展示一组结构化数据，支持添加、删除、选中等操作，是展示列表、表格数据的核心控件。

5.1 列表控件 QListWidget

功能 ：展示一维列表数据，支持添加、删除、选中列表项。
核心方法：

• addItem(const QString&)：添加列表项；
• takeItem(int row)：删除指定行的列表项；
• currentItem()->text()：获取当前选中的列表项文本；
• itemClicked(QListWidgetItem*)：点击列表项时的信号；

简单示例：创建一个简单的列表并实现删除功能。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QListWidget *list = new QListWidget(this);
    list->setGeometry(100, 50, 150, 150);
    // 添加列表项
    list->addItem("C++");
    list->addItem("Qt");
    list->addItem("Python");

    // 删除选中项按钮
    QPushButton *btn = new QPushButton("删除选中", this);
    btn->setGeometry(100, 220, 100, 30);
    connect(btn, &QPushButton::clicked, this, [=](){
        // 获取当前选中行的索引
        int row = list->currentRow();
        if(row >= 0){
            list->takeItem(row);
        }
    });
}

5.2 表格控件 QTableWidget

功能 ：展示二维表格数据，支持设置行/列数、表头、单元格内容。
核心方法：

• setRowCount(int)：设置行数；
• setColumnCount(int)：设置列数；
• setHorizontalHeaderLabels(const QStringList&)：设置水平表头；
• setItem(int row, int col, new QTableWidgetItem(text))：设置单元格内容；
• currentItem()：获取当前选中的单元格；

简单示例：创建一个 3 行 2 列的学生信息表格。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QTableWidget *table = new QTableWidget(this);
    table->setGeometry(50, 50, 300, 200);
    // 设置 3 行 2 列
    table->setRowCount(3);
    table->setColumnCount(2);
    // 设置水平表头
    table->setHorizontalHeaderLabels(QStringList() << "姓名" << "年龄");
    // 设置单元格内容
    table->setItem(0, 0, new QTableWidgetItem("张三"));
    table->setItem(0, 1, new QTableWidgetItem("20"));
    table->setItem(1, 0, new QTableWidgetItem("李四"));
    table->setItem(1, 1, new QTableWidgetItem("21"));
    table->setItem(2, 0, new QTableWidgetItem("王五"));
    table->setItem(2, 1, new QTableWidgetItem("19"));
}

5.3 树形控件 QTreeWidget

功能 ：展示树形结构数据，支持顶层节点和子节点嵌套，适用于分类数据展示。
核心方法：

• addTopLevelItem(QTreeWidgetItem*)：添加顶层节点；
• QTreeWidgetItem::addChild(QTreeWidgetItem*)：给节点添加子节点；
• setHeaderLabel(const QString&)：设置表头名称；
• currentItem()：获取当前选中的节点；

简单示例：创建一个动物分类树形控件。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QTreeWidget *tree = new QTreeWidget(this);
    tree->setGeometry(50, 50, 300, 200);
    tree->setHeaderLabel("动物分类");

    // 顶层节点：猫、狗、鸟
    QTreeWidgetItem *itemCat = new QTreeWidgetItem(tree);
    itemCat->setText(0, "猫");
    QTreeWidgetItem *itemDog = new QTreeWidgetItem(tree);
    itemDog->setText(0, "狗");
    QTreeWidgetItem *itemBird = new QTreeWidgetItem(tree);
    itemBird->setText(0, "鸟");

    // 给猫添加子节点
    QTreeWidgetItem *subCat1 = new QTreeWidgetItem(itemCat);
    subCat1->setText(0, "布偶猫");
    QTreeWidgetItem *subCat2 = new QTreeWidgetItem(itemCat);
    subCat2->setText(0, "橘猫");

    // 展开所有节点
    tree->expandAll();
}

六、容器类控件

容器类控件的核心作用是对其他控件进行分组和管理，让界面布局更清晰，同时实现特定的界面切换、分组功能。

6.1 分组框 QGroupBox

功能 ：对相关控件进行分组，带分组标题，让界面逻辑更清晰。
核心属性/方法：

• setTitle(const QString&)：设置分组标题；
• setCheckable(bool)：设置是否可勾选（勾选后组内控件才可用）；

简单示例：将两个单选按钮放入分组框。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 创建分组框，设置标题
    QGroupBox *group = new QGroupBox("性别选择", this);
    group->setGeometry(100, 100, 200, 100);
    // 创建单选按钮，父控件为分组框
    QRadioButton *rBtn1 = new QRadioButton("男", group);
    QRadioButton *rBtn2 = new QRadioButton("女", group);
    rBtn1->setGeometry(30, 30, 50, 30);
    rBtn2->setGeometry(120, 30, 50, 30);
    rBtn1->setChecked(true);
}

6.2 标签页 QTabWidget

功能 ：实现多标签页切换 ，每个标签页对应一个界面，节省界面空间，是多界面管理的常用控件。
核心方法：

• addTab(QWidget* page, const QString& text)：添加标签页；
• currentIndex()：获取当前选中的标签页索引；
• setCurrentIndex(int)：切换到指定标签页；

简单示例：创建两个可切换的标签页。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QTabWidget *tab = new QTabWidget(this);
    tab->setGeometry(50, 50, 300, 200);
    // 创建两个标签页的容器控件
    QWidget *tab1 = new QWidget();
    QWidget *tab2 = new QWidget();
    // 添加标签页，设置标题
    tab->addTab(tab1, "标签页1");
    tab->addTab(tab2, "标签页2");
    // 在标签页1中添加一个标签
    QLabel *lab = new QLabel("这是标签页1的内容", tab1);
    lab->setGeometry(100, 50, 150, 30);
}

七、布局管理器

在前面的示例中，我们使用setGeometry()设置控件的位置和大小，这种绝对定位的方式有明显缺陷：窗口大小改变时，控件位置和大小不会自适应，界面会混乱。

Qt 提供了布局管理器 来解决这个问题，布局管理器可自动管理控件的位置和大小，随窗口大小自适应调整，常用的布局管理器有四种：垂直布局（QVBoxLayout） 、水平布局（QHBoxLayout） 、网格布局（QGridLayout） 、表单布局（QFormLayout）。

布局管理器的核心使用原则：将控件添加到布局中，再将布局设置给窗口/容器控件，无需手动设置控件的位置和大小。

7.1 垂直布局 QVBoxLayout

控件从上到下垂直排列，是最常用的布局之一。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    // 创建垂直布局对象
    QVBoxLayout *vLayout = new QVBoxLayout();
    // 创建控件，无需指定父控件
    QPushButton *btn1 = new QPushButton("按钮1");
    QPushButton *btn2 = new QPushButton("按钮2");
    QPushButton *btn3 = new QPushButton("按钮3");
    // 将控件添加到布局中
    vLayout->addWidget(btn1);
    vLayout->addWidget(btn2);
    vLayout->addWidget(btn3);
    // 设置布局间距
    vLayout->setSpacing(20);
    // 将布局设置给当前窗口
    this->setLayout(vLayout);
}

7.2 水平布局 QHBoxLayout

控件从左到右水平排列，与垂直布局配合使用可实现基础的界面布局。

// 水平布局代码与垂直布局类似，仅布局类不同
QHBoxLayout *hLayout = new QHBoxLayout();
hLayout->addWidget(btn1);
hLayout->addWidget(btn2);
this->setLayout(hLayout);

7.3 网格布局 QGridLayout

控件按行和列网格排列，适合复杂的界面布局，可指定控件所在的行、列位置。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QGridLayout *gLayout = new QGridLayout();
    QPushButton *btn1 = new QPushButton("按钮1");
    QPushButton *btn2 = new QPushButton("按钮2");
    QPushButton *btn3 = new QPushButton("按钮3");
    QPushButton *btn4 = new QPushButton("按钮4");
    // 添加控件，指定行和列（从 0 开始）
    gLayout->addWidget(btn1, 0, 0); // 第0行第0列
    gLayout->addWidget(btn2, 0, 1); // 第0行第1列
    gLayout->addWidget(btn3, 1, 0); // 第1行第0列
    gLayout->addWidget(btn4, 1, 1); // 第1行第1列
    this->setLayout(gLayout);
}

7.4 表单布局 QFormLayout

专为表单界面 设计，控件按两列排列，左列为标签（提示），右列为输入控件，适合用户信息填写界面。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QFormLayout *fLayout = new QFormLayout();
    // 创建标签和输入控件
    QLabel *lab1 = new QLabel("姓名");
    QLabel *lab2 = new QLabel("年龄");
    QLineEdit *edit1 = new QLineEdit();
    QSpinBox *spin1 = new QSpinBox();
    // 添加表单行：标签 + 输入控件
    fLayout->addRow(lab1, edit1);
    fLayout->addRow(lab2, spin1);
    this->setLayout(fLayout);
}

7.5 空白间隔 QSpacer

使用布局管理器的时候，可能需要在控件之间添加一段空白，就可以使用QSpacerItem来表示，支持水平和垂直方向的空白间隔。
简单示例：在两个水平排列的按钮中间添加空白间隔。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(400, 300);
    QHBoxLayout *hLayout = new QHBoxLayout();
    QPushButton *btn1 = new QPushButton("按钮1");
    QPushButton *btn2 = new QPushButton("按钮2");

    // 创建水平空白间隔（宽度200，高度20）
    QSpacerItem *spacer = new QSpacerItem(200, 20, QSizePolicy::Expanding, QSizePolicy::Fixed);

    hLayout->addWidget(btn1);
    hLayout->addSpacerItem(spacer); // 添加空白间隔
    hLayout->addWidget(btn2);
    this->setLayout(hLayout);
}