【Qt】控件概述（7）—— 布局管理器

布局管理器

  • 1. 布局管理器
  • 2. QVBoxLayout——垂直布局
  • 3. QHBoxLayout——水平布局
  • 4. QGridLayout——网格布局
  • 5. QFormLayout——表单布局
  • 6. QSpacer

1. 布局管理器

在我们之前值ui界面进行拖拽设置控件时，都是通过手动的控制控件的位置的。同时每个控件的位置都是要计算坐标，最终通过setGeometry或者move方法来进行摆放的，这种设定方式其实并不方便.尤其是界面如果内容比较多的时候,不好计算.而且⼀个窗口大小往往是可以调整的,按照绝对定位的方式,也无法自适应窗口大小，因此Qt引入了布局管理器“LayOut"机制

2. QVBoxLayout——垂直布局

核心属性：

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

代码样例：

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个按钮QPushButton* but1 = new QPushButton("按钮一");QPushButton* but2 = new QPushButton("按钮二");QPushButton* but3 = new QPushButton("按钮三");// 创建布局管理器，并把三个按钮添加到里面QVBoxLayout* layout = new QVBoxLayout();layout->addWidget(but1);layout->addWidget(but2);layout->addWidget(but3);// 将布局管理器不知道widget中this->setLayout(layout);
}

运行程序,可以看到此时界面上的按钮就存在于布局管理器中.随着窗口尺寸变化二发发改变.此时三个按钮的尺寸和位置,都是自动计算出来的.

在这里插入图片描述

通过上述代码的方式,只能给这个widget设定⼀个布局管理器.实际上也可以通过Qt Design在⼀个窗口中创建多个布局管理器.

在这里插入图片描述

但是当我们运行起来的时候，我们会发现当我们改变窗口大小的时候，这个布局管理器的大小并不会发生改变。这其实是因为我们使用Qt Designer创建布局管理器的时候其实实现创建了一个Widget，设置了geometry属性后才把这个layout设置到widget中，二实际上一个widget只能包含一个layout

3. QHBoxLayout——水平布局

二QHBoxLayout其实和QVBoxLayout属性是一致的，用法也是一致的。

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

代码样例1：

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个按钮QPushButton* but1 = new QPushButton("按钮一");QPushButton* but2 = new QPushButton("按钮二");QPushButton* but3 = new QPushButton("按钮三");// 创建布局管理器，并把三个按钮添加到里面QHBoxLayout* layout = new QHBoxLayout();layout->addWidget(but1);layout->addWidget(but2);layout->addWidget(but3);// 将布局管理器不知道widget中this->setLayout(layout);
}

在这里插入图片描述

代码样例2：也可以支持嵌套布局

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* but1 = new QPushButton("but1");QPushButton* but2 = new QPushButton("but2");QVBoxLayout* vlayout = new QVBoxLayout();vlayout->addWidget(but1);vlayout->addWidget(but2);this->setLayout(vlayout);QPushButton* but3 = new QPushButton("but3");QPushButton* but4 = new QPushButton("but4");QHBoxLayout* hlayout = new QHBoxLayout();hlayout->addWidget(but3);hlayout->addWidget(but4);vlayout->addLayout(hlayout);
}

在这里插入图片描述

4. QGridLayout——网格布局

QGridLayout和QVBoxLayout，QHBoxLayout的用法相似，只不过QGridLayout是有行列的。

核心属性：

属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutBottomMargin下方边距
layoutHorizontalSpacing相邻元素之间水平方向的间距
layoutVerticalSpacing相邻元素之间垂直方向的间距
layoutRowStretch行方向的拉伸系数
layoutColumnStretch列方向的拉伸系数

代码样例：

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* but1 = new QPushButton("but1");QPushButton* but2 = new QPushButton("but2");QPushButton* but3 = new QPushButton("but3");QGridLayout* layout = new QGridLayout();layout->addWidget(but1, 0, 0);layout->addWidget(but2, 1, 1);layout->addWidget(but3, 2, 2);this->setLayout(layout);
}

在这里插入图片描述

我们也可以对布局进行设置拉伸系数，也就是按一定的比例进行布局。

