LVGL 基础知识点

1 LVGL 对象

1.1 对象的属性

基本属性

在 LVGL 中所有对象类型都共享一些基本属性：

1. 尺寸
2. 父母
3. 拖动启用
4. 单击启用等
5. 位置

可以使用 lv_obj_set_... 和 lv_obj_get_... 功能设置/获取这些属性。例如：

/*设置基础对象属性*/
lv_obj_set_size(btn1, 100, 50);            /*按键大小*/
lv_obj_set_pos(btn1, 20,30);            /*按键位置*/

具体属性

对象类型也具有特殊的属性。例如,滑块具有

1. 当前值
2. 自定义样式
3. 最小值、最高值

对于这些属性,每种对象类型都有唯一的 API 函数。例如一个滑块:

/*设置滑块的特殊属性*/
lv_slider_set_range(slider1, 0, 100);                            /* 设置滑块的最小、最大值 */
lv_slider_set_value(slider1, 40, LV_ANIM_ON);        /* 设置滑块当下值的位置 */
lv_slider_set_action(slider1, my_action);                    /* 设置滑块的回调函数 */

1.2 工作机制

• 父类-子类的结构

父对象可以视为其子对象的容器。每个对象只有一个父对象(屏幕除外),但是一个父对象可以有无限多个子对象。父对象的类型没有限制,但是有典型的父对象(例如按钮)和典型的子对象(例如标签)。

• 一起移动机制

如果更改了父类对象的位置,则子类对象将与父类对象一起移动。因此,所有位置都相对于父类。(0; 0)坐标表示对象将独立于父对象的位置保留在父对象的左上角。例如：

lv_obj_t * par = lv_obj_create(lv_scr_act(), NULL); /* 创建一个父类对象在屏幕中 */
lv_obj_set_size(par, 100, 80);                    /* 设置父类对象的位置 */
lv_obj_t * obj1 = lv_obj_create(par, NULL);            /* 创建一个子类对象与父类对象中 */
lv_obj_set_pos(obj1, 10, 10);                /* 设置子类对象的位置 */

修改父类对象位置时，子类对象位置跟着移动：

lv_obj_set_pos(par, 50, 50);        /* 移动父类对象,子类对象跟着移动 .*/

• 仅在父类对象上可见

如果子类对象部分或全部不在其父级之外,则看不见外面的部分。

lv_obj_set_x(obj1, -30);         /*Move the child a little bit of the parent*/

1.3 创建/删除对象

在 LVGL 中,可以在运行时动态创建和删除对象。这意味着仅当前创建的对象消耗 RAM。例如,如果需要图表,则可以在需要时创建它,并在不可见或不必要时将其删除。
每个对象类型都有自己的带有统一原型的创建功能。它需要两个参数:

1. 指向父对象的指针。要创建屏幕,请以 NULL 作为父级。
2. (可选)用于复制具有相同类型的对象的指针。该复制对象可以为 NULL,以避免复制操作，所有对象均以 C 语言中的 lv_obj_t 指针作为句柄进行引用。以后可以使用该指针设置或获取对象的属性。创建函数如下所示:

lv_obj_t * lv_ <type>_create(lv_obj_t * parent, lv_obj_t * copy);

所有对象类型都有一个通用的删除功能。它删除对象及其所有子对象。lv_obj_del 将立即删除该对象。如果由于任何原因无法立即删除对象,可以使用 lv_obj_del_async(obj)。

void lv_obj_del(lv_obj_t * obj);

可以使用以下方法删除对象的所有子对象(但不能删除对象本身)lv_obj_clean:

void lv_obj_clean(lv_obj_t * obj);

1.3 屏幕

• 创建屏幕

屏幕是没有父对象的特殊对象。可以使用任何对象类型创建屏幕。

lv_obj_t * scr1 = lv_obj_create(NULL, NULL);

• 获取正在运行的屏幕

每个显示器上始终有一个活动屏幕。默认情况下,该库为每个显示创建并加载一个“基础对象”作为屏幕。要获取当前活动的屏幕,可以使用函数 lv_scr_act()来获取活动屏幕。

