LVGL 源码分析大全

2023-11-08

LVGL 源码分析大全目录

1、概述
2、已完成源码分析文章列表
3、样式
4、组件
5、主题
6、开发环境
7、其它

1、概述

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


SquareLine Studio	GUI Guider

LVGL官方地址：https://lvgl.io/
中文参考文档：百问网LVGL中文开发手册

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)

7、其它

本系列文章为解决实际项目所遇到的典型场景而设计或者分析LVGL源的总集。目标并不是指导如果学习LVGL代码，而项目中遇到的场景该如何解决。一些与项目强关的内容会被模糊描述或者省略，但不会影响到本系列文章的参考意义。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)