【Qt】如何优雅的进行界面布局

文章目录

  • 1 :peach:写在前面:peach:
  • 2 :peach:垂直布局:peach:
  • 3 :peach:水平布局:peach:
  • 4 :peach:网格布局:peach:
  • 5 :peach:表单布局:peach:

1 🍑写在前面🍑

之前使⽤ Qt 在界⾯上创建的控件, 都是通过 “绝对定位” 的⽅式来设定的。也就是每个控件所在的位置, 都需要计算坐标, 最终通过 setGeometry 或者 move ⽅式摆放过去。

这种设定⽅式其实并不⽅便，尤其是界⾯如果内容⽐较多, 不好计算。⽽且⼀个窗⼝⼤⼩往往是可以调整的, 按照绝对定位的⽅式, 也⽆法⾃适应窗⼝⼤⼩。因此 Qt 引⼊ 布局管理器 (Layout) 机制, 来解决上述问题。

2 🍑垂直布局🍑

使⽤ QVBoxLayout 表⽰垂直的布局管理器，V 是 vertical 的缩写。

核⼼属性：

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

Layout 只是⽤于界⾯布局, 并没有提供信号。

代码示例：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");

    // 创建布局管理器, 并且把按钮添加进去
    // 如果创建的时候指定⽗元素为 this, 则后⾯不需要 setLayout ⽅法
    QVBoxLayout* layout = new QVBoxLayout();
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    layout->addWidget(btn3);

    // 把布局管理器设置到 widget 中
    this->setLayout(layout);
}

验证结果：
在这里插入图片描述
使用代码的方式时我们拖拽窗口时，按钮的位置也会随着窗口的调整而改变。

我们还可以使用图形化界面的方式来进行垂直布局：
在这里插入图片描述
但是注意使用图形化界面的方式时我们拖拽窗口，按钮的位置不会随着窗口的调整而改变。

3 🍑水平布局🍑

使⽤ QHBoxLayout 表⽰垂直的布局管理器，H 是 horizontal 的缩写。

核⼼属性 (和 QVBoxLayout 属性是⼀致的)

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

代码⽰例:

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    // 创建布局管理器
    QHBoxLayout* layout = new QHBoxLayout();
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    layout->addWidget(btn3);
    // 设置 layout 到 widget 上
    this->setLayout(layout);
}

结果验证：
在这里插入图片描述

同理我们也可以使用图形化界面的方式来创建水平布局。这里就不再演示了。

4 🍑网格布局🍑

Qt 中还提供了 QGridLayout ⽤来实现⽹格布局的效果，可以达到 M * N 的这种⽹格的效果。

核⼼属性：整体和 QVBoxLayout 以及 QHBoxLayout 相似，但是设置 spacing 的时候是按照垂直⽔平两个⽅向来设置的。

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

代码⽰例:

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建 4 个按钮
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");

    // 创建⽹格布局管理器, 并且添加元素
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(btn1, 0, 0);
    layout->addWidget(btn2, 0, 2);
    layout->addWidget(btn3, 1, 1);
    layout->addWidget(btn4, 1, 3);

    // 设置 layout 到窗⼝中.
    this->setLayout(layout);
}

结果验证：
在这里插入图片描述
我们再来看看使用下面的代码会出现什么情况：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建 4 个按钮
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");

    // 创建⽹格布局管理器, 并且添加元素
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(btn1, 0, 0);
    layout->addWidget(btn2, 1, 0);
    layout->addWidget(btn3, 2, 0);
    layout->addWidget(btn4, 5, 0);

    // 设置 layout 到窗⼝中.
    this->setLayout(layout);
}

结果验证：
在这里插入图片描述
此处也要注意, 设置⾏和列的时候, 如果设置的是⼀个很⼤的值, 但是这个值和上⼀个值之间并没有其他的元素, 那么并不会在中间腾出额外的空间。

代码⽰例: 设置 QGridLayout 中元素的⼤⼩⽐例

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的话为默认大小
    // 第 0 列拉伸⽐例设为 3;
    layout->setColumnStretch(0, 3);
    // 第 1 列拉伸⽐例设为 2,
    layout->setColumnStretch(1, 2);
    // 第 2 列拉伸⽐例设为 1
    layout->setColumnStretch(2, 1);

    // 设置 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::Preferred, QSizePolicy::Expanding);
    btn2->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Expanding);
    btn3->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Expanding);
    btn4->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Expanding);
    btn5->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Expanding);
    btn6->setSizePolicy(QSizePolicy::Preferred, 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 ⾏拉伸⽐例设为 2, 即为第 2 ⾏的宽度是第 0 ⾏的 2 倍
    layout->setRowStretch(2, 2);
    // 设置 layout 到窗⼝中.
    this->setLayout(layout);
}

结果验证：
在这里插入图片描述

5 🍑表单布局🍑