• 加载屏幕

要加载新屏幕,使用该函数原型：lv_scr_load(scr1)。其中 src1 是页面对象。

• 使用动画加载屏幕

可以使用加载新屏幕的动画。

lv_scr_load_anim(scr, transition_type,time,delay,auto_del)

其中 transition_type 存在以下转换类型：

• 处理多个显示

屏幕在当前选择的默认显示上创建。在默认显示是最后的注册显示屏 lv_disp_drv_register,也可以使用显式地选择一个新的默认显示 lv_disp_set_default(disp)。

1.4 对象状态

对象可以处于以下状态的组合:

当用户按下,释放,聚焦等对象时,状态通常由库自动更改。但是,状态也可以手动更改。

2 LVGL图层

2.1 创建顺序

默认情况下,LVGL 在背景上绘制旧对象,在前景上绘制新对象。即新添加的图层会覆盖原来的图层。例如,假设我们向一个名为 button1 的父对象添加了一个按钮,然后向另一个名为 button2 的按钮添加了一个按钮。然后 button1(及其子对象)将在背景中,并且可以被 button2 及其子对象覆盖。

/* 创建一个屏幕 */
lv_obj_t * scr = lv_obj_create(NULL, NULL);
lv_scr_load(scr);                /* 加载屏幕 */
/* 创建两个按钮 */
lv_obj_t * btn1 = lv_btn_create(scr, NULL);                /* 创建一个按钮 1 在屏幕中 */
lv_btn_set_fit(btn1, true, true);                    /* 使能自动设置大小根据内容 */
lv_obj_set_pos(btn1, 60, 40);                        /* 设置该按钮的位置 */
lv_obj_t * btn2 = lv_btn_create(scr, btn1);                /* 复制第一个按钮 */
lv_obj_set_pos(btn2, 180, 80);                /* 设置该按钮的位置 */
/* 添加标签与按钮中 */
lv_obj_t * label1 = lv_label_create(btn1, NULL);         /* 创建一个标签于按钮 1*/
lv_label_set_text(label1, "Button 1");             /* 设置标签内容 */
lv_obj_t * label2 = lv_label_create(btn2, NULL);             /* 创建标签于按钮 2*/
lv_label_set_text(label2, "Button 2");                 /* 设置标签的内容 */
/* 删除第一个按钮标签 */
lv_obj_del(label2);

2.2 设置图层层次

有几种方法可以将对象置于前台:

1. 使用 lv_obj_set_top (obj,true)。如果 obj 或它的任何子对象被点击,那么 LVGL 将自动将该对象带到前台。
   它的工作原理类似于 PC 上的典型 GUI。当点击背景中的一个窗口时,它会自动来到前台。
2. 使用 lv_obj_move_foreground(obj)显式地告诉库将一个对象放到前台。类似地,使用
   lv_obj_move_background(obj)移动到背景。
3. 当 lv_obj_set_parent(obj, new_parent)被使用时,obj 将在 new_parent 的前台。

2.3 顶层和系统层

LVGL 使用两个特殊的层,分别名为 layer_top 和 layer_sys。两者在显示器的所有屏幕上都是可见的和常见的。但是,它们不能在多个物理显示器之间共享。layer_top 总是位于默认屏幕的顶部(lv_scr_act()),而 layer_sys 位于 layer_top 的顶部
用户可以使用 layer_top 创建一些随处可见的内容。例如,一个菜单栏,一个弹出窗口等等。如果单击属性是启用的,那么 layer_top 将吸收所有用户单击,并作为一个模态
lv_obj_set_click (lv_layer_top(),true);
layer_sys 也用于类似的目的在 LVGL 上。例如,它将鼠标光标放在那里,以确保它总是可见的。

3 LVGL 事件

3.1 事件（Event）

当发生用户可能感兴趣的事情时,例如在对象中,事件将在 LVGL 中触发。

