第十篇：布局管理-布局管理系统

Qt布局管理系统详解
原创 已于 2024-12-19 09:18:01 修改 · 627 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#qt #c++

于 2024-11-26 15:47:32 首次发布

布局管理系统

Qt 的布局管理系统为控件的排版提供了强大而灵活的支持。它通过自动调整控件的大小和位置来帮助开发者创建响应式的界面。Qt 布局系统的核心是通过继承自 QLayout 类的布局管理器实现的。

1、布局管理器

常用的布局管理器有 QHBoxLayout、QVBoxLayout、QGridLayout 和 QFormLayout 等。

在这里插入图片描述

基本布局管理器（QBoxLayout）

基本布局管理器 QBoxLayout 类可以使子部件在水平方向或者垂直方向排成一列，它将所有的空间分成一行盒子，然后将每个部件放入一个盒子中。

QHBoxLayout 水平布局管理器和 QVBoxLayout 垂直布局管理器

代码实现：

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

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle(tr("基本布局管理器"));

        QVBoxLayout *layout = new QVBoxLayout;

        // 上部分使用水平布局
        QHBoxLayout *hLayout = new QHBoxLayout; // 新建水平布局管理器
        QPushButton *lBtn = new QPushButton("左面控件");
        QPushButton *rBtn = new QPushButton("右面控件");
        hLayout->addWidget(lBtn);
        hLayout->addWidget(rBtn);
        hLayout->setSpacing(20); // 设置部件的间隔
        hLayout->setContentsMargins(0, 0, 50, 100); // 设置布局管理器到边界的距离 左 上 右 下

        // 下部分使用垂直布局
        QVBoxLayout *vLayout = new QVBoxLayout; // 新建水平布局管理器
        QPushButton *tBtn = new QPushButton("上面控件");
        QPushButton *bBtn = new QPushButton("下面控件");
        vLayout->addWidget(tBtn);
        vLayout->addWidget(bBtn);
        vLayout->setSpacing(20); // 设置部件的间隔
        vLayout->setContentsMargins(0, 0, 50, 100); // 设置布局管理器到边界的距离 左 上 右 下

        layout->addLayout(hLayout);
        layout->addLayout(vLayout);

        setLayout(layout);
    }
};

在这里插入图片描述

栅格布局管理器（QGridLayout）

QGridLayout 类使部件在网格中进行布局，它将所有的空间分隔成一些行和列，行和列的交叉形成了单元格，然后将部件放入一个确定的单元格中。

代码实现：

#include <QWidget>
#include <QPushButton>
#include <QGridLayout>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle(tr("栅格布局管理器"));

        QGridLayout *layout = new QGridLayout();

        QPushButton *btn1_1 = new QPushButton("第一行第一列");
        QPushButton *btn1_2 = new QPushButton("第一行第二列");
        QPushButton *btn2_1 = new QPushButton("第二行第一列");
        QPushButton *btn2_2 = new QPushButton("第二行第二列");

        // 添加部件，从第0行0列开始，占据1行1列
        layout->addWidget(btn1_1, 0, 0, 1, 1);
        // 添加部件，从第0行1列开始，占据1行2列
        layout->addWidget(btn1_2, 0, 1, 1, 2);
        // 添加部件，从第1行0列开始，占据1行2列
        layout->addWidget(btn2_1, 1, 0, 1, 2);
        // 添加部件，从第1行2列开始，占据1行1列
        layout->addWidget(btn2_2, 1, 2, 1, 1);

        setLayout(layout);
    }
};

注意：当部件加入到一个布局管理器中，然后将这个布局管理器再放到一个窗口部件上时，这个布局管理器以及它包含的所有部件都会自动重新定义自己的父对象（parent）为这个窗口部件，所以在创建布局管理器和其中的部件时并不用指定父部件。

在这里插入图片描述

窗口布局管理器（QFormLayout）

QFormLayout 是一种非常适合创建表单界面的布局管理器。它能帮助开发者快速地将标签和输入控件按行排列，并自动处理控件的对齐、间距和大小调整。它特别适合用于信息录入的界面，比如用户注册、设置界面、填写表单等场景。

