使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第九讲)

这一期讲解GUI_guider中的容器控件的使用以及相关函数，容器本质上是具有布局和自动调整大小功能的基本对象 ，通常用来装载其他子控件。
打开上一期的项目，在工具栏中选中容器控件拖拽到界面中，具体如图所示：
在这里插入图片描述
容器默认是浮于其他控件上，我们右键容器控件选择“置底”，然后改变容器位置为（75，56），大小为（329，400），圆角半径为30，具体如图所示：
在这里插入图片描述
以下是界面的相关代码：
//Write codes screen_2_cont_1
//创建容器控件
ui->screen_2_cont_1 = lv_obj_create(ui->screen_2);
//设置位置以及大小
lv_obj_set_pos(ui->screen_2_cont_1, 75, 56);
lv_obj_set_size(ui->screen_2_cont_1, 329, 400);
//禁用容器滚动条
lv_obj_set_scrollbar_mode(ui->screen_2_cont_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_2_cont_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置边框宽度
lv_obj_set_style_border_width(ui->screen_2_cont_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框透明度
lv_obj_set_style_border_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框颜色
lv_obj_set_style_border_color(ui->screen_2_cont_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框显示方式
lv_obj_set_style_border_side(ui->screen_2_cont_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_2_cont_1, 30, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景颜色
lv_obj_set_style_bg_color(ui->screen_2_cont_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景渐变方向
lv_obj_set_style_bg_grad_dir(ui->screen_2_cont_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置内边距（顶部、底部、左侧、右侧）
lv_obj_set_style_pad_top(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影宽度
lv_obj_set_style_shadow_width(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
 
容器控件布局方式的API
lv_cont_set_layout(lv_obj_t * cont, lv_layout_t layout)；其中第二个参数指的是容器的布局方式。

  1. LV_LAYOUT_OFF = 0
    无布局：没有指定布局，意味着对象的位置和大小由开发者手动设置，LVGL 不会自动调整。
  2. LV_LAYOUT_CENTER
    居中布局：将对象放置在容器的中心位置。
  3. LV_LAYOUT_COL_L
    列左对齐：将对象垂直排列在列中，并将所有对象左对齐。
  4. LV_LAYOUT_COL_M
    列中对齐：将对象垂直排列在列中，并将所有对象在列中居中对齐。
  5. LV_LAYOUT_COL_R
    列右对齐：将对象垂直排列在列中，并将所有对象右对齐。
  6. LV_LAYOUT_ROW_T
    行顶部对齐：将对象水平排列在一行中，并将所有对象顶部对齐。
  7. LV_LAYOUT_ROW_M
    行中部对齐：将对象水平排列在一行中，并将所有对象在行中居中对齐。
  8. LV_LAYOUT_ROW_B
    行底部对齐：将对象水平排列在一行中，并将所有对象底部对齐。
  9. LV_LAYOUT_PRETTY
    美观布局：尽可能将对象排列在一行中，直到空间不够时自动换行。
  10. LV_LAYOUT_GRID
    网格布局：将同样大小的对象排列成一个网格布局。
  11. LV_LAYOUT_NUM
    布局类型的数量：表示布局类型的总数（这个常量通常用于表示布局枚举的数量）。

容器自适应的API
函数有三个分别为：（1）lv_cont_set_fit4(lv_obj_t * cont, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom)
（2）static inline void lv_cont_set_fit2(lv_obj_t * cont, lv_fit_t hor, lv_fit_t ver)
（3）static inline void lv_cont_set_fit(lv_obj_t * cont, lv_fit_t fit)
以上函数的作用都是设定容器的自适应方式，第一个设定四个方向的自适应方式，第二个是设定水平和垂直方向上的自适应方式，第三个是将四个方向的自适应方式统一设定。
以下是lv_fit_t的定义：

  1. LV_FIT_NONE
    不自动调整大小：此选项表示对象的大小不会自动调整，而是保持开发者手动设置的大小，不受父容器或子对象的影响。
  2. LV_FIT_TIGHT
    紧缩包裹子对象：对象的大小会自动调整为刚好包裹其所有子对象的大小，即对象的尺寸会紧密贴合子对象，避免任何空隙。
  3. LV_FIT_FLOOD
    填充到父容器的边缘：对象的大小会自动调整，使其填满父容器的空间。这意味着对象的大小会与父容器的尺寸一致。
  4. LV_FIT_FILL
    填充父容器的边缘，但如果有子对象超出父容器范围，则会增大对象大小：这个选项首先会让对象填满父容器的边缘。如果对象内有子对象超出父容器的边界，容器会自动增大，直到所有子对象都能完全显示为止。
  5. _LV_FIT_NUM
    适配类型数量：表示适配类型的总数，通常用于定义适配类型的枚举数量。
    注：具体请参照对应版本的官方手册。

这些适配类型控制了对象如何根据其父容器和子对象的情况调整大小。不同的适配类型可以满足不同布局和排版需求，让开发者更灵活地管理对象的尺寸和显示效果，下一期将讲解登录按键以及ok的回调逻辑。

本文章由威三学社出品
对课程感兴趣可以私信联系

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

qt QGroupButton 实现两个QPushButton的互斥

qt QGroupButton 实现两个QPushButton的互斥

import sys from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QButtonGroup, QVBoxLayoutclass ExampleApp(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):# 创建两个 QPushButtonself.button1 QPushButton("按钮1&quo…
阅读更多...
工业物联网的可视化编程革新：Node-RED与边缘计算的深度融合-纵横智控

工业物联网的可视化编程革新：Node-RED与边缘计算的深度融合-纵横智控

在工业物联网的演进历程中，可视化编程工具正成为打破技术壁垒的核心力量。Node-RED作为开源的可视化编程平台，通过其独特的拖拽式逻辑构建能力，为设备连接、数据处理与业务逻辑设计提供了全新范式。本文将深入解析Node-RED的技术优势&#xf…
阅读更多...
Uniapp：view容器(容器布局)

Uniapp：view容器(容器布局)

目录 一、基本概述二、属性说明三、常用布局3.1 横向布局3.2 纵向布局3.3 更多布局3.3.1 纵向布局-自动宽度3.3.2 纵向布局-固定宽度3.3.3 横向布局-自动宽度3.3.4 横向布局-居中3.3.5 横向布局-居右3.3.6 横向布局-平均分布3.3.7 横向布局-两端对齐3.3.8 横向布局-自动填充3.3…
阅读更多...
（最新）华为 2026 届校招实习-硬件技术工程师-硬件通用/单板开发—机试题—(共14套)（每套四十题）

（最新）华为 2026 届校招实习-硬件技术工程师-硬件通用/单板开发—机试题—(共14套)（每套四十题）

（最新）华为 2026 届校招实习-硬件技术工程师-硬件通用/单板开发—机试题—（共14套）（每套四十题） 本套题目为硬件通用题目，适合多个岗位方向，如下 **岗位——硬件技术工程师 岗位意向…
阅读更多...
AWS Lambda 架构深入探究

AWS Lambda 架构深入探究

AWS Lambda 是现代云架构中最受欢迎的服务之一，因其能够在完全托管的无服务器环境中运行代码而广受认可。然而，尽管 Lambda 广受欢迎，许多开发者和架构师对它的底层运作机制却知之甚少，常常将其视为“编写能够在云端神奇运行的代码”的简单方法。 本文将探讨 AWS Lambda 背…
阅读更多...
Android audio系统五 AudioPolicy 策略配置详解

Android audio系统五 AudioPolicy 策略配置详解

引用：Android 音频策略配置文件解析流程 audio_policy_configuration.xml 是 Android 音频系统的核心配置文件，它定义了音频硬件接口、设备路由和基本策略。下面我将详细介绍这个文件的结构、关键配置项和实际应用。audio_policy_configuration.xml 是 …
阅读更多...
4.21日学习--引用

4.21日学习--引用

引用本质：引用的本质在 c 内部实现是一个指针常量。 代码中 int& ref a; 可以理解为 int* const ref &a;（指针常量）。 指针常量：指针指向不可变（绑定 a 后，不能再指向其他变量）&…
阅读更多...
2.1 数据处理

2.1 数据处理

1. 数据获取方法 掌握公开数据集的使用、数据质量评估指标、了解常见的网络爬虫技术 🧩 一、公开数据集的使用 ✅ 常见平台（一定要熟） 平台简介示例数据集Hugging Face Datasets专注 NLP、CV 领域的大模型训练数据集库IMDB、SQuAD、Common …
阅读更多...
Qt QWidget和QML实现窗口拖动源码分享

Qt QWidget和QML实现窗口拖动源码分享

一、QWidget实现窗口拖动 .hpp QPoint pressedPoint; bool leftBtnPressed false;.cpp bool PetWidget::eventFilter(QObject *obj, QEvent *event) {if(obj this){if(event->type() QEvent::MouseButtonPress){QMouseEvent* e static_cast<QMouseEvent *>(event)…
阅读更多...
在pycharm中搭建yolo11分类检测系统--PyQt5学习（二）

在pycharm中搭建yolo11分类检测系统--PyQt5学习（二）

第二部分 测试本地pycharm通过程序连接远程服务器autodl 模型的推理需要借助远程服务器autodl&#xff0c;但是界面的运行是在pycharm中&#xff0c;我的设想是按钮调用一个py文件就好了。 1. 本地运行PyQt5界面。 2. 当需要载入权重时&#xff0c;通过SSH连接到AutodL服务…
阅读更多...
前端框架的“快闪“时代：我们该如何应对技术迭代的洪流？

前端框架的“快闪“时代：我们该如何应对技术迭代的洪流？

引言&#xff1a;前端开发者的"框架疲劳" “上周刚学完Vue 3的组合式API&#xff0c;这周SolidJS又火了&#xff1f;”——这恐怕是许多前端开发者2023年的真实心声。前端框架的迭代速度已经达到了令人目眩的程度&#xff0c;GitHub每日都有新框架诞生&#xff0c;n…
阅读更多...
基于YOLO11的遛狗牵绳识别预警系统

基于YOLO11的遛狗牵绳识别预警系统

基于YOLO11的遛狗牵绳识别预警系统 【包含内容】 【一】项目提供完整源代码及详细注释 【二】系统设计思路与实现说明 【三】预训练模型与数据集说明 【四】需要列出所有的类别&#xff0c;并且加入识别的类别数量&#xff1a;4类 0: dog (狗) 1: leash (牵引绳) 2: person …
阅读更多...
Spring MVC 一个简单的多文件上传

Spring MVC 一个简单的多文件上传

原始代码逐行解释 PostMapping("/uploads") // ① 声明处理POST请求&#xff0c;路径为"/uploads" ResponseBody // ② 直接返回数据到响应体&#xff0c;不进行视图解析 public String uploads(MultipartFile[] files, // …
阅读更多...
C++继承（最详细）

C++继承（最详细）

目录 1.继承的概念以及定义 1.1 继承的概念 1.2 继承的定义 ​编辑 2.继承中的作用域 3.基类和派生类间的转换 4.派生类的默认成员函数 5.实现不被继承的类 6.継承与友元 ​编辑 7.继承与静态成员 8.多继承及其菱形继承问题 8.2 虚继承 8.3 来看一个小题 9.继承…
阅读更多...
day35图像处理OpenCV

day35图像处理OpenCV

文章目录 一、图像预处理17 直方图均衡化17.1绘制直方图17.2直方图均衡化1. 自适应直方图均衡化2. 对比度受限的自适应直方图均衡化3. 示例 19 模板匹配 一、图像预处理 17 直方图均衡化 直方图&#xff1a;反映图像像素分布的统计图&#xff0c;横坐标就是图像像素的取值&…
阅读更多...
【音视频】FFmpeg内存模型

【音视频】FFmpeg内存模型

FFmpeg内存模型 从现有的Packet拷贝一个新Packet的时候&#xff0c;有两种情况&#xff1a; 两个Packet的buf引用的是同一数据缓存空间&#xff0c;这时候要注意数据缓存空间的释放问题&#xff1b;两个Packet的buf引用不同的数据缓存空间&#xff0c;每个Packet都有数据缓存…
阅读更多...
1.2软考系统架构设计师：系统架构的定义与作用 - 练习题附答案及超详细解析

1.2软考系统架构设计师：系统架构的定义与作用 - 练习题附答案及超详细解析

系统架构定义与作用综合知识单选题 题目覆盖核心概念、发展历程、设计原则、评估标准及易混淆点&#xff0c;附答案解析&#xff1a; 1. 系统架构的标准定义源自于以下哪个标准&#xff1f; A. ISO/IEC 9126 B. IEEE 1471-2000 C. TOGAF 9.2 D. ITIL v4 答案&#xff1a;B 简…
阅读更多...
go语言对http协议的支持

go语言对http协议的支持

http&#xff1a;无状态协议&#xff0c;是互联网中使用http使用http实现计算机和计算机之间的请求和响应 使用纯文本方式发送和接受协议数据&#xff0c;不需要借助专门工具进行分析就知道协议中的数据 服务器端的几个概念 Request&#xff1a;用户请求的信息&#xff0c;用…
阅读更多...
iscsi服务端安装及配置

iscsi服务端安装及配置

1. 安装targetcli软件包 yum install -y targetcli 2. 启动target服务 systemctl start target systemctl enable target 3. 配置防火墙 firewall-cmd --add-port"3260/tcp" 3. 准备一个物理分区&#xff08;或者逻辑分区&#xff09;…
阅读更多...
解决 MongoDB 查询中的 `InvalidMongoDbApiUsageException` 错误

解决 MongoDB 查询中的 `InvalidMongoDbApiUsageException` 错误

您在使用 Spring Data MongoDB 时遇到了 InvalidMongoDbApiUsageException 异常&#xff0c;错误信息如下&#xff1a; “由于 com.mongodb.BasicDocument 的限制&#xff0c;您无法添加第二个 ‘null’ 条件。查询已经包含 ‘{ “KaTeX parse error: Expected }, got EOF at e…
阅读更多...
最新文章

Copyright @ 2022~2023