1. 被点击
2. 被拖动
3. 其值已更改
   用户可以将回调函数分配给对象以查看这些事件。实际上,它看起来像这样:
   注意：更多对象可以使用同一事件回调。

   lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
   lv_obj_set_event_cb(btn, my_event_cb);
   /* 指定一个事件回调函数 */
   ...
   static void my_event_cb(lv_obj_t * obj, lv_event_t event)
   {
   switch(event) {
       case LV_EVENT_PRESSED: /* 事件被按下 */
       printf("Pressed\n");
       break;
       case LV_EVENT_SHORT_CLICKED:/* 短点击 */
       printf("Short clicked\n");
       break;
       Cai Xuefeng
       case LV_EVENT_CLICKED: /* 点击 */
       printf("Clicked\n");
       break;
       case LV_EVENT_LONG_PRESSED: /* 长按 */
       printf("Long press\n");
       break;
       case LV_EVENT_LONG_PRESSED_REPEAT:/* 重复长按 */
       printf("Long press repeat\n");
       break;
       case LV_EVENT_RELEASED: /* 释放 */
       printf("Released\n");
       break;
       }
   }

   3.2 常用事件类型

   | 状态 | 描述 | | —- | —- | | LV_EVENT_PRESSED | 该对象已被按下 | | LV_EVENT_PRESSING | 对象被按下(在按下时连续发送) | | LV_EVENT_PRESS_LOST | 仍在按下输入设备,但不再在对象上 | | LV_EVENT_SHORT_CLICKED | 在 LV_INDEV_LONG_PRESS_TIME
   时间之前发布。如果拖动则不调用 | | LV_EVENT_LONG_PRESSED | 紧迫 LV_INDEV_LONG_PRESS_TIME
   时间。如果拖动则不调用 | | LV_EVENT_LONG_PRESSED_REPEAT | LV_INDEV_LONG_PRESS_TIME
   每LV_INDEV_LONG_PRESS_REP_TIME
   毫秒调用一次。如果拖动则不调用 | | LV_EVENT_CLICKED | 如果未拖动则调用释放(无论长按) | | LV_EVENT_RELEASED | 在每种情况下都被调用,即使对象已被拖动也被释放。如果在按下并从对象外部释放时从对象上滑出,则不会调用。在这种情况下,LV_EVENT_PRESS_LOST
   发送 |

4 LVGL 样式

4.1 简介

样式是一个 lv_style_t 可以保存属性的变量。

1. 并非必须指定所有属性。未指定的属性将使用默认值。
2. 可以将样式分配给对象以更改其外观。
3. 样式可以被任意数量的对象使用。
4. 样式可以级联,这意味着可以将多个样式分配给一个对象,并且每种样式可以具有不同的属性。例如,
   style_btn 可能会导致默认的灰色按钮,并且 style_btn_red 只能添加一个 background-color=red 以覆盖背景
   色。
5. 以后添加的样式具有更高的优先级。这意味着,如果以两种样式指定属性,则将使用后面添加的样式。
6. 如果未在对象中指定,则某些属性(例如,文本颜色)可以从父级继承。
7. 对象可以具有比“普通”样式更高优先级的局部样式。
8. 当对象更改状态时可以应用过渡。

4.2 初始化样式/获取属性

样式存储在 lv_style_t 变量中。样式变量应为 static ,全局或动态分配。在使用样式之前,应使用进行初始化 lv_style_init(&my_style) 。初始化后,可以设置样式属性。样式使用大概需要以下几个步骤：

//新建一个样式对象
lv_style_set_<property_name>(&style, <state>, <value>);
//初始化样式
lv_style_init(&my_style);
//设置样式的值，例如字体颜色、边框大小、、能否拖动...
lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE);
//将该样式添加到某一个对象中
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style1);

可以使用以下方式重置对象样式列表 lv_obj_reset_style_list(obj, <part>) 。

如果已经分配给对象的样式发生更改(即,其属性之一设置为新值),则应通过以下方式通知使用该样式的对象: lv_obj_refresh_style(obj)

