LVGL学习-PC | 不知名LZJ的博客

😀

一个简单的开头

一、LVGL是什么

简介

LVGL (Light and Versatile Graphics Library)是一个开源的图形用户界面库，旨在提供轻量级、可移植、灵活和易于使用的图形用户界面解决方案。它适用于嵌入式系统，可以在不同的操作系统、微控制器和图形加速器上运行。LVGL的核心代码是用C语言编写的，支持多种显示设备和输入设备，包括液晶显示屏、0LED显示屏、触摸屏、按键和编码器害， LVGL提供了一系列组件和小部件，例如文本框、按钮、滑动条、表格、菜单等，可以快速构建交互式用户界面。LVGL还具有高度自定义的能力，用户可以根据需要修改或扩展库的功能。总之，LVGL是一个功能强大、易于使用的图形用户界面库，可以帮助开发人员在嵌入式系统中实现各种交互式应用程序。

特点

轻量级和高效: LVGL的核心代码非常小巧，可以在资源受限的嵌入式系统上运行，同时具有出色的性能和速度。

可移植性: LVGL支持多种处理器架构和操作系统，可以在不同的平台上使用。

灵活性: LVGL提供了大量的可自定义选项，包括主题、字体、颜色、大小、形状等，可以根据项目需求进行灵活定制。

易于使用: LVGL提供了简单易懂的API和丰富的文档，使开发人员可以快速上手，构建复杂的图形用户界面。

多种输入设备支持: LVGL支持多种输入设备，包括触摸屏、按键、编码器等，可以满足不同应用场景的需求。

多种组件支持: LVGL提供了多种常用组件，如文本框、按钮、滑动条、表格、菜单等，同时还支持自定义组件。

兼容性: LVGL支持多种显示设备，包括LCD、OLED、ePaper等，可以适应不同的显示分辨率和屏幕尺寸。

社区支持: LVGL有一个活跃的社区，用户可以在社区中获得支持和帮助，同时也可以分享自己的经验和贡献代码。

二、LVGL模拟器环境搭建（PC端）

为什么用PC端的模拟器：方便调试，后续可移植MCU MPU

Github lvgl库

LVGL github库版本调试不好，这里选择用CodeBlocks，建议去看韦东山老师的教学1-4-0_LVGL入门教程之设置CodeBlocks（补充内容-重要必看）_哔哩哔哩_bilibili

如何修改CodeBlocks工程的LVGL源码2-1-1_LVGL入门教程之如何获取LVGL的源码_哔哩哔哩_bilibili

三、LVGL的学习（看手册去了，这里不写了）

LVGL目录解析

LVGL的启动流程

LVGL的裁剪

LVGL的基础对象（lv_obj）2.3.1

在面向对象的思想中，基础对象是 LVGL 中所有其他对象都继承自的基类。

我们在学习时以基础对象为开头进行学习。

在LVGL中，有三层屏幕：活动屏幕(screen_active) < 顶层(top layer) < 系统层(system layer)

同级的话，先创建的被后创建的覆盖，示例：

LVGL对象的大小

修改大小

可以使用 lv_obj_set_width(obj, new_width) 和 lv_obj_set_height(obj, new_height) 设置或修改单个轴上的对象大小，

或者可以同时修改两个轴用 lv_obj_set_size(obj, new_width, new_height)

以最后一次设置为准

获取大小

使用lv_obj_get_width(obj) 来获取宽度

使用lv_obj_get_hight(obj) 来获取宽度

使用lv_obj_get_content_width (obj)获取实际可用宽度

使用lv_obj_get_content_height(obj)获取实际可用高度

💡

后者获取的大小会比前者小，因为LVGL为了更美观，会预留空间，这个空间是可调的

注意：坐标会被延迟计算，强制更新坐标函数为lv_obj_update_layout()

文档位置

LVGL对象的位置

位置的设置

一个对象未设置位置，会默认位于左上角

可以使用

来设置大小，这里的200指的是右移200， -50为上移如图

位置的对齐

api：

例如：lv_obj_set_align(obj, LV_ALIGN_CENTER);

也能居中后偏移，lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);

lv_obj_align_to(label, obj, LV_ALIGN_OUT_BOTTOM_MID, 0, 0); 相较于一个对象的位置

获取位置

两个点就能确定一块区域。

可以获取基于屏幕原点的x x2 y y2的位置，也可以获取对齐后的x1 x2 y y2位置

LVGL对象的盒子模型

简单介绍

LVGL`遵循 CSS 的 border-box 模型。 对象的“盒子”由以下部分构成:

边界(bounding):元素的宽度/高度围起来的区域(整个盒子)。

边框(border):边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。

填充(padding):对象两侧与其子对象之间的空间(盒子的填充物)。

内容(content):如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区域)。

轮廓(outline): LVGL中没有外边距(margin)的概念(盒子之间的距离)，确认代之的是轮廓(outline)。它是绘制于元素(盒子)周围的一条线，它不占据空间，位于边框边缘的外围，可起到突出元素(盒子)的作用。在浏览器里，当鼠标点击或使用Tab键让一个选项或者一个图片获得焦点的时候，这个元素就会多了一个轮廓框围绕。轮廓(outline)。

LVGL的盒子模型是我们理解对象(部件)的组成，修改对象的样式，实现对对象的布局、处理对象排列等等的关键。

盒子模型通俗理解:

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。

content就是盒子里装的东西，它有高度(height)和宽度(width),可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，在LVGL中盒子不会变化，会产生滚动条，我们可以滚动查看超出盒子的内容，盒子也可以是有弹性的，内容太大就会撑大盒子(自动调整大小)，但是不会损害盒子。

padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬。

border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。marain外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。

💡

有关LVGL其他问题，欢迎您在底部评论区留言，一起交流~

一、LVGL是什么

简介

特点

二、LVGL模拟器环境搭建（PC端）