Qt 布局管理器的层级关系

1、HomeWidget.h头文件：

复制代码

#ifndef HOMEWIDGET_H
#define HOMEWIDGET_H

#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>


class HomeWidget : public QWidget
{
    Q_OBJECT

public:
    HomeWidget(QWidget *parent = nullptr);
    ~HomeWidget();

    // 3、声明一个QWidget对象
    QWidget *mainWidget;
    QWidget *topWidget;
    QWidget *leftWidget;
    QWidget *rightWidget;
    QWidget *bottomWidget;

    // 主布局
    QVBoxLayout *mainLayout;
    QHBoxLayout *middleLayout;

    // 各部件内部布局
    QVBoxLayout *topLayout;
    QVBoxLayout *leftLayout;
    QVBoxLayout *rightLayout;
    QHBoxLayout *bottomLayout;




};
#endif // HOMEWIDGET_H

2、HomeWidget.cpp类的实现：

复制代码

#include "HomeWidget.h"

HomeWidget::HomeWidget(QWidget *parent)
    : QWidget(parent)
{
    // 覆盖在顶层窗口之上的QWidget主部件
    mainWidget = new QWidget(this);
    // 创建各个区域的部件
    topWidget = new QWidget(mainWidget);
    leftWidget = new QWidget(mainWidget);
    rightWidget = new QWidget(mainWidget);
    bottomWidget = new QWidget(mainWidget);

    // 为顶层窗口设置布局规则
    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->addWidget(mainWidget);

    // 设置主部件的布局规则
    mainLayout = new QVBoxLayout(mainWidget);
    // 1、将topWidget添加到主布局中
    mainLayout->addWidget(topWidget);
    // 2、设置中间部件的布局
    middleLayout = new QHBoxLayout();
    middleLayout->addWidget(leftWidget);
    middleLayout->addWidget(rightWidget);
    mainLayout->addLayout(middleLayout);
    // 3、将topWidget添加到主布局中
    mainLayout->addWidget(bottomWidget);


/**
 *
 1、在Qt里，把一个部件设置为另一个部件的子部件，和把这个部件添加到布局管理器中，这是两个不同的操作，它们有着不同的作用：
（1）设置子部件：
  topWidget = new QWidget(mainWidget);
    此操作让topWidget在 GUI 的层级结构里，成为mainWidget的子部件；
    从视觉呈现上来说，topWidget会被显示在mainWidget的区域范围之内；
    不过，此时topWidget的具体位置和大小并没有被确定，它默认会出现在父部件的左上角，尺寸则是系统设定的默认值；
（2）添加到布局管理器：
  mainLayout->addWidget(topWidget);
    该操作把topWidget纳入到mainLayout的管理体系之中；
    布局管理器会对topWidget的几何属性，也就是位置和大小进行计算和控制，使其能够根据布局规则，合理地填充分配到的空间；
    要是没有这一步操作，虽然部件已经存在于父部件之中，但不会按照预期的布局规则来显示；
 */


/**
 * 布局管理器的层级关系：
 *

HomeWidget（顶层窗口）
├─ layout（管理顶层窗口内的布局）
│  └─ mainWidget（mainWidget窗口，覆盖整个顶层窗口）
│     └─ mainLayout（管理mainWidget窗口内的布局）
│        ├─ topWidget（顶部窗口）
│        ├─ middleLayout（水平布局）
│        │  ├─ leftWidget（左侧窗口）
│        │  └─ rightWidget（右侧窗口）
│        └─ bottomWidget（底部窗口）

 */

    // 设置对象名称，以便在样式表中引用
    mainWidget->setObjectName("mainWidget");
    topWidget->setObjectName("topWidget");
    leftWidget->setObjectName("leftWidget");
    rightWidget->setObjectName("rightWidget");
    bottomWidget->setObjectName("bottomWidget");
    // 设置样式表
    QString style = R"(
        #mainWidget {
            background-color: black;
        }

        #topWidget {
            background-color: red;
        }

        #leftWidget {
            background-color: green;
        }

        #rightWidget {
            background-color: pink;
        }

        #bottomWidget {
            background-color: blue;
        }
     )";
    // 应用样式表到当前窗口
    setStyleSheet(style);






}

HomeWidget::~HomeWidget() {}

3、运行结果：