代码样例：水平方向设置拉伸系数

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 6 个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");QPushButton* btn4 = new QPushButton("按钮4");QPushButton* btn5 = new QPushButton("按钮5");QPushButton* btn6 = new QPushButton("按钮6");// 创建⽹格布局管理器, 并且添加元素QGridLayout* layout = new QGridLayout();layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 0, 2);layout->addWidget(btn4, 1, 0);layout->addWidget(btn5, 1, 1);layout->addWidget(btn6, 1, 2);// 设置拉伸⽐例// 第 0 列拉伸⽐例设为 1;layout->setColumnStretch(0, 1);// 第 1 列拉伸⽐例设为 0, 即为固定⼤⼩, 不参与拉伸layout->setColumnStretch(1, 0);// 第 2 列拉伸⽐例设为 3, 即为第 2 列的宽度是第 0 列的 3 倍layout->setColumnStretch(2, 3);// 设置 layout 到窗⼝中.this->setLayout(layout);}

在这里插入图片描述
另外,QGridLayout 也提供了setRowStretch 设置行之间的拉伸系数.上述案例中,直接设置setRowStretch 效果不明显,因为每个按钮的高度是固定的.需要把按钮的垂直方向的sizePolicy 属性设置为QSizePolicy::Expanding 尽可能填充满布局管理器,才能看到效果.

使用setSizePolicy 设置按钮的尺寸策略. 可选的值如下:

  • QSizePolicy::Ignored : 忽略控件的尺寸，不对布局产生影响。
  • QSizePolicy::Minimum :控件的最小尺寸为固定值，布局时不会超过该值。
  • QSizePolicy::Maximum :控件的最大尺寸为固定值，布局时不会小于该值。
  • QSizePolicy::Preferred :控件的理想尺寸为固定值，布局时会尽量接近该值。
  • QSizePolicy::Expanding :控件的尺寸可以根据空间调整，尽可能占据更多空间
  • QSizePolicy::Shrinking :控件的尺寸可以根据空间调整，尽可能缩小以适应空间。

代码样例：处置方向上设置拉伸系数

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 6 个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");QPushButton* btn4 = new QPushButton("按钮4");QPushButton* btn5 = new QPushButton("按钮5");QPushButton* btn6 = new QPushButton("按钮6");// 设置按钮的 sizePolicy, 此时按钮的⽔平⽅向和垂直⽅向都会尽量舒展开btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);btn6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 创建⽹格布局管理器, 并且添加元素QGridLayout* layout = new QGridLayout();layout->addWidget(btn1, 0, 0);layout->addWidget(btn2, 0, 1);layout->addWidget(btn3, 1, 0);layout->addWidget(btn4, 1, 1);layout->addWidget(btn5, 2, 0);layout->addWidget(btn6, 2, 1);// 设置拉伸⽐例// 第 0 ⾏拉伸⽐例设为 1;layout->setRowStretch(0, 1);// 第 1 ⾏拉伸⽐例设为 0, 即为固定⼤⼩, 不参与拉伸layout->setRowStretch(1, 0);// 第 2 ⾏拉伸⽐例设为 3, 即为第 2 ⾏的宽度是第 0 ⾏的 3 倍layout->setRowStretch(2, 3);// 设置 layout 到窗⼝中.this->setLayout(layout);
}

在这里插入图片描述

5. QFormLayout——表单布局

QRormLayout表单布局，多用于给手机用户的信息，比如我们在学校里，qq群里会发收集每个人的电话号码的文档，其中这个文档中要输入学号，姓名，和电话，填完之后就可以直接进行提交了。

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 layoutQFormLayout* layout = new QFormLayout();this->setLayout(layout);// 创建三个 labelQLabel* label1 = new QLabel("姓名");QLabel* label2 = new QLabel("学号");QLabel* label3 = new QLabel("电话");// 创建三个 lineEditQLineEdit* lineEdit1 = new QLineEdit();QLineEdit* lineEdit2 = new QLineEdit();QLineEdit* lineEdit3 = new QLineEdit();// 创建⼀个提交按钮QPushButton* btn = new QPushButton("提交");// 把上述元素添加到 layout 中layout->addRow(label1, lineEdit1);layout->addRow(label2, lineEdit2);layout->addRow(label3, lineEdit3);layout->addRow(NULL, btn);
}

在这里插入图片描述

6. QSpacer

上述我们设置的布局中的按钮之间挨着都是比较近的，有的时候我们想要他们之间有些间隔，就可以用到QSapcer

核心属性：

