第四章、Qt布局管理介绍（QT从开始到结束）-DeepSeek、ChatGPT帮我答疑解惑，QT学习记录

第四章、Qt布局管理介绍（QT从开始到结束）-DeepSeek、ChatGPT帮我答疑解惑，QT学习记录

1、布局管理概述

Qt 的布局管理系统用于自动排列和管理窗口部件（Widgets）的位置和大小，确保界面在不同窗口尺寸和分辨率下保持一致性和美观性。以下是 Qt 提供的核心布局管理器：

布局类型 描述
QVBoxLayout 垂直布局，部件按垂直方向排列
QHBoxLayout 水平布局，部件按水平方向排列
QGridLayout 网格布局，部件按行和列排列
QFormLayout 表单布局，适合标签-输入框对的形式
QStackedLayout 堆叠布局，同一区域显示多个部件，每次只显示一个
自定义布局 继承 QLayout 实现自定义布局逻辑

光看文字也学不到啥，也不知道怎么用的，所以本着一切真相看代码的逻辑，下面上代码

制作不易，求点赞！！！，求评论！！！，求转发！！！，求收藏！！！

layoutpage.h

#ifndef LAYOUTPAGE_H
#define LAYOUTPAGE_H

#include <QWidget>
#include <QTextEdit>

class LayoutPage : public QWidget
{
   
    Q_OBJECT
public:
    explicit LayoutPage(QWidget *parent = nullptr);

private:
    void setupUI();
    QWidget* createHBoxLayoutDemo();    // 水平布局示例
    QWidget* createVBoxLayoutDemo();    // 垂直布局示例
    QWidget* createGridLayoutDemo();    // 网格布局示例
    QWidget* createFormLayoutDemo();    // 表单布局示例
    QWidget* createStackedLayoutDemo(); // 堆叠布局示例
    QWidget* createSizePolicyDemo();    // 大小策略示例
    QWidget* createAlignmentDemo();     // 对齐方式示例
    QWidget* createComplexLayoutDemo(); // 复杂混合布局示例
    QWidget* createResponsiveDemo();    // 响应式布局示例
    
private:
    QTextEdit *displayArea;  // 用于显示布局交互结果
    void updateDisplayArea(const QString &text);

protected:
    bool eventFilter(QObject *watched, QEvent *event) override;
};

#endif // LAYOUTPAGE_H

layoutpage.c

#include "layoutpage.h"
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QGridLayout>
#include <QFormLayout>
#include <QStackedLayout>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>
#include <QSpinBox>
#include <QComboBox>
#include <QGroupBox>
#include <QRadioButton>
#include <QCheckBox>
#include <QScrollArea>
#include <QTabWidget>
#include <QSizePolicy>
#include <QEvent>
LayoutPage::LayoutPage(QWidget *parent)
    : QWidget(parent)
{
   
    setupUI();
}