在对象的样式列表中,也可以存储所谓的局部属性。与 CSS 的概念相同。局部样式与普通样式相同,但是它仅属于给定的对象,不能与其他对象共享。例如：

lv_obj_set_style_local_bg_color(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);

4.3 转换

默认情况下,当对象更改状态(例如,按下状态)时,会立即设置新状态下的新属性。但是,通过过渡,可以在状态改变时播放动画。例如,在按下按钮后,可以在 300 毫秒内将其背景色设置为所按下的颜色。过渡的参数存储在样式中。可以设置：

• 过渡时间
• 开始过渡之前的延迟
• 动画 path(也称为计时功能)
• 要设置动画的属性

4.4 属性

• 填充和边距属性： | 属性 | 描述 | | —- | —- | | pad_top(lv_style_int_t) | 在顶部设置填充。默认值:0。 | | pad_bottom(lv_style_int_t) | 在底部设置填充。默认值:0。 | | pad_left(lv_style_int_t) | 在左侧设置填充。默认值:0。 | | pad_right(lv_style_int_t) | 在右侧设置填充。默认值:0。 | | pad_inner(lv_style_int_t) | 设置子对象之间对象内部的填充。默认值:0。 | | margin_top(lv_style_int_t) | 在顶部设置边距。默认值:0。 | | margin_bottom(lv_style_int_t) | 在底部设置边距。默认值:0。 | | margin_left(lv_style_int_t) | 在左边设置边距。默认值:0。 | | margin_right(lv_style_int_t) | 在右边设置边距。默认值:0。 |

• 背景属性：

1. bg_color(lv_color_t)指定背景的颜色。默认值:LV_COLOR_WHITE。
2. bg_opa(lv_opa_t)指定背景的不透明度。默认值:LV_OPA_TRANSP。
3. bg_grad_color(lv_color_t)指定背景渐变的颜色。右侧或底部的颜色是。默认值:。
   bg_grad_dir != LV_GRAD_DIR_NONELV_COLOR_WHITE。
4. bg_main_stop(uint8_t):指定渐变应从何处开始。0:最左/最上位置,255:最右/最下位置。默认值:0。
5. bg_grad_stop(uint8_t):指定渐变应在何处停止。0:最左/最上位置,255:最右/最下位置。预设值:255。
6. bg_grad_dir(lv_grad_dir_t)指定渐变的方向。可以LV_GRAD_DIR_NONE/HOR/VER。默认值:LV_GRAD_DIR_NONE。
7. bg_blend_mode(lv_blend_mode_t):将混合模式设置为背景。可以LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 边框属性：

1. border_color(lv_color_t)指定边框的颜色。默认值:LV_COLOR_BLACK。
2. border_opa(lv_opa_t)指定边框的不透明度。默认值:LV_OPA_COVER。
3. border_width(lv_style_int_t):设置边框的宽度。默认值:0。
4. border_side(lv_border_side_t)指定要绘制边框的哪一侧。可以
   LV_BORDER_SIDE_NONE/LEFT/RIGHT/TOP/BOTTOM/FULL。ORed 值也是可能的。默认值:LV_BORDER_SIDE_FULL。
5. border_post(bool):如果 true 在绘制完所有子级之后绘制边框。默认值:false。
6. border_blend_mode(lv_blend_mode_t):设置边框的混合模式。可以
   LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 轮廓属性：类似于边框，但绘制在对象外部

1. outline_color(lv_color_t)指定轮廓的颜色。默认值:LV_COLOR_BLACK。
2. outline_opa(lv_opa_t)指定轮廓的不透明度。默认值:LV_OPA_COVER。
3. outline_width(lv_style_int_t):设置轮廓的宽度。默认值:0。
4. outline_pad(lv_style_int_t)设置对象和轮廓之间的空间。默认值:0。
5. outline_blend_mode(lv_blend_mode_t):设置轮廓的混合模式。可以
   LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 阴影属性：对象下方的一段模糊区域

