[Qt 教程之Widgets模块] —— QBoxLayout盒模型布局

2023-10-17 23:30

本文主要是介绍[Qt 教程之Widgets模块] —— QBoxLayout盒模型布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Qt系列教程总目录

文章目录

    • 零、布局组件(Layouts)
    • 一、QBoxLayout
    • 二、QBoxLayout布局规则
    • 三、创建QBoxLayout
    • 四、成员函数
      • 1. 布局排列方向
      • 2. 控件间距
      • 3. 添加间隙
      • 4. 可拉伸控件(弹簧)
      • 5. 添加控件

零、布局组件(Layouts)

在这里插入图片描述

控件描述
Vertical Layout垂直布局
Horizontal Layout水平布局
Grid Layout网格布局
Form Layout表单布局

各控件类的继承关系如下:

在这里插入图片描述

一、QBoxLayout

QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayoutQVBoxLayout继承。

QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列。
QVBoxLayout:垂直布局,在垂直方向上排列控件,即:上下排列。

如下图:

在这里插入图片描述

QHBoxLayoutQVBoxLayout都公有继承于QBoxLayout,没有自己的成员函数。

二、QBoxLayout布局规则

详见QBoxLayout布局规则

三、创建QBoxLayout

QBoxLayout只有一个构造函数如下:

explicit QBoxLayout(Direction, QWidget *parent = nullptr);

其中Direction是一个枚举,表示控件布局的方向:

enum Direction 
{ 	LeftToRight, RightToLeft, TopToBottom, BottomToTop,Down = TopToBottom, Up = BottomToTop 
};

枚举描述如下:

枚举描述
QBoxLayout::LeftToRight0水平方向从左到右
QBoxLayout::RightToLeft1水平方向从右到左
QBoxLayout::TopToBottom2垂直方向从上到下
QBoxLayout::BottomToTop3垂直方向从下到上

QHBoxLayoutQVBoxLayout的继承如下:

QHBoxLayout::QHBoxLayout(QWidget *parent) : QBoxLayout(LeftToRight, parent){}
QHBoxLayout::QHBoxLayout() : QBoxLayout(LeftToRight){}QVBoxLayout::QVBoxLayout(QWidget *parent) : QBoxLayout(TopToBottom, parent){}
QVBoxLayout::QVBoxLayout() : QBoxLayout(TopToBottom){}

他们构造的初始方向分别为:水平方向从左到右(QHBoxLayout)与垂直方向从上到下(QVBoxLayout)。

四、成员函数

QBoxLayout的常用函数如下:

1. 布局排列方向

Direction direction() const; // 获取当前排列方向
void setDirection(Direction); // 设置排列方向

QHBoxLayoutQVBoxLayout的构造函数可以看出,他们只是对QBoxLayout设置了不同的排列方向。

对于从QHBoxLayoutQVBoxLayout,还可重新设置排列方向。

在这里插入图片描述

2. 控件间距

void setSpacing(int spacing) override; // 设置控件间距大小
int spacing() const override; // 获取控件当前间距

3. 添加间隙

void addSpacing(int size); // 在控件队列最后面添加一个固定大小的间隙
void insertSpacing(int index, int size); // 在指定位置插入一个固定大小的间隙

4. 可拉伸控件(弹簧)

void addStretch(int stretch = 0); // 在控件队列最后面添加一个弹簧
void insertStretch(int index, int stretch = 0); // 在指定位置插入一个弹簧
// 一下函数不仅用于弹簧,也可用于其他控件
void setStretch(int index, int stretch); // 设置指定位置控件的拉伸系数
int stretch(int index) const; // 获取指定位置的拉伸系数

其中,index需要注意:

  • index从0开始;
  • 弹簧和原有控件分别占用一个index;
  • 插入后弹簧后,插入位置后面的index都会加 1;
  • 由于弹簧也是控件,所以布局的控件间距仍适用于弹簧与其他控件之间;
  • 如下图:
    • 布局(A),没有插入弹簧,三个PushButtonindex以此为0、1、2;
    • 布局(B),在PushButton1PushButton2之间插入一个弹簧,则PushButton2PushButton3index变为了2、3;
    • 布局(C),全部插入弹簧后,index依次变化。

所以手动插入弹簧时要注意index的变化。

在这里插入图片描述

对于拉伸系数stretch,即在sizePolicy的前提下,可拉伸控件按照什么样的比例分配空间,

  • 如果stretch0,该控件只保留自己最小的空间,不参与空间争夺
  • 如果sizePolicyFixed,该控件保持Fixed大小,也不参与空间争夺
  • 如果控件达到了sizePolicy或其他限制的大小,仍无法满足stretch所设置的比例,则控件以限制大小为准,不再按stretch所设置比例拉伸。
  • 如下图,
    • 布局(A),布局空间可以满足控件比例1:2:1PushButton1PushButton2PushButton3的大小分别为98:197:98
    • 布局(B),布局空间不足以满足控件比例1:2:3PushButton1PushButton2的比例明显不满足1:2
    • 如果布局空间不足以满足控件比例,这里还有个规律,就是先剥夺占比小的控件的空间,优先保证占比大的控件的比例。比如布局(B)中,先剥夺PushButton1的空间,不管他是不是满足控件比例,他们的大小分别为97:118:178,可以发现PushButton2PushButton3仍然满足2:3的比例。

在这里插入图片描述

5. 添加控件

// 在控件队列最后面添加一个新控件
// 其中可以指定控件的拉伸系数和对齐方式
void addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = Qt::Alignment());
// 在指定位置插入一个控件
void insertWidget(int index, QWidget *widget, int stretch = 0, Qt::Alignment alignment = Qt::Alignment());

这篇关于[Qt 教程之Widgets模块] —— QBoxLayout盒模型布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/228677

相关文章

python logging模块详解及其日志定时清理方式

《pythonlogging模块详解及其日志定时清理方式》:本文主要介绍pythonlogging模块详解及其日志定时清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录python logging模块及日志定时清理1.创建logger对象2.logging.basicCo

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Qt spdlog日志模块的使用详解

《Qtspdlog日志模块的使用详解》在Qt应用程序开发中,良好的日志系统至关重要,本文将介绍如何使用spdlog1.5.0创建满足以下要求的日志系统,感兴趣的朋友一起看看吧... 目录版本摘要例子logmanager.cpp文件main.cpp文件版本spdlog版本:1.5.0采用1.5.0版本主要

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J