属性说明
width宽度
height高度
hData水平方向的 sizePolicy （QSizePolicy::Ignored : 忽略控件的尺寸，不对布局产⽣影响）（QSizePolicy::Minimum :控件的最小尺寸为固定值，布局时不会超过该值。）（QSizePolicy::Maximum : 控件的最大尺寸为固定值，布局时不会小于该值。 ）（QSizePolicy::Preferred : 控件的理想尺寸为固定值，布局时会尽量接近该值。）（QSizePolicy::Expanding : 控件的尺寸可以根据空间调整，尽可能占据更多空间。）（QSizePolicy::Shrinking : 控件的尺寸可以根据空间调整，尽可能缩小以适应空间。）
vData垂直方向的 sizePolicy 选项同上.
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QHBoxLayout* layout = new QHBoxLayout();this->setLayout(layout);QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");// 创建SpacerQSpacerItem* spacer = new QSpacerItem(200, 20);layout->addWidget(btn1);// 这个是按照添加的顺序来添加的，放在中间说明放在两个按钮的中间layout->addSpacerItem(spacer);layout->addWidget(btn2);
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1556837.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

aws(学习笔记第三课) AWS CloudFormation

aws(学习笔记第三课) AWS CloudFormation

aws(学习笔记第三课) 使用AWS CloudFormation 学习内容： AWS CloudFormation的模板解析使用AWS CloudFormation启动ec2 server 1. AWS CloudFormation 的模版解析 CloudFormation模板结构 CloudFormation是AWS的配置管理工具，属于Infrastructure as Co…
阅读更多...
鸽笼原理与递归 - 离散数学系列（四）

鸽笼原理与递归 - 离散数学系列（四）

目录 1. 鸽笼原理 鸽笼原理的定义 鸽笼原理的示例 鸽笼原理的应用 2. 递归的定义与应用 什么是递归？ 递归的示例 递归与迭代的对比 3. 实际应用 鸽笼原理的实际应用 递归的实际应用 4. 例题与练习 例题1：鸽笼原理应用 例题2：递归…
阅读更多...
Nginx02-安装

Nginx02-安装

零、文章目录 Nginx02-安装 1、Nginx官网 Nginx官网地址：http://nginx.org/ 2、Nginx下载 （1）Nginx下载 下载页地址：http://nginx.org/en/download.html （2）更老版本下载 下载页地址：http…
阅读更多...
模型漫谈：图神经网络（GNN）是什么样的存在

模型漫谈：图神经网络（GNN）是什么样的存在

文章大纲： 从生活中的例子谈图与图神经网络 什么是图神经网络？它如何起源？ 图神经网络的基本原理和原则 图神经网络的应用方向：以环境科学为例 公众号推荐 在现代科技迅速发展的今天，许多看似复杂的概念其实都有…
阅读更多...
【GitHub】上传文件到GitHub

【GitHub】上传文件到GitHub

参考视频：手把手教你在github上传文件_哔哩哔哩_bilibili 1.找到文件夹右键，选择open git bash here 2.完成指令 git initgit add *git commit -m "first commit"3.打开该文件夹，打开隐藏文件.git/config 编辑输入邮箱和GitHub用…
阅读更多...
python全栈学习记录（二十三）反射、内置方法、类相关的函数、元类

python全栈学习记录（二十三）反射、内置方法、类相关的函数、元类

反射、内置方法、类相关的函数、元类 文章目录 反射、内置方法、类相关的函数、元类一、反射二、内置方法1.__str__2.__repr__3.__del__4.__getattr__5.__setattr__ 三、类相关的函数四、元类1.python中类的产生过程2.元类控制类的产生 一、反射 反射的意思是通过字符串来操作…
阅读更多...
国庆day3

国庆day3

阅读更多...
大模型应用探讨，免费AI写作、一键PPT、免费PDF百种应用、与AI对话

大模型应用探讨，免费AI写作、一键PPT、免费PDF百种应用、与AI对话

大模型应用平台知识普及, 应用可见评论区 我们生活在一个充满无限可能的数字时代，人工智能技术正在推动着各种创新的边界。大模型应用平台一般包含以下功能。 ## 1. 一键生成论文 写作是学生、研究人员和职场人士都无法避免的任务。大模型应用平台拥有强大的文本生…
阅读更多...
Lesson3 - 操作系统软件视角和系统调用

Lesson3 - 操作系统软件视角和系统调用

文章目录 硬件支持系统 系统管理硬件异步行为中断的分类 同步行为虚拟地址空间shell系统调用与软中断区分系统调用trace 命令 硬件支持系统 系统管理硬件 计算机硬件由三样东西组成：CPU、内存、I/O设备。为了更有效地管理这些硬件资源，系统设计者引入了…
阅读更多...
使用bert模型进行命名实体识别任务