除了上述的布局管理器之外, Qt 还提供了 QFormLayout , 属于是 QGridLayout 的特殊情况, 专⻔⽤于实现两列表单的布局。这种表单布局多⽤于让⽤⼾填写信息的场景，左侧列为提⽰, 右侧列为输⼊框。

代码示例：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建 layout
    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);
    // 创建三个 label
    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("年龄");
    QLabel* label3 = new QLabel("电话");
    // 创建三个 lineEdit
    QLineEdit* 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);

}

结果验证：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数字信号处理：matlab解差分方程

数字信号处理：matlab解差分方程

1. 验证全响应 %验证全响应零状态响应零输入响应 %y(n)4y(n-1)x(n),其中x(n)δ(n),y(-1)2.clc;%清屏 clear all;%清除所有变量的值 b[1]; a[1,-4]; ys[2]; xs[0];%没有初始值，就是0 xn[1, zeros(1,4)];%输入序列，假设长度是5，则输出长度也是…
阅读更多...
WDW-100G 高温拉力试验机 技术方案书

WDW-100G 高温拉力试验机 技术方案书

一、整机外观图： 二、项目简介： 微机控制高温拉力试验机是电子技术与机械传动相结合的新型材料试验机，它具有宽广准确的加载速度和测力范围，对载荷、变形、位移的测量和控制有较高的精度和灵敏度，还可以进行等速加载、…
阅读更多...
sharded jedis pipelined 执行后 数据并未存入redis

sharded jedis pipelined 执行后 数据并未存入redis

前言 因为历史原因，在某个同步菜单操作的方法中先清除缓存，然后在初始化缓存。本来很正常的逻辑，但是这个清除是db查询获取所有的菜单 然后循环一条条删除 然后在db查询有效的菜单操作 在循环一条条插进去 经统计这个菜单操作大概有个7千个 …
阅读更多...
【区块链】fisco网络运维之添加节点黑名单

【区块链】fisco网络运维之添加节点黑名单

基于已完成的区块链系统与管理平台搭建工作，开展区块链节点的黑名单工作，具体操作如下 以node3为例子 1查看node0节点的连接状态日志（现有4个节点连接） 注意：如果查询不到连接状态，修改node0的配置文件中…
阅读更多...
QT5.15.2及以上版本安装

QT5.15.2及以上版本安装

更新时间：2024-05-20 安装qt5.15以上版本 系统：ubuntu20.04.06 本文安装：linux-5.15.2 下载安装 # 安装编译套件g sudo apt-get install build-essential #安装OpenGL sudo apt-get install libgl1-mesa-dev# 下载qt安装器 https://downl…
阅读更多...
每天五分钟深度学习框架PyTorch：创建具有特殊值的tensor张量

每天五分钟深度学习框架PyTorch：创建具有特殊值的tensor张量

本文重点 tensor张量是一个多维数组，本节课程我们将学习一些pytorch中已经封装好的方法，使用这些方法我们可以快速创建出具有特殊意义的tensor张量。 创建一个值为空的张量 import torch import numpy as np a=torch.empty(1) print(a) print(a.dim()) print(s.shape) 如图…
阅读更多...
supOS NEO科技普惠！永久免费！亿元补贴

supOS NEO科技普惠！永久免费！亿元补贴

数字化转型正在全球蓬勃发展，工业操作系统进入大规模推广期！ 如果您正在被预算不足、技术团队不强、数字化投入产出比等问题困扰，supOS NEO是您最好的选择。 “让supOS走进万千工厂、千行百业！让全世界每个工厂都能用得上supOS&am…
阅读更多...
.net core web项目部署IIS报错：HTTP 错误 413.1 - Request Entity Too Large

.net core web项目部署IIS报错：HTTP 错误 413.1 - Request Entity Too Large

HTTP 错误 413.1 - Request Entity Too Large 解决办法 这个报错的原因是因为IIS配置问题，IIS最大默认配置只有30M，超过30M就会报错 解决办法 在程序中配置能接收最大字节大小 //配置请求头中能最大接收多少数据 //builder.WebHost.UseKestrel(option…
阅读更多...
VS2022通过C++网络库Boost.asio搭建一个简单TCP异步服务器和客户端

VS2022通过C++网络库Boost.asio搭建一个简单TCP异步服务器和客户端

基本介绍 上一篇博客我们介绍了通过Boost.asio搭建一个TCP同步服务器和客户端，这次我们再通过asio搭建一个异步通信的服务器和客户端系统，由于这是一个简单异步服务器，所以我们的异步特指异步服务器而不是异步客户端，同步服务器在…
阅读更多...
c语言：利用随机函数产生20个[120, 834] 之间互不相等的随机数， 并利用选择排序法将其从小到大排序后输出（每行输出5个）

c语言：利用随机函数产生20个[120, 834] 之间互不相等的随机数， 并利用选择排序法将其从小到大排序后输出（每行输出5个）

