当前位置：首页 > article >正文

Qt 布局管理器的层级关系

article 2025/8/18 16:18:54

1、HomeWidget.h头文件：

#ifndef HOMEWIDGET_H
#define HOMEWIDGET_H#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>class HomeWidget : public QWidget
{Q_OBJECTpublic: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、运行结果：
在这里插入图片描述