[Qt]常用控件介绍-布局管理器-QVBoxLayout、QHBoxLayout、QGridLayout、QFormLayout、QSpace控件

devtools/2025/1/18 6:19:46/

目录

1.布局管理器

2.垂直布局-VBoxLayout控件

核心属性

核心方法

细节

布局管理器使用前后的界面变化

两个布局管理器的设定

3.水平布局-HBoxLayout控件

核心属性

垂直和水平管理器的嵌套使用

4.网格布局-GridLayout控件

核心属性

细节

SizePolicy属性

使用案例1

使用案例2-设置水平方向拉伸比例 

使用案例3-设置竖直方向拉伸系数

5.表单布局-FormLayout控件 

细节

使用案例

6.Space控件

属性

使用案例

1.布局管理器

        我们平时在使用Qt Designer的时候，在进行手动布局时，是非常不精确的，布局起来非常的麻烦，需要通过绝对定位的方式来设定，计算坐标最后使用setGeometry或者其他方式就行调节控件的位置。而引入布局管理器机制的话，就解决了上述的问题。

        在Qt中布局管理器为我们提供了很多种，也就对应了多种布局风格。常见的有垂直布局、水平布局、网格布局、表单布局。

2.垂直布局-VBoxLayout控件

核心属性
属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutBottonMargin下方边距
layoutSpacing相邻元素之间的边距

        对于layout只是用于布局属性，不提供任何的信号

核心方法
 
方法说明
addWidget(QWidget*)添加一个控件到布局管理器
this->setLayout将布局管理器添加到窗口中

细节
  • 对于布局管理器来说，如果添加的控件对象，没有显示的指定父元素，也就是没有挂载到对象树中的时候，布局管理器会自动处理父子关系，将添加的控件的父元素变为和自己一样。所以说对于布局管理器来说，可以不用显示的指定父元素。
  • 很多情况下，有添加操作的时候也是不需要指定父元素的，会自动帮我们去构建对象树关系，例如容器类控件内部的元素对象，在添加的时候不需要指定，对于布局管理器也是，当布局管理器被添加到某一个控件下的时候，就不需要指定父元素了。
  • 但是指定了父元素之后，也只是挂载到了对象树上，不会自动的设置到窗口中，我们还是要调用setLayout方法去设置到窗口当中的。
  • 对于每个widget中只能设置一个布局管理器
布局管理器使用前后的界面变化

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QVBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建三个按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");//创建布局管理器QVBoxLayout* layout = new QVBoxLayout();layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);//将布局管理器添加到窗口中this->setLayout(layout);}Widget::~Widget()
{delete ui;
}
两个布局管理器的设定

        如果说我们在代码中直接设置两个布局管理器的话，不会有任何的效果，还是显示一个布局管理器的效果。我们只能在Qt Designer中使用拖拽的方式定义布局管理器的位置才可以显示出来两个。

        如果我们在代码中创建layout的话，就只是创建一个layout，而我们在Qt Designer中的话，是先创建了一个QWidget窗口，之后再创建了一个layout。所以说在Qt Designer中才可以创建多个布局管理器。

3.水平布局-HBoxLayout控件

核心属性
属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutBottonMargin下方边距
layoutSpacing相邻元素之间的边距
垂直和水平管理器的嵌套使用

        对于layout可以嵌套进行使用的。

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");//创建顶层垂直布局管理器QVBoxLayout* vLayout = new QVBoxLayout();vLayout->addWidget(button1);vLayout->addWidget(button2);//设置到窗口中this->setLayout(vLayout);//创建按钮QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");//创建嵌套的水平布局管理器QHBoxLayout* hLayout = new QHBoxLayout();hLayout->addWidget(button3);hLayout->addWidget(button4);//将水平布局管理器添加到垂直布局管理器当中vLayout->addLayout(hLayout);}Widget::~Widget()
{delete ui;
}

4.网格布局-GridLayout控件

