LVGL 源码分析大全

Bigan(安)

已于 2023-11-26 19:13:06 修改

阅读量1w

点赞数 24

分类专栏： LVGL 文章标签： arm 物联网 mcu c语言 linux

于 2022-08-12 20:25:08 首次发布

本文链接：https://blog.csdn.net/tangta789/article/details/126309716

版权

LVGL 专栏收录该内容

41 篇文章 387 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

LVGL是一款轻量级的嵌入式GUI库，适用于MCU和MPU设备。本文提供LVGL源码分析，包括硬件抽象层、核心框架、定制功能、内部接口、案例讲解等内容，帮助开发者理解其设计思想和原理。

摘要由CSDN通过智能技术生成

1、概述

LVGL 是一款流行的免费和开源嵌入式图形库，为纯C的轻量级GUI框架，支持framebuffer直接渲染图层，因此LVGL能更容易为 MCU、MPU等显示设备开发漂亮的UI。
可视化的 UI 编辑器官方上有推荐使用 SquareLine Studio 工具。当然，也可以选择 NXP(恩智浦半导体) 提供的 GUI Guider 工具。


SquareLine Studio	GUI Guider

LVGL官方地址：https://lvgl.io/

2、已完成源码分析文章列表

源码分析在不断更新中，欢迎大家订阅、点赞。有关注的模块请留言给我，可优先考虑撰写。

3、样式

在LVGL中，像素分为三种：像素(pixel)，百分比(percentage) 和特殊值（LV_SIZE_CONTENT）。而它的盒子模型(Boxing model) 遵循 CSS 的 border-box 模型。
很显然，这个模型与浏览器默认的盒模型是不一致的。默认的浏览器盒模型为 content-box。


border-box	content-box

引用 developer.mozilla.org 中盒模型的说明如下：

content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

LVGL中的styles(风格样式)很大程序上受到CSS的启发。具体大家可以参考相关的开发文档，这里为了方便大家更好的理解它，我把它与浏览器中的标准CSS样式（以下简称标准CSS样式）做一个简单的对比。
简单而言 LVGL样式仅为标准CSS样式的子集，故LVGL仅支持标准CSS中的部分样式。未实现的部分按属性功能来看，可以分为属性部分功能实现和未支持属性。例如border属性仅为部分功能实现，在LVGL中认为四个方向的线条是同样大小，而标准CSS中却是四个方向的线条可以单独设置的。又例如margin属性却是LVGL中未实现的（网上有提margin采用outline来替换，但严格来讲还是有所区别的）。

4、组件

LVGL的组件分为基础组件、核心组件和额外组件。
基础组件仅有一个Base object（基础对象） (lv_obj)，它是所有其它组件的基类；
核心组件有Arc（圆弧） (lv_arc)、Bar（进度条） (lv_bar)、Button（按钮） (lv_btn)、Button matrix（按钮矩阵） (lv_btnmatrix)、Canvas（画布） (lv_canvas)、Checkbox（复选框） (lv_checkbox)、Drop-down list（下拉列表） (lv_dropdown)、Image（图象） (lv_img)、Label（标签） (lv_label)、Line（线条） (lv_line)、Roller（滚轮） (lv_roller)、Slider（滑动条） (lv_slider)、Switch（开关） (lv_switch)、Table（表） (lv_table)、Text area（文本框） (lv_textarea)；
额外组件有 Animation Image (lv_animimg)、Calendar (lv_calendar)、Chart (lv_chart)、Color wheel (lv_colorwheel)、Image button (lv_imgbtn)、Keyboard（键盘）(lv_keyboard)、LED (lv_led)、List (lv_list)、Menu (lv_menu)、Meter (lv_meter)、Message box (lv_msgbox)、Span (lv_span)、Spinbox (lv_spinbox)、Spinner (lv_spinner)、Tabview (lv_tabview)、Tile view (lv_tileview)、Window (lv_win)。
这里只列举了LVGL提供的基本组件，后续在相关源码分析中会详细再说明。

5、主题

LVGL默认是支持夜景和白景两种场景的主题的。在 lv_conf.h 配置文件中，有相关宏定义如下：

/*A simple, impressive and very complete theme*/
#define LV_USE_THEME_DEFAULT 1
#if LV_USE_THEME_DEFAULT

    /*0: Light mode; 1: Dark mode*/
    #define LV_THEME_DEFAULT_DARK 0

    /*1: Enable grow on press*/
    #define LV_THEME_DEFAULT_GROW 1

    /*Default transition time in [ms]*/
    #define LV_THEME_DEFAULT_TRANSITION_TIME 80
#endif /*LV_USE_THEME_DEFAULT*/

6、开发环境

LVGL的项目是在不断维护的，所以文章可能与维护后的代码有一些出入。因此建议大家参考这些内容，重在理解其设计思想与原理，不要过于纠结一些细节上的差异。
这里说明一下当前写这个文章使用的开发环境。

开发板
全志R16开发板 Linux系统
LVGL 版本
LVGL v8.2.0 (下载地址：https://github.com/littlevgl/lvgl.git)
LVGL PORT(lv_port_linux_frame_buffer) v8.2 (下载地址：https://github.com/lvgl/lv_port_linux_frame_buffer)