【全csdn最前沿LVGL9】基础对象lv_obj

文章目录

  • 前言
  • 一、LVGL9的下载
  • 二、基础对象lv_obj
    • 2.1 概述
    • 2.2 布局
    • 2.3 lv_obj的使用
      • 创建一个lv_obj
      • 设置大小
      • 设置位置
      • 设置对齐
      • 父对象与子对象
      • 事件
  • 总结


前言

LVGL(LittlevGL)是一个开源的嵌入式图形库,用于在嵌入式系统中创建用户界面。LVGL提供了一系列丰富而灵活的功能,使得开发者能够轻松创建漂亮、交互性强的用户界面。其中,lv_obj是LVGL中的基础对象,为整个图形库的构建提供了坚实的基础。

本文将深入探讨LVGL的基础对象lv_obj,解释其在嵌入式界面开发中的关键作用。我们将介绍lv_obj的基本概念、用法和一些常见的应用场景,以帮助开发者更好地理解和利用LVGL进行嵌入式图形界面开发。


一、LVGL9的下载

这里我们使用百问网提供的CodeBlocks提供给我们的lvgl模拟器
百问网团队已经将LVGL windows模拟器(CodeBlocks)已更新到V9.0.0版本,支持更多特性!
视频效果: 视频效果
项目获取地址: 获取地址

对于LVGL9的文档:文档地址里面为英文文档

二、基础对象lv_obj

2.1 概述

基础要素定义:'基础对象’的属性

坐标: 定义屏幕上的位置,这些坐标决定了小部件的显示位置。
父对象: 建立了一个层次结构,父对象表示对象树中的直接上级。
子对象: 采用嵌套结构,'基础对象’可以包含其他对象作为其子对象,形成有序的组织结构。
样式: 在美学领域发挥着关键作用,'基础对象’包含了这些样式,允许开发人员定制小部件的外观。
属性,如 Clickable、Scrollable 等。
面向对象范式中的继承

在面向对象编程的精神中,“基础对象”扮演了基类的角色。LVGL中的所有其他对象都继承自这个基础类,从而实现了一种系统化和一致的对象设计方法。
灵活多变的功能:超越基础功能

“基础对象”的力量不仅仅限于其基本属性。其函数和功能不仅仅局限于自身;它们可以与其他小部件一起使用。一个具体的例子是使用lv_obj_set_width(slider, 100),展示了“基础对象”的方法的多功能性。
独立简洁:基础对象作为小部件

有趣的是,“基础对象”不仅仅是幕后的设计师,还可以独立成为一个小部件。在其最简单的形式中,它表现为一个矩形。类比HTML,将其想象成一个<div>——在Web开发中的基本容器。
总体而言,“基础对象”是LVGL的关键组成部分,指挥着屏幕上小部件的交响曲。它提供了一个统一的基础,确保设计界面的一致性、多功能性,并能够创建复杂的图形界面。无论是作为继承的基石还是作为小部件的焦点,基础对象都体现了LVGL设计哲学中简单和强大的本质。

2.2 布局

Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS.
LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments).

在官网可以看到这些,这表示:与LVGL的许多其他部分类似,设置坐标的概念受到了CSS的启发。LVGL并没有完全实现CSS,但实现了一个可比较的子集(有时进行了轻微的调整)。这意味着LVGL借鉴了CSS的思想来设置对象的坐标,但并非完全按照CSS的规范实现,而是实现了一个相似的子集,有时进行了一些小的调整。

明确定义的坐标信息被存储在样式中(包括大小、位置、布局等)。
支持设置最小宽度、最大宽度、最小高度和最大高度。
支持像素、百分比和“content”单位。
对于上面这个单位:
像素(pixel):简单地说,就是以像素为单位的位置。整数始终表示像素。例如,lv_obj_set_x(btn, 10) 表示将按钮的横坐标设置为10个像素。
百分比(percentage):表示对象大小相对于其父对象或父容器的百分比(取决于具体属性)。lv_pct(value) 将一个值转换为百分比。例如,lv_obj_set_width(btn, lv_pct(50)) 表示将按钮的宽度设置为父容器宽度的50%。
LV_SIZE_CONTENT:这是一个特殊的值,用于将对象的宽度/高度设置为包含所有子元素的尺寸。类似于CSS中的概念。例如,lv_obj_set_width(btn, LV_SIZE_CONTENT).auto 表示将按钮的宽度调整为包含所有子元素,并自动适应内容的大小。
简单来说:这意味着 LV_SIZE_CONTENT 会根据子元素的大小自动调整父元素的尺寸,确保容纳所有内容。就像在 CSS 中使用 auto 可以让元素自动适应其内容一样,使用 LV_SIZE_CONTENT 也能够让 LVGL 的对象自动调整大小,以包含其内部的所有子元素。