1. shadow_color(lv_color_t)指定阴影的颜色。默认值:LV_COLOR_BLACK。
2. shadow_opa(lv_opa_t)指定阴影的不透明度。默认值:LV_OPA_TRANSP。
3. shadow_width(lv_style_int_t):设置轮廓的宽度(模糊大小)。默认值:0。
4. shadow_ofs_x(lv_style_int_t):设置阴影的 X 偏移量。默认值:0。
5. shadow_ofs_y(lv_style_int_t):设置阴影的 Y 偏移量。默认值:0。
6. shadow_spread(lv_style_int_t):在每个方向上使阴影大于背景的值达到此值。默认值:0。
7. shadow_blend_mode(lv_blend_mode_t):设置阴影的混合模式。可以
   LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 图案属性：图案是在背景中间绘制或重复以填充整个背景的图像(或符号)，可以理解为水印。

1. pattern_image():指向变量的指针,图像文件或符号的 path。默认值:const void *lv_img_dsc_tNULL
2. pattern_opa(lv_opa_t):指定图案的不透明度。默认值:LV_OPA_COVER。
3. pattern_recolor(lv_color_t):将此颜色混合到图案图像中。如果是符号(文本),它将是文本颜色。默认值:LV_COLOR_BLACK。
4. pattern_recolor_opa(lv_opa_t):重着色的强度。默认值:(LV_OPA_TRANSP 不重新着色)。
5. pattern_repeat(bool)::true 图案将作为马赛克重复。false:将图案放置在背景中间。默认值:false。
6. pattern_blend_mode(lv_blend_mode_t):设置图案的混合模式。可以
   LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 数值属性：值是绘制到文本的任意文本

1. value_str():指向要显示的文本的指针。仅保存指针!(不要将局部变量与 lv_style_set_value_str一起使用,而应使用静态,全局或动态分配的数据)。默认值:。const char *NULL
2. value_color(lv_color_t):文本的颜色。默认值:LV_COLOR_BLACK。
3. value_opa(lv_opa_t):文本的不透明度。默认值:LV_OPA_COVER。
4. value_font():指向文本字体的指针。默认值:。const lv_font_t *NULL
5. value_letter_space(lv_style_int_t):文本的字母空间。默认值:0。
6. value_line_space(lv_style_int_t):文本的行距。默认值:0。
7. valuealign(lv_align_t):文本的对齐方式。可以 LV_ALIGN…。默认值:LV_ALIGN_CENTER。
8. value_ofs_x(lv_style_int_t):与路线原始位置的 X 偏移量。默认值:0。
9. value_ofs_y(lv_style_int_t):从路线的原始位置偏移 Y。默认值:0。
10. value_blend_mode(lv_blend_mode_t):设置文本的混合模式。

• 文字属性：是文本对象的属性

1. text_color(lv_color_t):文本的颜色。默认值:LV_COLOR_BLACK。
2. text_opa(lv_opa_t):文本的不透明度。默认值:LV_OPA_COVER。
3. text_font():指向文本字体的指针。默认值:。const lv_font_t *NULL
4. text_letter_space(lv_style_int_t):文本的字母空间。默认值:0。
5. text_line_space(lv_style_int_t):文本的行距。默认值:0。
6. text_decor(lv_text_decor_t):添加文字修饰。

• 线属性：

1. line_color(lv_color_t):线条的颜色。默认值:LV_COLOR_BLACK
2. line_opa(lv_opa_t):直线的不透明度。默认值:LV_OPA_COVER
3. line_width(lv_style_int_t):线的宽度。默认值:0。
4. line_dash_width(lv_style_int_t):破折号的宽度。仅对水平或垂直线绘制虚线。0:禁用破折号。默认值:0。
5. line_dash_gap(lv_style_int_t):两条虚线之间的间隙。仅对水平或垂直线绘制虚线。0:禁用破折号。默认值:0。
6. line_rounded(bool)::true 绘制圆角的线尾。默认值:false。
7. line_blend_mode(lv_blend_mode_t):设置线条的混合模式。可以LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