核心属性
属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutBottonMargin下方边距
layoutHorizontalSpacing相邻元素之间的水平方向间距
layoutVerticalSpacing相邻元素之间的垂直方向间距
layoutRowStretch行方向的拉伸系数
layoutColumnStretch列方向的拉伸系数
细节
  • 如案例1所示，如果说添加到布局管理器中的位置设置的太大，而这个值还和上一个值之间并没有其他元素的话，并不会腾出额外的空间，而是直接设置在后面。
  • 对于水平拉伸系数的设定，是按照比例来设定的，如案例2所写，拉伸系数的比例就是1：1：2。如果第二个参数设置为0的话，就是固定的大小，不参与拉伸。
  • 而竖直拉伸系数的设定，按照案例2的方法设置效果会很不明显，因为每个按钮的高度是固定的，需要按钮的垂直方向的sizePolicy属性设置为QSizePolicy::Expanding尽可能的填充满布局管理器才能看到效果。
  • 这个sizePolicy是控件的一个属性
SizePolicy属性
属性说明
QSizePolicy::Ignored忽略控件的尺寸，不对布局产生影响，也就是听从布局管理器的设定
QSizePolicy::Minimum控件的最小尺寸
QSizePolicy::Maximum控件的最大尺寸
QSizePolicy::Preferred控件的理想尺寸，布局时会尽量接近该值
QSizePolicy::Expanding控件的尺寸根据空间调整，尽可能占据更大的空间
QSizePolicy::Shrinkling空间的尺寸根据空间调整，尽可能的缩小适应空间
使用案例1
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");//创建网格布局管理器QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 1, 1);layout->addWidget(button3, 2, 2);layout->addWidget(button4, 10, 10);//设置到窗口中this->setLayout(layout);
}Widget::~Widget()
{delete ui;
}

使用案例2-设置水平方向拉伸比例 
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");//创建网格布局管理器QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 0, 2);layout->addWidget(button4, 1, 0);layout->addWidget(button5, 1, 1);layout->addWidget(button6, 1, 2);//设置到窗口中this->setLayout(layout);//设置水平的拉伸系数layout->setColumnStretch(0, 1);layout->setColumnStretch(1, 1);layout->setColumnStretch(2, 2);
}Widget::~Widget()
{delete ui;
}
使用案例3-设置竖直方向拉伸系数
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");//设置按钮的拉伸状态button1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//创建网格布局管理器QGridLayout* layout = new QGridLayout();layout->addWidget(button1, 0, 0);layout->addWidget(button2, 0, 1);layout->addWidget(button3, 1, 0);layout->addWidget(button4, 1, 1);layout->addWidget(button5, 2, 0);layout->addWidget(button6, 2, 1);//设置到窗口中this->setLayout(layout);//设置垂直的拉伸系数layout->setRowStretch(0, 1);layout->setRowStretch(1, 0);layout->setRowStretch(2, 3);
}Widget::~Widget()
{delete ui;
}

5.表单布局-FormLayout控件 

        该控件相当于是QGridLayout的一个特殊情况，专门用于实现n行两列的一个布局。

细节
  • 当第一列设置为nullptr的时候，就不会显示任何内容了
  • 第一列固定就是一个文本label，第二列是一些按钮、菜单等等内容都可以。
使用案例
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>
#include <QFormLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建表单中的元素QPushButton* button = new QPushButton("提交");QLineEdit* line1 = new QLineEdit();QLineEdit* line2 = new QLineEdit();QLabel* label1 = new QLabel("姓名");QLabel* label2 = new QLabel("电话");//创建表单管理器QFormLayout* layout = new QFormLayout();layout->addRow(label1, line1);layout->addRow(label2, line2);layout->addRow(nullptr, button);this->setLayout(layout);
}Widget::~Widget()
{delete ui;
}

6.Space控件

        他并非是一个布局管理器，但是通常要搭配布局管理器去使用，在使用布局管理器的时候，里面的控件之间的间隔会很近，如果我们想要在控件之间添加一段空白，可以使用QSpaceItem对象来表示。