当x=0,y=0时,坐标表示相对于父元素的左上角,加上左/上内边距和边框宽度。
宽度/高度表示整体尺寸,而“content area”(内容区域)会考虑内边距和边框宽度,因此实际内容区域较小。
提供对Flexbox和Grid布局的支持,但仅实现了它们的子集功能。

2.3 lv_obj的使用

创建一个lv_obj

首先我们需要知道一个类型:lv_obj_t,如果我们想创建之后拿到这个部件我们就需要使用这个类型来存储
创建lv_obj形式:

lv_obj_t *obj = lv_obj_create(parent);

参数类型为lv_obj_t *

其中parent为你需要设置的父类,换句话说,它决定了新创建的对象在界面上的层级关系和位置。如果把界面比作一个家庭,parent就像是新对象的父母,它确定了新对象在家庭中的位置和归属关系。在程序中,这意味着新对象将会被添加到parent对象的子元素列表中,并且它的位置和大小可能会受到parent对象的影响。

其中,在lvgl中最顶级的父类可以这样创建lv_scr_act(),他会返回一个lv_obj_t *

在这里插入图片描述
可以看到,左上角就是我们创建的类似于div的东西了

设置大小

我们可以使用

lv_obj_set_width(obj, new_width)
lv_obj_set_height(obj, new_height)
lv_obj_set_size(obj, new_width, new_height).

他们的作用分别是:设置obj的宽度,高度或者高度和宽度一起设置

示例代码:

lv_obj_t *obj1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,500,500);

在这里插入图片描述

我们还可以使用lv_pct函数设置相对于父类的百分比大小

lv_obj_t *obj1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,lv_pct(50),lv_pct(50));

这样就刚好一半了,我们改变窗口大小,他也会一起改变
在这里插入图片描述

设置位置

我们可以使用下面三个函数来设置obj的位置

lv_obj_set_x(obj, new_x)
lv_obj_set_y(obj, new_y)
lv_obj_set_pos(obj, new_x, new_y)

他们分别是设置obj的x位置、y位置和x,y一起设置

示例代码:

lv_obj_t *obj1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,lv_pct(50),lv_pct(50));
lv_obj_set_pos(obj1,220,200);

需要知道的是,只要是可以填单位的地方,百分比和像素都可以填,如果不是百分比/LV_SIZE_CONTENTD都是像素为单位
在这里插入图片描述

设置对齐

LVGL提供函数可以让一个obj相对于父类进行对齐
设置形式:

lv_obj_set_align(obj, LV_ALIGN_...)

示例代码:

lv_obj_t *obj1 = lv_obj_create(lv_scr_act());
lv_obj_set_align(obj1,LV_ALIGN_CENTER);

在这里插入图片描述
我们除了对齐父对象,我们还可以指定对齐的对象

lv_obj_align_to(obj_to_align, obj_reference, LV_ALIGN_..., x, y)

其中x,y是对齐后偏移的数量,比如x轴,如果是10,则对齐后向右偏移10,y轴也是一样的

对齐的一些宏:
在这里插入图片描述

父对象与子对象

lv_obj_set_parent(obj, new_parent)
lv_obj_get_parent(obj)

我们可以通过上面来设置/获取某个对象的父类

我们可以使用:

lv_obj_get_child(parent, idx)

获取某个对象的指定下标的子类,参数2为下标,从0开始

lv_obj_get_child_count(parent)

我们可以使用上面这个函数来获取某个obj父类的子类个数

比如可以这样操作:

uint32_t i;
for(i = 0; i < lv_obj_get_child_count(parent); i++) {lv_obj_t * child = lv_obj_get_child(parent, i);/*Do something with child*/
}

除了上面这些函数,还有一些其他的对于我们操作的函数:
lv_obj_get_index(obj):这个函数返回一个对象在其父对象中的索引。它等同于父对象中比该对象年轻的子对象的数量。例如,如果一个对象是父对象的第一个子对象,那么它的索引为0。

下面三个函数会改变他们在界面上的显示效果
lv_obj_move_foreground(obj) 和 lv_obj_move_background(obj):这两个函数用于将对象置于前景或背景。通过调用 lv_obj_move_foreground(obj),你可以将指定对象移到其父对象的子对象列表的最前面,使其显示在其他对象的上方。相反,lv_obj_move_background(obj) 将对象移到列表的最后,使其显示在其他对象的下方。

lv_obj_move_to_index(obj, index):这个函数用于改变对象在其父对象中的索引,从而改变其在层次结构中的显示顺序。通过指定新的索引,你可以将对象移动到父对象的子对象列表的特定位置。

lv_obj_swap(obj1, obj2):这个函数用于交换两个对象在其父对象中的位置。调用此函数将 obj1 和 obj2 在父对象的子对象列表中的位置互换,从而改变它们在层次结构中的显示顺序。