• 图片属性：

1. image_recolor(lv_color_t):将此颜色混合到图案图像中。如果是符号(文本)
   ,它将是文本颜色。默认值:LV_COLOR_BLACK
2. image_recolor_opa(lv_opa_t):重新着色的强度。默认值:(LV_OPA_TRANSP 不重新着色)
   。默认值:LV_OPA_TRANSP
3. image_opa(lv_opa_t):图像的不透明度。默认值:LV_OPA_COVER
4. image_blend_mode(lv_blend_mode_t):设置图像的混合模式。可以LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值:LV_BLEND_MODE_NORMAL。

4.5 字体

字体存储在 lv_font_t 变量中,可以在样式的 text_font 字段中设置。例如:

lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28); /*Set a larger font*/

字体具有 bpp(每像素位数)属性。它显示了多少位用于描述字体中的像素。为像素存储的值确定像素的不透明度。这样,如果 bpp 较高,则字母的边缘可以更平滑。可能的 bpp 值是 1、2、4 和 8(值越高表示质量越好)。

该 BPP 也影响所需的存储空间来存储字体。例如, bpp = 4 使字体比 bpp = 1 大近 4 倍。

• 内置字体：有几种不同大小的内置字体,可以通过 LV_FONT_ 在 lv_conf.h 中启用 。 …定义:

1. LV_FONT_MONTSERRAT_12 12 px ASCII +内置符号
2. LV_FONT_MONTSERRAT_14 14 px ASCII +内置符号
3. LV_FONT_MONTSERRAT_16 16 px ASCII +内置符号
4. LV_FONT_MONTSERRAT_18 18 px ASCII +内置符号
5. LV_FONT_MONTSERRAT_20 20 px ASCII +内置符号
6. LV_FONT_MONTSERRAT_22 22 px ASCII +内置符号
7. LV_FONT_MONTSERRAT_24 24 px ASCII +内置符号
8. LV_FONT_MONTSERRAT_26 26 px ASCII +内置符号
9. LV_FONT_MONTSERRAT_28 28 px ASCII +内置符号
10. LV_FONT_MONTSERRAT_30 30 px ASCII +内置符号
11. LV_FONT_MONTSERRAT_32 32 px ASCII +内置符号
12. LV_FONT_MONTSERRAT_34 34 px ASCII +内置符号
13. LV_FONT_MONTSERRAT_36 36 px ASCII +内置符号
14. LV_FONT_MONTSERRAT_38 38 px ASCII +内置符号
15. LV_FONT_MONTSERRAT_40 40 px ASCII +内置符号
16. LV_FONT_MONTSERRAT_42 42 px ASCII +内置符号
17. LV_FONT_MONTSERRAT_44 44 px ASCII +内置符号
18. LV_FONT_MONTSERRAT_46 46 px ASCII +内置符号
19. LV_FONT_MONTSERRAT_48 48 px ASCII +内置符号

内置字体是全局变量,其名称类似于 lv_font_montserrat_16 16 px 高字体。要以某种样式使用它们,只需添加一个指向如上所示的字体变量的指针。

• 添加新字体：

有几种方法可以向项目中添加新字体:

1. 最简单的方法是使用 Online字体转换器。只需设置参数,单击“ 转换 ”按钮,将字体复制
   到您的项目中并使用它。请务必仔细阅读该站点上提供的步骤,否则转换时会出错。
2. 使用脱机字体转换器。(需要安装 Node.js)
3. 如果要创建类似内置字体(Roboto 字体和符号)但大小和/或范围不同的内容,则可以
   使用文件夹中的 lv_font_convbuilt_in_font_gen.py 脚本 lvgl/scripts/built_in_font 。(需要 Python 并进行安装)。

