【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:Qt 专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢请大家批评指出,及时修改
  • 感谢大家点赞👍收藏⭐评论✍

Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout

文章编号:Qt 学习笔记 / 42


一、 QHBoxLayout介绍

1. 简介

QHBoxLayout(水平布局)是Qt中的一种布局管理器,用于在水平方向上排列子控件。它是QBoxLayout的一个子类。

使用QHBoxLayout可以将子控件按照从左到右的顺序排列,子控件之间的间距可以通过设置布局的spacing属性来调整。

在这里插入图片描述

2. 核心属性

属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上⽅边距
layoutBottomMargin下⽅边距
layoutSpacing相邻元素之间的间距

二、 QHBoxLayout使用

1. 使用代码创建水平布局管理控件

  1. 编辑程序,创建三个按钮和一个水平布局,代码如下
#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include <QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //创建水平布局
    QHBoxLayout * layout = new QHBoxLayout();
    //创建三个按钮
    QPushButton *button1 =new QPushButton("按钮1");
    QPushButton *button2 =new QPushButton("按钮2");
    QPushButton *button3 =new QPushButton("按钮3");
    //将按钮设置到水平布局中
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    //设置layout到widget中
    this->setLayout(layout);
}

Widget::~Widget()
{
    delete ui;
}
  1. 运行代码,查看结果,如下图所示
    在这里插入图片描述

2. 布局嵌套(垂直布局嵌套水平布局)

  1. 使用代码编写嵌套布局
#include "widget.h"
#include "ui_widget.h"
#include<QHBoxLayout>
#include<QVBoxLayout>
#include<QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建顶层 layout
    QVBoxLayout* layoutParent = new QVBoxLayout();
    this->setLayout(layoutParent);
    
    // 添加两个按钮进去
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    layoutParent->addWidget(btn1);
    layoutParent->addWidget(btn2);
    
    // 创建⼦ layout
    QHBoxLayout* layoutChild = new QHBoxLayout();
    
    // 添加两个按钮进去
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");
    layoutChild->addWidget(btn3);
    layoutChild->addWidget(btn4);
    
    // 把这个⼦layout 添加到父layout 中
    layoutParent->addLayout(layoutChild);
}

Widget::~Widget()
{
    delete ui;
}

  1. 运行结果,查看结果
    在这里插入图片描述

3. 图形化实现嵌套布局

  1. 使用图形化界面创建嵌套布局,在垂直布局中嵌套水平布局
    在这里插入图片描述

  2. 运行代码,查看结果
    在这里插入图片描述


在这里插入图片描述

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Duck Bro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值