举例说明：

我们分别使用 QFormLayout 与 QGridLayout 来创建一个登陆界面，如图所示：

在这里插入图片描述

QFormLayout

#include <QWidget>
#include <QLineEdit>
#include <QPushButton>
#include <QFormLayout>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle("窗口布局管理器");

        QFormLayout *layout = new QFormLayout();
        layout->addRow(tr("用户名:"), new QLineEdit);
        layout->addRow(tr("密码:"), new QLineEdit);
        layout->addRow(new QPushButton("确定"));
        layout->setSpacing(10);
        layout->setMargin(10);
        setLayout(layout);
    }
};

QGridLayout

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QGridLayout>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle("栅格布局管理器");

        QGridLayout *layout = new QGridLayout();
        layout->addWidget(new QLabel("用户名:"), 0, 0, 1, 1);
        layout->addWidget(new QLineEdit, 0, 1, 1, 2);
        layout->addWidget(new QLabel("密码:"), 1, 0, 1, 1);
        layout->addWidget(new QLineEdit, 1, 1, 1, 2);
        layout->addWidget(new QPushButton("确定"), 2, 0, 1, 3);
        layout->setSpacing(10);
        layout->setMargin(10);
        setLayout(layout);
    }
};

此时你会发现栅格布局的代码会比窗口布局多一点，不过还可以接受，但是当你对界面进行拉伸的时候就会有对比！

窗口布局拉伸效果展示：

在这里插入图片描述

栅格布局拉伸效果展示:

在这里插入图片描述

此时，你会发现使用栅格布局创建的界面中左侧的标签被拉伸了，显然不符合我们的预期。这样就能看出在创建表单界面时窗口布局的优势了！

综合使用布局管理器

前面讲到的3种布局管理器，真正使用时一般是将它们综合起来应用，大家可以自己动手尝试一下！

2、设置部件大小

在 Qt 中，布局管理器（QLayout）以及控件的大小控制机制是非常重要的概念，它们直接影响控件在界面中的排列和大小调整。为了更好地理解这些概念，我们需要从几个重要的方面来进行探讨：sizeHint、minimumSizeHint、QSizePolicy、伸缩因子（stretch factor）以及布局管理器的相关属性。

sizeHint 和 minimumSizeHint

  • sizeHint: 是一个建议的大小，告诉布局管理器部件在理想情况下的推荐尺寸。它基于部件的内容以及其它因素自动计算得出。
  • minimumSizeHint：是控件的最小推荐大小。当布局管理器将控件的大小缩小时，它不会小于 minimumSizeHint 的返回值。

QSizePolicy

QSizePolicy是控制控件在布局管理器中如何伸缩的关键属性。通过 QSizePolicy，你可以定义控件在布局中的大小行为（水平和垂直方向）。每个控件都有一个 QSizePolicy，它包括水平（Horizontal）和垂直（Vertical）两个方向的策略。

在这里插入图片描述

可以看到，大小策略与 SizeHint() 的值息息相关。对于布局管理器来说，大小策略对于布局效果也起到了很重要的作用。

伸缩因子（stretch factor）

伸缩因子是指在布局中，当空间变动时，不同控件会按照一定的比例来分配可用空间。通常用于 QHBoxLayout 或 QVBoxLayout 中，它定义了布局管理器如何分配控件之间的剩余空间。

例如，如果你有两个控件，想让左侧控件的宽度是右侧控件宽度的两倍，可以通过设置伸缩因子来实现：

在这里插入图片描述

布局管理器中的属性

布局间距（Spacing）
  • setSpacing()：设置控件之间的间距，默认为6像素。通过修改此属性，可以调整布局中控件之间的空间。
QHBoxLayout *layout = new QHBoxLayout;
layout->setSpacing(10);  // 设置控件之间的间距为10像素
布局边距（Margins）
  • setContentsMargins()：设置布局的边距，即布局与父控件之间的空间。通常用于调整布局边界的间距。
QVBoxLayout *layout = new QVBoxLayout;
layout->setContentsMargins(10, 10, 10, 10);  // 设置四个方向的边距为10像素
大小约束（Size Contraints）