利用随机函数产生20个[120, 834] 之间互不相等的随机数&#xff0c; 并利用选择排序法将其从小到大排序后输出&#xff08;每行输出5个&#xff09; 代码如下&#xff1a; #include <stdio.h> #include <time.h> #include <stdlib.h> int shenchen(int a[…
阅读更多...
全栈实现发送验证码注册账号 全栈开发之路——全栈篇（3）

全栈实现发送验证码注册账号 全栈开发之路——全栈篇（3）

全栈开发一条龙——前端篇 第一篇&#xff1a;框架确定、ide设置与项目创建 第二篇&#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇&#xff1a;setup语法&#xff0c;设置响应式数据。 第四篇&#xff1a;数据绑定、计算属性和watch监视 第五篇 : 组件…
阅读更多...
分布式音乐播放器适配了Stage模型

分布式音乐播放器适配了Stage模型

OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;应用开发自API 8及其更早版本一直使用的是FA模型进行开发。FA模型是Feature Ability的缩写&#xff0c;它和PA&#xff08;Particle Ability&#xff09;两种类型是过往长期推广的术语&#xff0c;深入人心…
阅读更多...
6.2 else if语句

6.2 else if语句

本节必须掌握的知识点&#xff1a; 示例代码二十 代码分析 汇编解析 ■if语句表达形式3 if(表达式1) statement1 else if(表达式2) statement2 else if(表达式3) statement3 …… else statementN 解析&#xff1a; 如果表达式1非0&#xff0c;则执行statement1&#…
阅读更多...
Java基础22（JSON解析 注解）

Java基础22（JSON解析 注解）

目录 一、JSON解析 1. JSON语法 2. JSON的用途 3. Java解析JSON 4. 使用Fastjson 4.1 Fastjson 的优点 4.2 Fastjson 导包 4.3 Fastjson的主要对象 4.4 常用方法 将Java对象 "序列化"&#xff08;转换&#xff09; 为JSON字符串&#xff1a; 将JSON字符串…
阅读更多...
go语言中的一个特别的语法 //go:embed 可将将静态文件内容读取到string, []byte和 embed.FS 变量并直接打包到exe包中

go语言中的一个特别的语法 //go:embed 可将将静态文件内容读取到string, []byte和 embed.FS 变量并直接打包到exe包中

go语言中的一个特别的语法 //go:embed 看上去像是注释&#xff0c;实则是golang中的一个内置的语法&#xff0c;而且是仅在你的go代码编译时生效的语法&#xff0c; 借助他我们可以将我们的静态资源文件读取到FS直接打包到我们的exe执行文件中。 同时他还支持文件的模式匹配…
阅读更多...
C#中BufferedStream类详解与示例

C#中BufferedStream类详解与示例

文章目录 1. BufferedStream的基本介绍2. 创建BufferedStream对象从现有Stream创建指定缓冲区大小 3. 使用BufferedStream读取数据写入数据 4. BufferedStream的注意事项5. 示例代码 在C#中&#xff0c;BufferedStream是一个非常有用的流类&#xff0c;它提供了缓冲功能&#x…
阅读更多...
出谈论点云文件pcd加载01

出谈论点云文件pcd加载01

刚写完基于potree开发地图水印效果的时候&#xff0c;在网上分享实例&#xff0c;刚发出去&#xff0c;竟然被人喷了&#xff0c;这么简单的实例&#xff0c;竟然好意思发群里&#xff0c;哎… 好无奈&#xff01; 不过我还是坚持我的想法&#xff0c;大家看到文章后&#xff0…
阅读更多...
JVM严镇涛版笔记【B站面试题】

JVM严镇涛版笔记【B站面试题】

前言 2023-06-19 18:49:33 出自B站 灰灰的Java面试 枫叶云链接&#xff1a;http://cloud.fynote.com/s/4976 JVM面试题大全 Lecturer &#xff1a;严镇涛 1.为什么需要JVM&#xff0c;不要JVM可以吗&#xff1f; 1.JVM可以帮助我们屏蔽底层的操作系统 一次编译&#xff0c…
阅读更多...
Windows安全应急--应急排查的一些方法

Windows安全应急--应急排查的一些方法

前言&#xff1a; 非法BC植入网站安全应急&#xff0c; 在安全应急中&#xff0c; 总会需要大大小小的问题&#xff0c; 就像成长一样。 检测工具尽量使用轻量级的。。 本次演示环境 Windows Server 2008 问题排查步骤&#xff1a; 先判断服务器有没有被Rootkit 查看登录…
阅读更多...
[STM32-HAL库]Flash库-HAL库-复杂数据读写-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C6T6

[STM32-HAL库]Flash库-HAL库-复杂数据读写-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C6T6

目录 一、前言 二、实现步骤 1.STM32CUBEMX配置 2.导入Flash库 3.分析地址范围 4.找到可用的地址 5.写入读取普通数据 6.写入读取字符串 6.1 存储相关信息 6.2 存取多个参数 三、总结及源码 一、前言 在面对需要持久化存储的数据时&#xff0c;除了挂载TF卡&#xff0c;我们…
阅读更多...
最新文章

Copyright @ 2022~2023