事件

事件就是触发了一个事情然后去执行一个函数

为一个obj添加一个事件:

void lv_obj_add_event_cb(lv_obj_t *obj, lv_event_cb_t event_cb, lv_event_code_t filter, void *user_data)

参数1为你要设置事件的对象,参数3为事件的类型比如点击LV_EVENT_CLICKED
参数2为回调函数,参数4为要传递的信息(如果没有可以传NULL)

其中回调函数这样写:

static void my_event_cb(lv_event_t * event)
{printf("Clicked\n");
}

示例代码:

#include <stdlib.h>
#include <unistd.h>#include "lvgl/lvgl.h"void callback(lv_event_t *e)
{printf("clicked\n");
}void LV_OBJ()
{lv_obj_t *obj1 = lv_obj_create(lv_scr_act());lv_obj_add_event_cb(obj1,callback,LV_EVENT_CLICKED,NULL);
}

在这里插入图片描述


总结

在LVGL中,lv_obj作为基础对象扮演着关键的角色。通过lv_obj,开发者可以创建、管理和控制各种图形元素,如窗口、按钮、标签等。lv_obj提供了丰富的功能和方法,使得开发者能够轻松实现各种复杂的用户界面。

本文介绍了lv_obj的基本概念,重点阐述了其在LVGL图形库中的作用和用法。通过深入理解lv_obj,开发者可以更加高效地利用LVGL进行嵌入式图形界面的设计与开发。希望本文能够为LVGL初学者提供一个良好的入门指南,使他们能够更加轻松地掌握LVGL图形库的核心概念和使用方法。

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

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

相关文章

故障诊断 | 一文解决,BiLSTM双向长短期记忆神经网络故障诊断(Matlab)

文章目录 效果一览文章概述专栏介绍模型描述源码设计参考资料效果一览 文章概述 故障诊断模型 | Maltab实现BiLSTM双向长短期记忆神经网络故障诊断 专栏介绍 订阅【故障诊断】专栏,不定期更新机器学习和深度学习在故障诊断中的应用;订阅

qt-C++笔记之contains()和isEmpty()函数、以及部分其他函数列举

qt-C笔记之contains()和isEmpty()函数、以及部分其他函数列举 code review! 文章目录 qt-C笔记之contains()和isEmpty()函数、以及部分其他函数列举contains()isEmpty() 类似的其他函数列举通用容器类函数字符串特有函数 在Qt C开发中&#xff0c; contains() 和 isEmpty()…

【深度学习】全连接神经网络

全连接神经网络 全连接神经网络的结构 整体结构 神经网络:类似神经元,前一层可以不断地传递给下一层。 神经网络模型由多个单元结构组成。 单元结构 单元结构的数学公式: a = h ( w x + b ) a=h(wx+b) a=h(wx+b) h(x):激活函数 比如sigmoid就是激活函数之一隐藏层大多…

Sketch 99.5中文 优秀的网站和移动应用设计软件

Sketch for mac用于数字世界的图形设计。在一个屡获殊荣的软件包中提供强大的工具和优雅的界面。因为做美丽的事情应该是一种快乐&#xff0c;而不是负担。 软件下载&#xff1a;Sketch 99.5中文激活版下载 Sketch支持每层多个填充&#xff0c;边框和阴影&#xff1b;具有强大的…

数据结构day7

1.思维导图 1.二叉树递归创建 2.二叉树先中后序遍历 3.二叉树计算节点 4.二叉树计算深度。 5.编程实现快速排序降序

点云数据集标注的相关工具

点云数据标注是三维计算机视觉领域中重要的一环&#xff0c;专门用于为点云数据添加语义信息&#xff0c;以便进行后续的机器学习和深度学习处理。以下是一些用于点云数据标注的软件及其特点的详细介绍&#xff1a; 1. CloudCompare 描述&#xff1a;CloudCompare是一个开源软…

python中的josn方法相关介绍

如果需要在不同的编程语言之间传递对象&#xff0c;就必须把对象序列化为标准格式&#xff0c;比如XML&#xff0c;但更好的方法是序列化为JSON&#xff0c;因为JSON表示出来就是一个字符串&#xff0c;可以被所有语言读取&#xff0c;也可以方便地存储到磁盘或者通过网络传输。…

太美医疗冲刺港交所上市:融资“数据打架”,老虎基金提前退出

1月29日&#xff0c;浙江太美医疗科技股份有限公司&#xff08;下称“太美医疗”或“太美医疗科技”&#xff09;递交招股书&#xff0c;准备在港交所主板上市。特别说明的是&#xff0c;该公司曾于2021年12月29日在上海证券交易所科创板递交上市申请。 据贝多财经了解&#x…