在这里插入图片描述

可扩展窗口

一个窗口可能有很多选项是扩充的，只有在必要的时候才显示出来，这时就可以使用一个按钮来隐藏或者显示多余的内容，就是所谓的可扩展窗口。要实现可扩展窗口，就要得力于布局管理器的特性，那就是当子部件隐藏时，布局管理器自动缩小，当子部件重新显示时，布局管理器再放大。

举例说明：

#include <QWidget>
#include <QLineEdit>
#include <QPushButton>
#include <QFormLayout>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle(tr("可扩展窗口"));

        // 上部分使用水平布局
        QHBoxLayout *hLayout = new QHBoxLayout; // 新建水平布局管理器
        QPushButton *lBtn = new QPushButton("隐藏可扩展窗口");
        QPushButton *rBtn = new QPushButton("可扩展窗口");
        hLayout->addWidget(lBtn, 2); // 设置伸缩因子为2
        hLayout->addWidget(rBtn, 1); // 设置伸缩因子为1
        hLayout->setSpacing(20); // 设置部件的间隔
        hLayout->setContentsMargins(0, 0, 50, 100); // 设置布局管理器到边界的距离 左 上 右 下
        setLayout(hLayout);

        connect(lBtn, &QPushButton::clicked, [=]() {
            if (rBtn->isHidden()) {
                rBtn->show();
                lBtn->setText("隐藏可扩展窗口");
            } else {
                rBtn->hide();
                lBtn->setText("显示可扩展窗口");
            }
        });
    }
};

结果展示：

在这里插入图片描述

点击"隐藏可扩展窗口"按钮，实现"可扩展窗口"按钮的显示与隐藏。

在这里插入图片描述

分裂器（QSplitter）

分裂器 QSplitter 与 QBoxLayout 类似，可以完成布局管理器的功能，但是包含在它里面的部件，默认是可以随着分裂器的大小变化而变化的。

举例说明：

#include <QSplitter>
#include <QTextEdit>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr)
        : QWidget(parent)
    {
        setWindowTitle("分割器");

        // 创建一个垂直的 QSplitter
        QSplitter *splitter = new QSplitter(Qt::Horizontal, this);

        // 创建控件
        QTextEdit *textEdit1 = new QTextEdit("第一个控件", this);
        QTextEdit *textEdit2 = new QTextEdit("第二个控件", this);
        QLabel *label = new QLabel("第三个控件", this);

        // 设置控件到 splitter 中
        splitter->addWidget(textEdit1);
        splitter->addWidget(textEdit2);
        splitter->addWidget(label);

        // 设置初始大小比例
        splitter->setStretchFactor(0, 2); // 第一个控件占用两倍的伸展因子
        splitter->setStretchFactor(1, 1); // 第二个控件占用一倍的伸展因子
        splitter->setStretchFactor(2, 1); // 第三个控件占用一倍的伸展因子

        // 设置分隔条样式
        splitter->setHandleWidth(8); // 设置分隔条的宽度

        // 添加按钮到主布局
        QPushButton *button = new QPushButton("方向切换", this);

        // 创建主布局
        QVBoxLayout *mainLayout = new QVBoxLayout(this);
        mainLayout->addWidget(splitter);
        mainLayout->addWidget(button);

        setLayout(mainLayout);

        // 切换方向的按钮功能
        connect(button, &QPushButton::clicked, this, [=]() {
            if (splitter->orientation() == Qt::Horizontal) {
                splitter->setOrientation(Qt::Vertical); // 切换为垂直方向
            } else {
                splitter->setOrientation(Qt::Horizontal); // 切换为水平方向
            }
        });
    }
};

结果展示：

在这里插入图片描述

方向切换后结果：

在这里插入图片描述