使用bert模型进行命名实体识别任务

一、实验内容 本实验使用预训练的 BERT 模型进行命名实体识别（NER）任务，并且使用 Hugging Face 的 Transformers 库完成模型的训练、验证和测试。最后，使用测试集评估模型性能，计算NER指标。 二、算法介绍 Bert是一种…
阅读更多...
Observability：使用 OpenTelemetry 自动检测 Go 应用程序

Observability：使用 OpenTelemetry 自动检测 Go 应用程序

作者：来自 Elastic Damien Mathieu 使用 OpenTelemetry 检测 Go 应用程序可以深入了解应用程序的性能、依赖项和错误。我们将向你展示如何使用 Docker 自动检测 Go 应用程序，而无需更改应用程序代码。 在快节奏的软件开发领域，尤其是在云原生…
阅读更多...
分治算法(3)_快速选择_数组中的第K个最大元素

分治算法(3)_快速选择_数组中的第K个最大元素

个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 分治算法(3)_快速排序_数组中的第K个最大元素 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记，欢迎大家在评论区交流讨论&#…
阅读更多...
【原创】Anaconda+VScode+PySide6 完美配置Python开发环境，亲测！

【原创】Anaconda+VScode+PySide6 完美配置Python开发环境，亲测！

准备工作 下载安装 Anaconda 下载安装Visual Studio Code 配置系统环境变量 配置Anaconda环境变量 将Anaconda安装目录及Scripts 、Library\bin 两个子目录添加到用户变量或系统变量的Path变量中。 Anaconda自带最新版Python，如果已经安装Python，建议…
阅读更多...
Mybatis测试案例

Mybatis测试案例

1.创建springboot工程 创建实体类user和接口 user类 注意：java和mysql的对象的属性数据类型要一致 mapper接口 2.配置mybatis(连接数据库信息) # spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver #地址url spring.datasource.urljdbc:mysql://localho…
阅读更多...
【Python】Mistune：高效的 Python Markdown 解析器

【Python】Mistune：高效的 Python Markdown 解析器

Mistune 是一个轻量且强大的 Python Markdown 解析器。它的设计目标是兼顾速度和扩展性，同时兼容 CommonMark 标准。Mistune 支持多种渲染器（Renderers）和插件，能够根据需求将 Markdown 转换为 HTML、LaTeX 或自定义格式。此外&am…
阅读更多...
Java中数组的应用

Java中数组的应用

Java中数组的应用 数组数组的使用使用方式1-动态初始化数组的定义：数组的引用（使用/访问/获取数组元素）：快速入门案例 使用方式2-动态初始化**先声明**数组**再创建**数组使用方式1和2的比较 使用方式3-静态初始化初始化数组快速入…
阅读更多...
[嵌入式Linux]—STM32MP1启动流程

[嵌入式Linux]—STM32MP1启动流程

STM32MP1启动流程 1.启动模式 STM32MP1等SOC支持从多种设备中启动，如EMMC、SD、NAND、NOR、USB、UART等。其中USB、UART是作为烧录进行启动的。 STM32MP1内部ROM中存储有一段出厂代码来进行判断从哪种设备中启动，上电后这段代码会被执行，这…
阅读更多...
CPU中的寄存器是什么以及它的工作原理是什么？

CPU中的寄存器是什么以及它的工作原理是什么？

在计算机科学中，寄存器是数字设备中的一个重要组成部分，它用于存储数据和指令以快速处理。寄存器充当临时存储区，信息可以在这里被快速访问和操作，以执行复杂任务。寄存器是计算机中最基础的存储类型，它们在帮助机器高…
阅读更多...
【Unity】版本不一致且未升级资产，导致 Unity Sprite 2D 动画播放错误

【Unity】版本不一致且未升级资产，导致 Unity Sprite 2D 动画播放错误

自己的 Unity版本是 2022.3.45f1。目前折腾的这插件 2D Action RPG Engine: Mythril2D ，推荐使用的 Unity 版本是 2021.3.18。 倒腾了这个 unity animation 动画半天，发现这个 animation sprite resolver 在导入动画帧的时候，一直都导入的是…
阅读更多...
allegro 替换过孔

allegro 替换过孔

操作步骤如下 1.选择操作对象（需要替换的过孔），右键–>Repace……–>Selected…… 2.在弹出的窗口中选择最终需要的过孔既可以
阅读更多...
最新文章

Copyright @ 2022~2023