PS：要在文件中声明字体,请使用 LV_FONT_DECLARE(my_font_name) 。为了使全局可用(如内置字体)的字体,将其添加到 LV_FONT_CUSTOM_DECLARE 在` lv_conf.h。

5 图片

5.1 简介

• 储存图片：

1. 作为内部存储器（RAM 或ROM）中的变量
2. 作为文件

内部存储具有以下几个字段的结构体组成，这些通常作为 C 文件储存在项目中，他们像其他任何常量一样链接到生成的可执行文件中：

{
    标头
        — 颜色格式；
        — 宽度；
        — 高度；
        — 保留；
        — 指向存储对象本身的数组的数据指针；
        — data_size 的长度（以字节为单位）；
}

• 添加和使用图像：

添加图像到LVGL中有以下两种方式：

1）在线转换器

1. 首先选择一张BMP、PNG、JPG格式图像。
2. 选择颜色格式。
3. 选择所需的图像类型。选择二进制文件将生成一个 .bin 文件,该文件必须单独存储并使用文件支持进行读取。选择一个变量将生成一个标准的 C 文件,该文件可以链接到您的项目中。
4. 点击转换按钮，获取目标文件。
5. 如果是二进制文件,则需要指定所需的颜色格式:

• RGB332 用于 8 位色深
• RGB565 用于 16 位色深
• RGB565 交换为 16 位颜色深度(交换了两个字节)
• RGB888 用于 32 位色深

2）手动创建

如果要在运行时生成图像,则可以制作图像变量以使用 LVGL 显示它。例如:

uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...};
static lv_img_dsc_t my_img_dsc = {
    .header.always_zero = 0,
    .header.w = 80,
    .header.h = 60,
    .data_size = 80 * 60 * LV_COLOR_DEPTH / 8,
    .header.cf = LV_IMG_CF_TRUE_COLOR,
    /*Set the color format*/
    .data = my_img_data,
};

如果是彩色格式，则 LV_IMG_CF_TRUE_COLOR_ALPHA 可以设置 data_size 为 80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE

• 使用图像：

如果图像是使用在线转换器转换的,则应使用 LV_IMG_DECLARE(my_icon_dsc) 该图像在文件中声明要使用的位置。

lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);
/*From variable*/
lv_img_set_src(icon, &my_icon_dsc);/*From file*/
lv_img_set_src(icon, "S:my_icon.bin");

• 相关API

/* 初始化图像 decoder 模块 */
void_lv_img_decoder_init( void );
/* 获取有关图像信息
 * src：图像源
 * header：图像信息将储存在此处
 */
lv_res_t lv_img_decoder_get_info(constchar * src,lv_img_header_t * header );
/* 打开图像
 * dsc：描述解码会话
 * src：图像源
 * color：具有的图像颜色
 */
lv_res_t lv_img_decoder_open(lv_img_decoder_dsc_t * dsc,constvoid* src,lv_color_t color);
/* 从打开的图像中读取一行
 * dsc : lv_img_decoder_dsc_t 用于的指针 lv_img_decoder_open
 * x :开始 X 坐标(从左开始)
 * y :开始 Y 坐标(从顶部开始)
 * len :要读取的像素数
 * buf :在此处存储数据
 */
lv_res_t lv_img_decoder_read_line(lv_img_decoder_dsc_t * dsc,lv_coord_t x,lv_coord_t y,lv_coord_t len,uint8_t * buf );
/* 创建一个新的图像 decoder */
lv_img_decoder_t * lv_img_decoder_create( void );
/* 删除图像 decoder 
 * decoder :指向图像 decoder 的指针
 */
void lv_img_decoder_delete(lv_img_decoder_t * decoder);
/* 设置回调以获取有关图像的信息
 * decoder :指向图像 decoder 的指针
 * info_cb :用于收集有关图像信息(填充 lv_img_header_t struct)的函数
 */
voidlv_img_decoder_set_info_cb(lv_img_decoder_t * decoder,lv_img_decoder_info_f_t info_cb );
/* 设置回调以打开图像
 * decoder :指向图像 decoder 的指针
 * open_cb :打开图像的功能
 */
voidlv_img_decoder_set_open_cb(lv_img_decoder_t * decoder,
lv_img_decoder_open_f_t open_cb );