void LayoutPage::setupUI()
{
   
    // 创建主布局
    QVBoxLayout *mainLayout = new QVBoxLayout(this);

    // 标题
    QLabel *titleLabel = new QLabel("布局管理演示", this);
    // 设置标题字体大小和加粗
    titleLabel->setStyleSheet("font-size: 16px; font-weight: bold;");
    // 设置标题居中
    mainLayout->addWidget(titleLabel,0);

    // 创建选项卡窗口
    QTabWidget *tabWidget = new QTabWidget(this);

    //============================首页 概述============================
    // 创建首页
    QWidget *homePage = new QWidget;
    // 设置首页布局
    QVBoxLayout *homeLayout = new QVBoxLayout(homePage);
    
    // 说明文本
    QLabel *description = new QLabel(
        "Qt布局管理介绍：\n\n"
        "1. 水平布局 (QHBoxLayout)\n"
        "   • 将控件水平排列\n"
        "   • 可以设置控件间距和边距\n"
        "   • 支持拉伸因子(stretch)\n\n"
        "2. 垂直布局 (QVBoxLayout)\n"
        "   • 将控件垂直排列\n"
        "   • 可以嵌套其他布局\n"
        "   • 常用于主窗口布局\n\n"
        "3. 网格布局 (QGridLayout)\n"
        "   • 将控件排列在网格中\n"
        "   • 支持跨行跨列\n"
        "   • 适合复杂的表单布局\n\n"
        "4. 表单布局 (QFormLayout)\n"
        "   • 专门用于表单设计\n"
        "   • 自动处理标签和字段的对齐\n"
        "   • 支持不同的换行策略\n\n"
        "5. 堆叠布局 (QStackedLayout)\n"
        "   • 一次只显示一个控件\n"
        "   • 常用于向导页面\n"
        "   • 可以动态切换显示的控件\n\n"
        "6. 大小策略 (QSizePolicy)\n"   
        "   • 控制控件在布局中的大小\n"
        "   • 可以设置最小/最大大小\n"
        "   • 可以设置拉伸因子\n\n"
        "7. 对齐方式 (Qt::Alignment)\n"
        "   • 控制控件在布局中的对齐方式\n"
        "   • 可以设置水平对齐和垂直对齐\n\n"
        "8. 复杂混合布局 (QGridLayout + QHBoxLayout)\n"
        "   • 将控件排列在网格中\n"
        "   • 使用水平布局管理器控制控件的排列\n\n"
        "9. 响应式布局 (QGridLayout + QSizePolicy)\n"
        "   • 使用网格布局管理器排列控件\n"
        "   • 根据窗口大小调整控件的大小\n\n"    
        "布局使用技巧：\n"
        "• 合理使用布局嵌套\n"
        "• 注意控件的大小策略\n"
        "• 使用伸缩项调整空间分配\n"
        "• 设置合适的边距和间距\n"
        "• 考虑布局的自适应性\n\n"        

        "容器控件（Container Widgets）和布局管理器（Layout Managers）的主要区别：\n"
        "容器控件（Container Widgets）：\n"
        "QTabWidget    // 选项卡容器，可以包含多个页面\n"
        "QGroupBox     // 组框容器，可以给一组控件加边框和标题\n"
        "QScrollArea   // 滚动区域容器，提供滚动功能\n"
        "QFrame        // 基础框架容器\n"
        "QStackedWidget // 堆叠容器，一次只显示一个子部件\n\n"

        "布局管理器（Layout Managers）：\n"
        "QHBoxLayout    // 水平布局管理器，将控件水平排列\n"
        "QVBoxLayout    // 垂直布局管理器，将控件垂直排列\n"
        "QGridLayout    // 网格布局管理器，将控件排列在网格中\n"
        "QFormLayout    // 表单布局管理器，将控件排列成表单形式\n"
        "QStackedLayout // 堆叠布局管理器，将多个控件堆叠在一起\n\n"

        "1、容器控件：\n"
        "是实际的可视控件\n"
        "可以直接添加到界面上\n"
        "有自己的外观和边框\n"
        "使用 addTab(), addWidget() 等方法添加子控件\n"
        "2、布局管理器：\n"
        "不是可视控件，只负责管理布局\n"
        "需要依附于控件使用\n"
        "没有自己的外观\n"
        "使用 addWidget(), addLayout() 等方法管理控件位置\n");
    // 设置说明文本的换行方式
    description->setWordWrap(true);
    // 设置说明文本的垂直对齐方式
    description->setAlignment(Qt::AlignTop);

    // 创建滚动区域
    QScrollArea *scrollArea = new QScrollArea;
    // 设置滚动区域的内容为说明文本
    scrollArea->setWidget(description);
    // 设置滚动区域的内容可以调整大小
    scrollArea->setWidgetResizable(true);
    // 设置自动调整大小
    scrollArea->setSizeAdjustPolicy(QAbstractScrollArea::AdjustToContents);
    // 设置滚动区域对齐方式
    scrollArea->setAlignment(Qt::AlignTop);

    // 将滚动区域添加到首页布局
    homeLayout->addWidget(scrollArea);
    
    // 将首页添加到选项卡窗口
    tabWidget->addTab(homePage, "概述");
    //============================首页 概述============================

    // 添加各种布局示例
    tabWidget->addTab(createHBoxLayoutDemo(), "水平布局");
    tabWidget->addTab(createVBoxLayoutDemo(), "垂直布局");
    tabWidget->addTab(createGridLayoutDemo(), "网格布局");
    tabWidget->addTab(createFormLayoutDemo(), "表单布局");
    tabWidget->addTab(createStackedLayoutDemo(), "堆叠布局");
    tabWidget->addTab(createSizePolicyDemo(), "大小策略");
    tabWidget->addTab(createAlignmentDemo(), "对齐方式");
    tabWidget->addTab(createComplexLayoutDemo(), "复杂混合布局");
    tabWidget->addTab(createResponsiveDemo(), "响应式布局");

    // 将选项卡窗口添加到主布局
    mainLayout->addWidget(tabWidget,8);

    QGroupBox *displayGroup = new QGroupBox("显示区域");
    // 设置显示区域大小策略,水平拉伸,垂直拉伸
    displayGroup->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred);
    // 创建显示区域布局
    QVBoxLayout *displayLayout = new QVBoxLayout(displayGroup);
    // 显示区域
    displayArea = new QTextEdit(this);
    // 设置显示区域占位文本
    displayArea->setPlaceholderText("布局交互结果将显示在这里");
    // 设置显示区域只读
    displayArea->setReadOnly(true);
    // 设置显示区域最大高度
    displayArea->setMaximumHeight(100);
    // 将显示区域添加到显示区域布局
    displayLayout->addWidget(displayArea);
    //增加清空按钮  
    QPushButton *clearButton = new QPushButton("清空", this);
    connect(clearButton, &QPushButton::clicked, [this]() {
   
        displayArea->clear();
    });
    // 将清空按钮添加到显示区域布局
    displayLayout->addWidget(clearButton);
    // 添加伸缩项
    displayLayout->addStretch();