2024前端面试总结—JS篇(文档持续更新中。。。)

1、Event Loop&#xff08;事件循环&#xff09;机制 JS是单线程的非阻塞语言 为什么是单线程&#xff08;如果js是多线程&#xff0c;那么两个线程同时对同一个Dom进行操作&#xff0c;一个增一个删&#xff0c;浏览器该如何执行&#xff1f;&#xff09; 非阻塞&#xff08;…

2024/1/30 备战蓝桥杯 3-1 栈

目录 小鱼的数字游戏 P1427 小鱼的数字游戏 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 表达式括号匹配 P1739 表达式括号匹配 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 【模板】栈 B3614 【模板】栈 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 小鱼的数字…

使用Neo4j做技术血缘管理

目录 一、neo4j介绍 二、windows安装启动neo4j 2.1下载neo4j 2.2 解压文件 2.3 启动neo4j 三、neo4j基础操作 3.1 创建结点和关系 3.2 查询 3.3 更改 3.4 删除 四、技术血缘Demo实现 4.1 构建节点对象 4.2 构建存储对象 4.3 创建有属性关联关系 4.4 最后是图结果…

中科星图——2020年全球30米地表覆盖精细分类产品V1.0(29个地表覆盖类型)

数据名称&#xff1a; 2020年全球30米地表覆盖精细分类产品V1.0 GLC_FCS30 长时序 地表覆盖 动态监测 全球 数据来源&#xff1a; 中国科学院空天信息创新研究院 时空范围&#xff1a; 2015-2020年 空间范围&#xff1a; 全球 数据简介&#xff1a; 地表覆盖分布…

【四】【C++】日期类简单实现

编写GetMonthDay函数 int GetMonthDay(int year, int month) {static int monthDays[13] {0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};if (month 2 && ( (year % 4 0 && year % 100 ! 0) || year % 400 0)) {return 29;}return monthDays[month]…

瑞士0.5米高程地形瓦片数据介绍

一、背景 瑞士是位于中欧的一个国家&#xff0c;以其美丽的自然风光、高质量的生活和强大的金融体系而闻名&#xff0c;其位于欧洲中部&#xff0c;四面环山&#xff0c;与德国、法国、意大利、奥地利和列支敦士登等国家接壤。瑞士境内有许多湖泊和阿尔卑斯山脉的一部分。瑞士…

在 Linux 中挂载新硬盘动态使用

目录 一&#xff1a;添加硬盘并且格式化 二&#xff1a;创建逻辑卷 三&#xff1a;挂载卷到目录 在 Linux 中挂载新硬盘并进行格式化的操作可以按照以下步骤进行&#xff1a; 一&#xff1a;添加硬盘并且格式化 查看现有分区状态和服务器安装的硬盘状态&#xff1a; df -…

node版本切换(nvm)

1.https://github.com/coreybutler/nvm-windows/releases 进入下载nvm管理器 点击下载如果访问不到&#xff0c;可以使用我已下载好上传的 2.将下载文件解压到nvm目录中 3.配置nvm的环境变量 在系统变量中添加&#xff1a; NVM_HOME &#xff1a;包管理器的文件目录 NVM_SYML…

Workfine:用「订阅制」破解中小企业数字化转型困局

中小企业是国民经济和社会发展的重要力量&#xff0c;是扩大就业的载体&#xff0c;是改善民生的关键。《“十四五”数字经济发展规划》明确提出大力推进数字产业化转型&#xff0c;实施中小企业数字化赋能专项行动。数字化转型有利于中小企业降低成本、提高效率、加速转型升级…

记录解决报错--These dependencies were not found jsencrypt lodash-es

1.场景 idea打包vue&#xff0c;报错退出&#xff0c;缺少依赖 These dependencies were not found jsencrypt lodash-es2.解决步骤 ①到相关目录下直接安装依赖&#xff0c;npm install --save jsencrypt lodash-es。我这里是没安装成功&#xff0c;原因是很多依赖冲突。…

大数据之水平切分用途原理

数据库的水平切分方案是一种将数据分散到多个数据库或表中的策略&#xff0c;以提高系统的可扩展性和性能。以下是关于水平切分方案的详细介绍&#xff1a; 基本原理&#xff1a;水平切分方案基于将数据按照一定的规则分散到多个物理独立的数据库或表中&#xff0c;每个数据库或…

k8s Sidecar filebeat 收集容器中的trace日志和app日志

目录 一、背景 二、设计 三、具体实现 Filebeat配置 K8S SideCar yaml Logstash配置 一、背景 将容器中服务的trace日志和应用日志收集到KAFKA&#xff0c;需要注意的是 trace 日志和app 日志需要存放在同一个KAFKA两个不同的topic中。分别为APP_TOPIC和TRACE_TOPIC 二、…