属性
属性说明
width

宽度

height高度
hData水平方向的sizePolicy
vData竖直方向的sizePolicy
使用案例
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QHBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建两个按钮QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");//创建水平布局管理器QHBoxLayout* layout = new QHBoxLayout();//创建spaceQSpacerItem* space = new QSpacerItem(200, 100);layout->addWidget(button1);layout->addSpacerItem(space);layout->addWidget(button2);this->setLayout(layout);
}Widget::~Widget()
{delete ui;
}


http://www.ppmy.cn/devtools/151488.html

相关文章

【Docker】——安装Docker以及解决常见报错

【Docker】——安装Docker以及解决常见报错

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…
阅读更多...
Web3与加密技术的结合：增强个人隐私保护的未来趋势

Web3与加密技术的结合：增强个人隐私保护的未来趋势

随着互联网的快速发展&#xff0c;个人隐私和数据安全问题越来越受到关注。Web3作为新一代互联网架构&#xff0c;凭借其去中心化的特性&#xff0c;为个人隐私保护提供了全新的解决方案。而加密技术则是Web3的重要组成部分&#xff0c;进一步增强了隐私保护的能力。本文将探讨…
阅读更多...
Java-数据结构-二叉树习题(1)

Java-数据结构-二叉树习题(1)

对于二叉树的学习&#xff0c;主要的还是得多多练习~毕竟二叉树属于新的知识&#xff0c;并且也并不是线性结构&#xff0c;再加上经常使用递归的方法解决二叉树的问题&#xff0c;所以代码的具体流程还是无法看到的&#xff0c;只能通过画图想象&#xff0c;所以还是必须多加练…
阅读更多...
wow-agent---task2使用llama-index创建Agent

wow-agent---task2使用llama-index创建Agent

一&#xff1a;创造俩个函数&#xff0c;multiply和add作为fuction calling被LLM当做工具来使用&#xff0c;实现计算一个简单的计算题&#xff1a; from llama_index.llms.ollama import Ollama from llama_index.core.agent import ReActAgent from llama_index.core.tools …
阅读更多...
阿里云 EMR 发布托管弹性伸缩功能，支持自动调整集群大小，最高降本60%

阿里云 EMR 发布托管弹性伸缩功能，支持自动调整集群大小，最高降本60%

开源大数据平台 E-MapReduce&#xff08;简称“EMR”&#xff09;是云原生开源大数据平台&#xff0c;为客户提供简单易集成的Hadoop、Hive、Spark、StarRocks、Flink、Presto等开源大数据计算和存储引擎。 EMR on ECS是指EMR在ECS上运行的方式。EMR on ECS将EMR的大数据处理功…
阅读更多...
JAVA实现五子棋小游戏(附源码)

JAVA实现五子棋小游戏(附源码)

文章目录 一、设计来源捡金币闯关小游戏讲解1.1 主界面1.2 黑棋胜利界面1.3 白棋胜利界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载更多优质源码分享 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/145161039 JA…
阅读更多...
窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

今天要介绍给大家的是, 当我们在开发高通耳机时如果遇到与手机之间相容性问题, 通常会用Frontline或Ellisys的Bluetooth Analyzer来截取资料分析, 如果手边没有这样的仪器, 要如何窥探Bluetooth的HCI log.这次介绍的是手机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 U…
阅读更多...
【华为路由/交换机的ftp文件操作】

【华为路由/交换机的ftp文件操作】

华为路由/交换机的ftp文件操作 PC&#xff1a;10.0.1.1 R1&#xff1a;10.0.1.254 / 10.0.2.254 FTP&#xff1a;10.0.2.1 S1&#xff1a;无配置 在桌面创建FTP-Huawei文件夹&#xff0c;里面创建config/test.txt。 点击上图中的“启动”按钮。 然后ftp到server&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023