Qt布局管理器(QHBoxLayout,QVBoxLayout)
m0_62599305的博客
01-11 3900
想要不用也是很简单，选中指定的Widget，点击打破布局。可以把一些组件按一定的次序排列，这就是布局管理器。他和QVBoxLayout基本一致，在这我就不讲了。把QHbox放到QVbox中，组成一个网格布局。QVBoxLayout:按垂直的顺序排列组件。1、把下列的组件拖出，把组件放在里面。2、点击按钮，排序某个Widget。他可以自动排列窗口中的界面组件。首先选中你要排序的Widget。窗口变化后自动更新界面组件。
Qt学习12：常用Layout布局方式总结
ylh的博客
07-03 6567
Qt学习记录：常用布局QBoxLayout，QGridLayout，QFormLayout，QStackedLayout，QTabWidget，QStackedWidget，QSplitter等类详解
Qt布局管理器
Suinnn的博客
02-11 1634
Qt布局管理器
[QT_045]Qt学习之水平（QHBoxLayout ）和垂直布局器（QVBoxLayout）
kongcheng253的博客
01-28 8506
Qt学习之水平（QHBoxLayout ）和垂直布局器（QVBoxLayout）
Qt 垂直布局 (QVBoxLayout)
热门推荐
shenmingyi.blog.csdn.net
08-27 6万+
Qt 垂直布局 (QVBoxLayout) 上一节说了水平布局:https://blog.csdn.net/weixin_42837024/article/details/82114258 QVBoxLayout:在垂直的方向上排列控件 上下排列 QVBoxLayout* pLayout = new QVBoxLayout();//水平布局 QPushButton* p...
2024年江西省职业院校技能大赛：GZ015-机器人系统集成应用技术（教师赛）赛项（高职组)样题
12-26
5. 控制系统和通讯方案设计：根据产品生产工艺流程，合理设计各硬件单元的布局分布，绘制控制系统布局方案及通讯拓扑结构图，确保各功能单元能够通过工业以太网通讯方式连接到总控单元的PLC上。 6. 虚拟仿真系统的...
笔记5：主页布局-用户列表【Vue实战项目：电商管理系统（Element-UI）】
未来来
07-17 1464
文章目录1 整体布局2 完成用户列表2.1 通过路由的形式展示列表组件2.2 在sessionStorage中保存左侧菜单的激活状态2.3 绘制用户列表组件的基础布局结构2.4 获取用户列表数据2.5 使用el-table组件渲染基本的用户列表2.6 添加索引列2.7 通过作用域插槽渲染操作列2.7 通过作用域插槽渲染操作列2.8 实现分页效果2.9 修改用户状态2.10 实现搜索功能 1 整体布局 2 完成用户列表 2.1 通过路由的形式展示列表组件 创建Users页面：/components/use
论文解读：TAP-2.5D: A Thermally-Aware Chiplet PlacementMethodology for 2.5D Systems
popoluoluo的博客
04-21 995
传统上，单片芯片的物理布局专注于减少连接宏单元的总线长并最小化面积[11]，然而，这最终会导致紧密排列的chiplet部件，具有高功率密度，则可能会遭受基于热的故障。我们假设网格的粒度为1毫米，以放置芯片中心（芯片的宽度和高度可以是任意值），这在有限的时间内提供了解空间与解质量之间的良好平衡。图5展示了CPU-DRAM系统的热图，其中(a)是原始布局[14]，(b)是使用Compact-2.5D方法的布局解决方案，(c)和(d)分别是我们的热感知布局方案，分别采用无中继非流水线芯片间链接和气体站链接。
鸿蒙5.0进阶开发：UI开发-构建布局（创建网格 (Grid/GridItem)）
AyomQAQ的博客
12-17 1233
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
GameMaker Studio开发：UI系统与界面布局-（10）.自定义UI控件.docxGameMaker Studio开发：UI系统与界面布局-（11）.使用GML编写UI逻辑.docxGa
09-02
布局管理与响应式设计.docx GameMaker Studio开发：UI系统与界面布局_（13）.跨平台UI适配.docx GameMaker Studio开发：UI系统与界面布局_（14）.UI性能优化.docx GameMaker Studio开发：UI系统与界面布局_（15）....
Qt布局管理（布局控件）
...
01-11 3801
创建 QVBoxLayout 控件的同时可以指定父窗口，那么它将作为父窗口中管理其它控件的工具；当窗口中包含多个 strech 值为 0 的空白行时，它们会平分窗口中的空白区域。添加一个空白行，整个窗口中除了控件占用的区域外，其它区域可以由多个（≥0）空白行分摊，分摊比例取余于各个空白行设置的 stretch 参数的值。总之借助布局管理器，我们无需再逐个调整控件的位置和大小，可以将更多的精力放在软件功能的实现上。当用户调整窗口大小时，位于布局管理器内的控件也会随之调整大小，从而保持整个界面的美观。
qt QHBoxLayout详解
ckg3824278的博客
10-25 1309
是 Qt 框架中用于创建水平布局的类。它将子控件以横向的方式排列，并自动调整大小，以适应父窗口的尺寸变化。
【PyQt学习篇 · ⑫】：QVBoxLayout和QHBoxLayout布局管理器的使用
Oh_Python的博客
12-05 7401
QVBoxLayout 和 QHBoxLayout 是 PyQt 中用于实现垂直和水平布局的两个布局管理器。QVBoxLayout 可以按照从上到下的方式垂直排列控件。使用方法可以添加弹性空间，将控件推至布局的顶部或底部。使用方法可以将控件添加到布局中，可以添加 QLabel、QPushButton等等控件。使用方法可以添加其他嵌套的布局管理器。可以使用方法设置控件之间的间距。QVBoxLayout和QHBoxLayout中可以使用方法设置布局中的对齐方式，如。
Qt之水平/垂直布局（QBoxLayout、QHBoxLayout、QVBoxLayout）
weixin_34161029的博客
05-30 4244
简述 QBoxLayout可以在水平方向或垂直方向上排列控件，由QHBoxLayout、QVBoxLayout所继承。 QHBoxLayout：水平布局，在水平方向上排列控件，即：左右排列。 QVBoxLayout：垂直布局，在垂直方向上排列控件，即：上下排列。 通过查看源码，我们可以发现，水平布局、垂直布局除了构造时的方向（L...
PyQt6 垂直布局Vertical Layout (QVBoxLayout)
java1234的博客
12-09 1817
垂直布局Vertical Layout属与线性布局，线性布局是将放入其中的组件按照垂直或水平方向来布局，也就是控制放入其中的组件横向排列或纵向排列。其中，将纵向排列的称为垂直线性布局管理器。
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 垂直布局Vertical Layout
小黄鸭的博客
05-12 1450
QVBoxLayout是Qt框架中的一个布局管理器类，用于在垂直方向上排列子控件。它是QBoxLayout的子类，继承了QBoxLayout的功能和特性。通过使用QVBoxLayout，可以对子控件在垂直方向上进行自动布局，而无需手动调整它们的位置和大小。可以将多个子控件添加到QVBoxLayout中，并通过一些方法和属性来指定它们之间的间距和对齐方式。
QT QVBoxLayout 垂直布局控件
断点
04-28 3008
本文详细的介绍了QVBoxLayout控件的各种操作，例如：新建界面、添加控件、布局控件、显示控件、添加空白行、设置间距 、添加间距、设置位置、设置外边距、设置边距、添加固定宽度、方向上、方向下、方向左、方向右等等、 样式表等操作。 实际开发中，一个界面上可能包含十几个控件，手动调整它们的位置既费时又费力。布局管理器可以完成两件事：自动调整控件的位置，包括控件之间的间距、对齐等；当用户调整窗口大小时，位于布局管理器内的控件也会随之调整大小，从而保持整个界面的美观。
【Qt】布局管理器控件 QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout
最新发布
2203_76003626的博客
06-15 1436
布局管理器控件
【PyQt5】详解QHBoxLayout和QVBoxLayout
北极星的博客
10-03 7634
1. 简介 QHBoxLayout和QVBoxLayout是用来布局的，前者用来水平布局，后者用来垂直布局。 水平布局 垂直布局 2.
CSS商业网站布局实战：第8-13章源代码解析
### 第10章：Flexbox布局 #### 知识点概述 - **Flexbox布局原理**：解释CSS中的弹性盒子模型（Flexbox），它是为布局设计提供的一个更有效的方式来处理不同屏幕尺寸和方向。 - **Flex容器与项目**：介绍如何将元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值