第六章 LVGL基础知识（6.1~6.4）

       工欲善其事必先利其器，在我们学习LVGL使用之前，我们必须了解LVGL的基础知识，例如LVGL的样式管理、布局管理以及动画的制作等相关知识，本章节讲解的知识非常重要，对于后面的学习起到承上启下的作用，希望读者能认真学习本章节的内容。

       本章节将分为以下几个小节：

       6.1 LVGL 控制流程

       6.2 LVGL 对象介绍

       6.3 LVGL布局

       6.4 LVGL 样式属性

       6.5 LVGL滚动属性

       6.6 LVGL 动画属性

       6.7 LVGL 定时器

       6.8 LVGL 事件

        6.1 LVGL控制流程

       在学习LVGL基础知识之前，我们先了解一下 LVGL和MCU之间的控制流程，这对于理解GUI界面与硬件之间的调度关系非常重要，其示意图如下：

图6.1.1 LVGL和MCU的控制流程

       在图6.1.1中，应用层包含了一些用户任务以及LVGL的GUI界面（仅仅是应用层的部分），而硬件驱动层则是涵盖了一些实际硬件设备（例如LED、蜂鸣器等）和输入输出设备的驱动程序。

       由上图可知，在拥有LVGL的工程中，用户在调度硬件驱动层时，有两种方式：

       方式一（上图①处）：直接在应用层中调度硬件（即使该工程有LVGL），此时的硬件层的反馈直接到达应用层，而不需要经过LVGL的处理。

       方式二：在应用层中，先调度LVGL图形库（上图②处），然后LVGL图形库会根据应用层的操作，调度相应的硬件驱动。

       这里举一个控制LED灯的例子来理解这两种方式的区别：当使用方式一时，用户直接在任务中调用开关LED的函数，即可执行相应的控制操作；当使用方式二时，用户需要在任务中绘制GUI界面，然后通过相应的GUI部件（例如开关）去反馈操作，而LVGL在接收到部件的反馈之后，即可控制相应的LED。

        6.2 LVGL 对象介绍

       在 LVGL 中，用户界面的基本构建成分是对象，也称为小部件，例如：按钮、标签、图片、列表、图表、文本区域，等等。值得注意的是，LVGL图形库虽然是由C语言开发的，但其所采用的是一种面对对象编程思维，这就涉及到了“类”的概念。

       在C语言中，并没有“类”的概念，而LVGL通过结构体的形式实现了“类”的功能（并非真的“类”），具体的实现逻辑如下图所示：

图6.2.1 LVGL实现“类”的逻辑

       由上图可知，在LVGL中，首先定义了lv_obj_t这个结构体，然后通过这个结构体去实例化一个基础对象（lv_obj），这个基础对象将作为父对象，去衍生更多的子对象（其他部件）。

       值得注意的是，通过这种“类”的方式去衍生其他部件，所衍生出来的部件将会继承父对象的一些基本属性，例如大小、位置、样式，等等，因此，我们可以通过一套统一的函数去管理不同部件的基本属性。

       6.2.1 对象的基本属性

       在LVGL中，每个对象都有一些相同的基本属性，例如：

       ① 大小

       ② 父类

       ③ 样式

       ④ 事件

       ⑤ 位置

       为了方便地设置基本属性，LVGL设计了一套通用的属性设置函数，它们可以用于设置各个部件的基本属性，这里我们以部件的大小属性为例，来看一下函数的具体实现：

void lv_obj_set_size(lv_obj_t *obj, lv_coord_t w, lv_coord_t h);

       该函数的第一个入口参数（*obj）为某个需要设置属性的部件（例如开关、按钮等），第二、三个入口参数分别为部件的宽度和高度。除了该函数之外，还有很多设置基本属性的函数，它们都是lv_obj_set_xxx的格式，我们后面用到某一个属性设置的时候，再详细地介绍这些函数。

       6.2.2 对象的私有属性

       在对象衍生的过程中，不同的对象（部件）会拥有一些特殊的属性，也称为私有属性。例如，滑块具有以下私有属性：

       ① 当前值；

       ② 范围值。

       对于这些私有的属性，每种部件都有相应的 API 函数来进行设置，例如滑块的当前值和范围值设置，源码如下所示：

/* 设置滑块的私有属性 */
lv_slider_set_range(slider1, 0, 100);          /* 设置滑块的范围值 */
lv_slider_set_value(slider1, 40, LV_ANIM_ON);  /* 设置滑块当前值 */

       6.2.3 父对象与子对象的关系

       父对象（下文称为父类）可以视为子对象（下文称为子类）的容器，当子类被创建出来之后，它是在父类里面的。注意：一个父类可以拥有多个子类，而子类就只有一个父类（屏幕除外）。

       接下来，我们介绍父类和子类之间的关系：

       ① 父类移动，则子类也会随着父类移动，如下图所示：

图6.2.3.1子类随父类移动

       ② 子类移动，父类并不会随之移动，如果子类移动的位置超出父类的范围，则超过的部分默认不可见，如下图所示：

图6.2.3.2 子类超出父类的范围

       上图中，子类的黄色部分超出了父类的范围，这个部分将默认不可见。

       ③ 子类在设置坐标位置时，坐标原点在父类的左上角，示意图如下所示：

图6.2.3.3 父类与子类的坐标定义

       在上图的例子中，父类设置位置时，是以整个显示屏的坐标原点(0,0)为参考点的，而对于子类来说，其设置位置时，则是以父类的左上角坐标点为参考点，如上图中的点A(400,240)。

       6.2.4 创建对象与删除对象

       在 LVGL 中，用户可以在程序运行时动态创建或者删除一个对象。当对象被创建时，将消耗一定的内存，而当其被删除时，这部分内存将得到释放。

       1.创建对象

       LVGL每个对象的创建函数都很类似，它们具有高度统一的风格，源码如下所示：

lv_obj_t *lv_<widget>_create(lv_obj_t *parent);

       在上述源码中，widget代表的是不同的部件，例如开关（switch）、按钮（btn）、图片（img），等等。一般情况下，创建对象的函数只有一个形参，那就是*parent，它指向父类，该父类可以是当前的活动屏幕（lv_scr_act）或者是其他的部件。

       2.删除对象

       用户需要删除一个对象，可使用以下几个函数：

       ① lv_obj_del(lv_obj_t  *obj)，立即删除一个对象，并该对象的子类一起删除。

       ② lv_obj_del_async(lv_obj_t  *obj)，下一次执行lv_timer_handler后删除对象。

       ③ lv_obj_clean(lv_obj_t  *obj)：立刻删除一个对象的全部子类。

       ④ lv_obj_del_delayed(lv_obj_t  *obj, uint32_t delay_ms)：延时delay_ms毫秒再删除对象。

       6.2.5 LVGL屏幕

       (1) 创建屏幕:

       在LVGL中，屏幕是没有父对象的特殊对象，要创建一个屏幕，可使用创建对象的方式：

lv_obj_t *scr1 = lv_obj_create(NULL);

       注意：在默认的情况下，LVGL初始化时，系统已经帮用户创建一个活动屏幕，不需要我们再次创建。

       (2) 获取当前活动的屏幕:

       用户需要获取当前活动的屏幕，可以调用lv_scr_act函数，其将返回指向活动屏幕的指针。在部件的创建中，我们经常会获取当前活动的屏幕，将其作为父类。

       6.2.6 LVGL图层

       关于LVGL的图层，大家只需要搞清楚3个问题即可：

       ① 当用户创建两个对象，而这两个对象的区域出现重叠时，重叠的部分将如何绘制？

       ② 两个对象出现重叠，怎样把底下的对象移到上层？

       ③ LVGL的图层有哪些？

       接下来，我们围绕着这三个问题来讲解LVGL图层的知识。

       (1) 创建对象的顺序 （第一个问题）

       在LVGL中，旧的对象将会被绘制在背景上，而新的对象则是绘制在前景上，换而言之，如果对象之间出现重叠，则后面创建的对象会覆盖前面的，如下图所示：

图6.2.6.1 新对象覆盖旧对象

       (2) 前景和背景调节 （第二个问题）

       当部件之间出现重叠时，用户可以根据需求来修改覆盖的情况，而LVGL为此提供了3个相关的函数，具体如下所示：

       ① lv_obj_set_top 函数，设置该函数之后，当对象被点击时，其将置顶，它的工作原理类似于 PC 上的典型 GUI，当点击背景中的一个窗口时，它会自动来到前景。如下图所示：

图6.2.6.2 旧对象切换到前景

       ② lv_obj_move_foreground 函数，直接将一个对象移动到前景。

       ③ lv_obj_move_background函数，将对象移动到背景。

       (3) LVGL图层 (第三个问题)

       在LVGL 的工程中，一般拥有3个图层，它们分别为活动屏幕层（scr_act）、顶层（top）和系统层（sys），具体的图层结构如下图所示：

图6.2.6.3 LVGL图层结构

       在上述的图层中，活动屏幕层（scr_act）位于最底下，在其之上是顶层（top），而最上面则是系统层（sys）。接下来，我们介绍各层的作用：

       ① 活动屏幕层（scr_act），用户可以在该层创建各种部件，例如开关、按钮、进度条，等等。

       ② 顶层（top），用户可在该层创建一些部件，例如一个菜单栏，一个弹出窗口等。如果系统的单击属性是启用的，则该层将吸收所有用户单击，这就类似于强制的弹窗提示，则用户必须处理完弹窗消息之后，才可以继续操作其他的内容。

       ③ 系统层（sys），该层的内容总是可见的，例如鼠标的光标。

        6.3 LVGL 布局

       LVGL的布局设计深受 CSS 启发，其主要内容涉及3个方面：坐标位置、大小以及对齐方式。

       6.3.1 对象的坐标位置

       在LVGL中，设置对象的坐标位置有两种方式，如下所示：

       方式一：直接设置具体像素。

lv_obj_set_x(obj,10);        /* 设置对象x轴坐标 */
lv_obj_set_y(obj,10);        /* 设置对象y轴坐标 */
lv_obj_set_pos(obj,10,10);   /* 设置对象x,y轴坐标 */

       方式二：根据父类的区域大小，按百分比进行计算，用户可以使用lv_pct函数将值转换为百分比。

lv_obj_set_x(obj,lv_pct(10));           /* 设置对象x轴坐标 */
lv_obj_set_y(obj,lv_pct(10));           /* 设置对象y轴坐标 */
lv_obj_set_pos(obj,lv_pct(10),lv_pct(10));  /* 设置对象x,y轴坐标 */

       注意：当用户设置完对象位置之后，其值并不会立刻更新，如果此时获取对象的坐标，则获取回来的坐标值依旧是之前的。如果用户想让设置的坐标值立刻更新，可以调用lv_obj_update_layout函数，该函数会强制LVGL重新计算坐标，刷新所有对象的位置和大小信息。

       6.3.2 对象的大小

       在LVGL中，设置对象的大小有两种方式，如下所示：

       方式一：直接设置具体像素。

lv_obj_set_width(obj, 200);         /* 设置对象的宽度*/
lv_obj_set_height(obj, 100);        /* 设置对象的高度*/
lv_obj_set_size(obj, 200, 100);     /* 设置对象的高度和宽度*/

       方式二：根据父类的区域大小，按百分比进行计算，用户可以使用lv_pct函数将值转换为百分比。

lv_obj_set_height(obj, lv_pct(100));/* 设置对象的高度为屏幕高度*/

       6.3.3 对象的对齐

       对于一个成熟的GUI而言，一套易用、完善的对齐方式是非常重要的，因为在GUI界面设计中，往往会用到很多小部件，如果我们需要手动去调整部件的相对位置，那么开发效率将会变得非常低。

       接下来，我们看一下LVGL的对齐模式，其内容非常丰富，如下表所示：

表6.3.3.1 LVGL 对齐模式

       在LVGL中，常用于设置对齐方式的函数有3个：

       (1) lv_obj_center函数

       根据父对象的位置，居中对齐，其函数原型如下所示：

void lv_obj_center(struct _lv_obj_t *obj);

       (2) lv_obj_align函数

       根据父对象的位置进行对齐，该函数的第二个形参为对齐的模式，第三、四个形参分别为对齐后x、y轴的偏移量（以像素为单位），其函数原型如下所示：

void lv_obj_align(struct _lv_obj_t *obj,     /* 要对齐的对象 */
lv_align_t align,          /* 要对齐的模式 */
lv_coord_t x_ofs,      /* 要对齐后向x轴偏移量 */
lv_coord_t y_ofs);      /* 要对齐后向y轴偏移量 */

       (3) lv_obj_align_to函数

       根据另一个对象（无父子关系）的位置进行对齐，其函数原型如下所示：

void lv_obj_align_to( struct _lv_obj_t *obj,    /* 要对齐的对象 */
const struct _lv_obj_t *base,  /* 向谁对齐 */
lv_align_t align,     /* 要对齐的模式 */
lv_coord_t x_ofs,     /* 要对齐后向x轴偏移量 */
                      lv_coord_t y_ofs);     /* 要对齐后向y轴偏移量 */

        6.4 LVGL 样式属性

       样式即对象的外观，而LVGL的样式设置深受 CSS 的启发，其特点如下：

       ① LVGL样式的设置都是使用lv_style_t变量，它可以保存对象的边框宽度、文本颜色、阴影颜色等属性。

       ② 在设置对象的样式时，可以指定在某个部分和状态下才生效。例如：用户给一个按钮设置样式时，可以指定按钮被按下时（指定状态），其背景颜色为红色，而在默认状态下，其背景为蓝色。

       ③ 任何数量的对象都可以使用相同的样式。

       ④ 样式可以级联，这意味着用户可以将多个样式分配给同一个对象，并且每个样式可以具有不同的属性。

       ⑤ 样式具有优先级。如果两个函数同时设置某个属性，则最后调用的函数生效。

       ⑥ 如果对象未指定某些样式属性（例如文本颜色），其可以从父对象继承。

       ⑦ 对象样式设置的方法分为两种：普通样式和本地样式。注意：本地样式比普通样式的优先级更高，所以LVGL会优先执行本地样式。

       6.4.1 LVGL 样式设置方法

       在LVGL中，设置样式属性的方法有两个：

       1. 普通样式设置

       普通样式设置的最明显特点是：共用。它就类似于一个共用的样式套装，用户可以往里面添加所需要修改的样式内容（例如背景颜色、文本颜色等），当我们将这个样式套装应用到某个部件时，其所包含的样式内容将会被全部应用到该部件中。如果用户界面中有很多样式相同的部分，则建议使用此方法，这可以使样式设置变得非常高效。

       接下来，我们介绍普通样式的具体设置流程，如下源码所示：

static lv_style_t style_btn;             /* 定义样式变量 */
lv_style_init(&style_btn);         /* 初始化样式 */
lv_style_set_bg_color(&style_btn, lv_color_hex(0x115588)); /* 设置背景 */
lv_style_set_bg_opa(&style_btn, LV_OPA_50);    /* 设置背景透明度 */
lv_style_set_border_width(&style_btn, 2);     /* 设置边框的宽度 */
lv_style_set_border_color(&style_btn, lv_color_black()); /* 设置边框的大小 */
 
lv_obj_t * obj1 = lv_obj_create(lv_scr_act());    /* 创建一个对象 */
lv_obj_add_style(obj1, & style_btn, LV_STATE_DEFAULT);  /* 添加对象1的样式 */
lv_obj_t * obj2 = lv_obj_create(lv_scr_act());    /* 创建一个对象 */
lv_obj_add_style(obj2, & style_btn, LV_STATE_DEFAULT);  /* 添加对象2的样式 */

       由上述源码可知，在设置普通样式时，用户需要先调用lv_style_t结构体，定义样式变量（如上述代码中的style_btn），然后初始化样式以及设置各种样式属性，最后即可为目标对象添加样式。注意：如果其他对象需要使用已定义的样式变量（例如上述代码中的style_btn）对应的样式，则直接调用即可。

       2. 本地样式设置

       本地样式的特点是：设置简单，针对性强。当用户界面的对象样式有较大差异时，可以使用本地样式进行单独的设置，本地样式的具体设置流程如下：

/* 创建一个对象 */
lv_obj_t *obj = lv_obj_create(lv_scr_act());    
/* 设置对象背景颜色 */
lv_obj_set_style_bg_color(obj, lv_color_red(), LV_STATE_DEFAULT);

       由上述源码可知，本地样式的设置非常简单，只需要直接将样式设置到某个部件上即可，注意：在上述的lv_obj_set_style_bg_color函数中，第三个形参代表“状态及组成部分选择器”，用户可以在此指定所设置的样式应用到哪一个组成部分，同时也可选择该样式在什么状态下生效。接下来，我们将详细介绍部件的组成部分以及状态，这对于正确地设置样式非常重要。

       6.4.2 部件组成部分

       当我们绘制一个圆角矩阵时，可将其分解为两个部分，例如直线部分和圆弧部分，这样即可组成为圆角矩阵，如下图所示：

图6.4.2.1 圆角矩形绘制示意图

       在LVGL中，也利用了上述的原理，将一个复杂的部件分解成多个组成部分，这样我们即可单独地设置某个组成部分的样式。注意：如果用户想设置某个组成部分的样式，则需要在设置样式时选择该组成部分的对应枚举。各个组成部分对应的枚举如下表所示：

表6.4.2.1部件组成部分描述

       接下来，我们结合上表，以进度条部件（Slider）为例，分析它的组成部分，如下图所示：

图6.4.2.2进度条部件的组成部分

       ① 主体背景（LV_PART_MAIN）；

       ② 指示器（LV_PART_INDICATOR）；

       ③ 旋钮（LV_PART_KNOB）。

       由上图可知，进度条部件分为三个组成部分，所以我们在设置其样式时，直接指定某个组成部分，即可设置该部分的样式，示例源码如下：

/* 创建一个对象 */
lv_obj_t *slider = lv_slider_create(lv_scr_act());    
/* 设置指示器的背景颜色 */
lv_obj_set_style_bg_color(slider, lv_color_hex(0xff0000), LV_PART_INDICATOR);

       6.4.3 部件的状态

       在LVGL中，所有的部件状态如下表所示：

表6.4.3.1对象的状态

       上表中，部件状态相关的枚举较少且不难理解，我们一般在两种情况下会用到状态枚举： 1.添加、清除部件状态

       当用户需要添加或者清除部件的某个状态时，可以调用对应的函数，如下源码所示：

/* 添加/清除选中状态 */
lv_obj_add/clear_state(obj, part, LV_STATE_ CHECKED);

       2.设置部件样式

       当用户设置部件样式时，可以指定该样式在哪一个状态下才生效，如下源码所示：

/* 创建一个对象 */
lv_obj_t *btn = lv_btn_create(lv_scr_act());    
/* 设置按钮的背景颜色，按下时才生效 */
lv_obj_set_style_bg_color(btn, lv_color_hex(0xff0000), LV_STATE_PRESSED);

       6.4.4 LVGL 样式属性

       6.4.4.1 大小与位置属性

       该样式属性与对象的宽度、高度、位置、对齐方式和布局相关。

       注意：样式属性的设置函数都是lv_obj_set_style_xxx（本地样式）或者lv_style_set_xxx（普通样式）的格式，因此，我们在设置某个样式的时候，只需要记住关键的单词即可，例如宽度（width）设置的函数为：lv_obj_set_style_width（以本地样式为例）。

       1. (width)宽度：

       用户可以按像素单位、百分比或者LV_SIZE_CONTENT（自适应）的方式设置宽度，注意：使用百分比设置宽度时，是以父类的大小作为参考。宽度设置的示例如下：

图6.4.4.1.1 设置宽度属性

       2. (min_width)最小宽度：

       以像素或百分比为单位。

       注意：当对象设置最小宽度后，如果用户重新设置对象的宽度，且该宽度小于最小宽度时，将不会成功。

       3. (max_width)最大宽度：

       以像素或百分比为单位。

       注意：当对象设置最大宽度后，如果用户重新设置对象的宽度，且该宽度大于最大宽度时，将不会成功。

       4. (height )高度：

       用户可以按像素单位、百分比或者LV_SIZE_CONTENT（自适应）的方式设置高度，注意：使用百分比设置高度时，是以父类的大小作为参考。高度设置的示例如下：

图6.4.4.1.2 设置高度属性

       5. (min_height )最小高度：

       以像素或百分比为单位。

       注意：当对象设置最小高度后，如果用户重新设置对象的高度，且该高度小于最小高度时，将不会成功。

       6. (max_height )最大高度：

       以像素或百分比为单位。

       注意：当对象设置最大高度后，如果用户重新设置对象的高度，且该高度大于最大高度时，将不会成功。

       7. X坐标属性：

       设置对象的X轴位置（以父类为参考），以像素或百分比为单位，X轴坐标设置的示例如下：

图6.4.4.1.3 设置X坐标

       8. Y坐标属性：

       设置对象的Y轴位置（以父类为参考），以像素或百分比为单位，Y轴坐标设置的示例如下：

图6.4.4.1.4 设置Y坐标

       9. (Align)对齐属性：

       设置对象的对齐属性，示例如下（居中对齐）：

图6.4.4.1.5 设置对齐属性

       对齐的模式如下所示：

       l LV_ALIGN_DEFAULT。

       l LV_ALIGN_TOP_LEFT/MID/RIGHT。

       l LV_ALIGN_BOTTOM_LEFT/MID/RIGHT。

       l LV_ALIGN_LEFT/RIGHT_MID。

       l LV_ALIGN_CENTER。

       10. (transform_width) 变换宽度属性：

       使对象的两边变宽，以像素或百分比为单位，示例如下：

图6.4.4.1.6 设置转变宽度属性

       11. (transform_height) 变换高度属性：

       使对象的两边变高，以像素或百分比为单位，示例如下：

图6.4.4.1.7 设置转变高度属性

       12. (translate_x) X轴坐标偏移属性：

       往X轴方向偏移，以像素或百分比为单位，示例如下：

图6.4.4.1.8 设置转变X坐标属性

       13. (translate_y) Y轴坐标偏移属性：

       往Y轴方向偏移，以像素或百分比为单位，示例如下：

图6.4.4.1.9 设置转变Y坐标属性

       14. (transform_zoom)缩放属性：

       用户可以调整图像的缩放，如果缩放值为256，则表示图像不缩放；如果缩放值为128，则表示图像大小为原来的1/2；如果缩放值为512，则表示图像放大一倍，示例如下：

图6.4.4.1.10 设置缩放

       15. (transform_angle) 旋转属性：

       用户可以设置图像旋转角度。注意：旋转角度 = 旋转值 / 10，例如：我们需要设置图像旋转为45度，则需要在函数中设置旋转值为450，示例如下：

图6.4.4.1.11 设置旋转属性

       6.4.4.2 填充属性

       当部件之间存在父子关系时，用户可以在父对象和子对象之间设置填充，以改变子对象的布局，填充的方向如下图所示：  

图6.4.4.2.1填充的方向

       1. (pad_top)顶部填充属性：

       当用户在父对象的顶部进行填充，子对象会向下偏移（相对父对象），示例如下：

图6.4.4.2.2顶部填充

       2. (pad_bottom)底部填充属性：

       当用户在父对象的底部进行填充，子对象会向上偏移（相对父对象），示例如下：

图6.4.4.2.3 底部填充

       3. (pad_left)左侧填充属性：

       当用户在父对象的左侧进行填充，子对象会向右偏移（相对父对象），示例如下：

图6.4.4.2.4 左侧填充

       4. (pad_right)右边填充属性：

       当用户在父对象的右侧进行填充，子对象会向左偏移（相对父对象），示例如下：

图6.4.4.2.5 右侧填充

       5. (pad_row)行之间填充属性：

       行之间的填充，由布局使用。

       5. (pad_column)列之间填充属性：

       列之间的填充，由布局使用。

       6.4.4.3 背景属性

       1. (bg_color)背景颜色：

       设置对象的背景颜色，示例如下：

图6.4.4.3.1 设置背景属性

       2. (bg_opa)背景透明属性：

       设置背景的透明度，如果它的值为0、LV_OPA_0或LV_OPA_TRANSP，则表示背景完全透明；如果值为255、LV_OPA_100或LV_OPA_COVER，则表示图像完全不透明；用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.3.2 设置背景透明属性

       3. (bg_grad_color)背景颜色渐变属性：

       设置背景的渐变颜色。值得注意的是，当grad_dir属性设置为LV_GRAD_DIR_NONE时，渐变不会生效。背景颜色渐变示例如下：

图6.4.4.3.3 设置背景颜色渐变

       4. (bg_grad_dir)背景渐变方向属性：

       设置背景的渐变方向，可选方向值为LV_GRAD_DIR_NONE/HOR/VER。

       5. (bg_grad_stop) 背景渐变起点属性：

       设置背景渐变颜色的起始点，如果渐变起始点为0，则表示渐变是从顶部/左侧开始；如果渐变起始点为255，则表示渐变是从底部/右侧开始；如果渐变起始点为128，则表示渐变是从中心开始，示例如下：

图6.4.4.3.4 设置背景颜色渐变起点

       6. (bg_img_src)背景图片源属性：

       设置背景图像源，该图像源可从lv_img_dsc_t的指针（C语言数组）、文件路径（例如外部SD卡）或内部的字体图标中获取，示例如下：

图6.4.4.3.5 设置背景图片源

       7. (bg_img_opa)背景图片透明度属性：

       设置背景图像的透明度，如果它的值为0、LV_OPA_0或LV_OPA_TRANSP，则表示背景图像完全透明；如果值为255、LV_OPA_100或LV_OPA_COVER，则表示背景图像完全不透明；用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.3.6 设置背景图片透明度

       8. (bg_img_recolor)背景图片重新着色属性：

       用户可以设置一个颜色，将其混合到背景图像，这样可以使图像重新着色，相关的设置函数为lv_obj_set_style_bg_img_recolor。值得注意的是，仅设置背景图片的重新着色，我们将看不到任何效果，因为在默认的情况下，重新着色的透明度为0，也就是完全透明的。

       9. (bg_img_recolor_opa) 背景图片重新着色透明度属性：

       设置背景图像重着色的强度，如果透明度值为0、LV_OPA_0和LV_OPA_TRANSP，则表示不混合颜色；如果透明度值为255、LV_OPA_100和LV_OPA_COVER，则表示背景图像完全重新着色。 

       10. (bg_img_tiled)背景图片平铺属性：

       如果该属性启用，背景图像将被平铺，示例如下：

图6.4.4.3.7 设置背景图片平铺

       6.4.4.4 边框属性

       对象的边框处于主体之外，具体的示意图如下：

图6.4.4.4.1 边框的位置

       1. (border_color)边框颜色：

       设置边框的颜色属性，示例如下：

图6.4.4.4.2 设置边框颜色

       2. (border_opa)边框透明度：

       设置边框的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示对象边框完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示对象边框为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.4.3 设置边框透明度

       3. (border_width)边框宽度：

       设置边框的宽度，值得注意的是，该属性的单位只能是像素，示例如下：

图6.4.4.4.4 设置边框宽度

       4. (border_side) 仅描绘一侧边框：

       用户可以仅描绘对象的某个边框，示例如下：

图6.4.4.4.5 设置边框描绘位置

       边框的可选位置为：

       ① LV_BORDER_SIDE_NONE。

       ② LV_BORDER_SIDE_TOP。

       ③ LV_BORDER_SIDE_BOTTOM。

       ④ LV_BORDER_SIDE_LEFT。

       ⑥ LV_BORDER_SIDE_RIGHT。

       ⑦ LV_BORDER_SIDE_INTERNAL。

       6.4.4.5 轮廓属性

       对象的轮廓处于边框之外，具体的示意图如下：

图6.4.4.5.1 轮廓的位置

       1. (outline_width) 轮廓宽度属性：

       用户可以以像素为单位设置轮廓宽度 ，示例如下：

图6.4.4.5.2 设置轮廓宽度

       2. (outline_color) 轮廓颜色属性：

       设置轮廓的颜色，示例如下：

图6.4.4.5.3 设置轮廓颜色

       3. (outline_opa) 轮廓透明度属性：

       设置轮廓的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示对象轮廓完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示对象轮廓为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.5.4设置轮廓透明度

       4. (outline_pad) 轮廓间隙属性：

       设置轮廓线的填充，即对象主体和轮廓线之间的间隙，示例如下：

图6.4.4.5.5 设置轮廓间隙

       6.4.4.6 阴影属性

       对象的阴影处于轮廓之外，具体的示意图如下：

图6.4.4.6.1 阴影的位置

       1. (shadow_width) 阴影宽度属性：

       用户可以以像素为单位设置阴影的宽度，示例如下：

图6.4.4.6.2 设置阴影宽度

       2. (shadow_ofs_x) 阴影偏移（X轴方向）属性：

       设置阴影在X轴方向上的像素偏移量，示例如下：

图6.3.4.6.3 设置阴影X轴方向偏移

       3. (shadow_ofs_y) 阴影偏移（Y轴方向）属性：

       设置阴影在Y轴方向上的像素偏移量，示例如下：

图6.4.4.6.4 设置阴影Y轴方向偏移

       4. (shadow_color) 阴影颜色属性：

       设置阴影的颜色，示例如下：

图6.4.4.6.6 设置阴影颜色

       5. (shadow_opa) 阴影透明度属性：

       设置阴影的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示对象阴影完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示对象阴影为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.6.7 设置阴影透明度

       6.4.4.7 图片属性

       注意：仅图片相关的部件内容适用该属性。

       1. (img_opa)图片透明度属性：

       设置图片的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示图片完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示图片为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.7.1 设置图片透明度

       2. (img_recolor)图片重新着色属性：

       用户可以设置一个颜色，将其混合到图片，这样可以使图片重新着色，相关的设置函数为lv_obj_set_style_img_recolor。值得注意的是，仅设置图片的重新着色，我们将看不到任何效果，因为在默认的情况下，重新着色的透明度为0，也就是完全透明的。

       3. (img_recolor_opa)图片重新着色透明度属性：

       设置图片重着色的强度，如果透明度值为0、LV_OPA_0和LV_OPA_TRANSP，则表示不混合颜色；如果透明度值为255、LV_OPA_100和LV_OPA_COVER，则表示图片完全重新着色。

       6.4.4.8 线条属性

       注意：仅线条相关的部件或组成部分适用该属性。

       1. (line_width)线的宽度属性：

       用户可以以像素为单位，设置线条的宽度，示例如下：

图6.4.4.8.1 设置线的宽度

       2. (line_rounded) 线条的端点属性：

       用户可以设置线条的端点形状，在相关的设置函数中，如果传入的参数为true，则线条的端点为圆角；如果传入的参数为false，则线条的端点为垂线，示例如下：

图6.4.4.8.2 设置线条的端点

       3. (line_color) 线条的颜色属性：

       设置线条的颜色，示例如下：

图6.4.4.8.3设置线条的颜色

       4. (line_opa) 线条的透明度属性：

       设置线条的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示线条完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示线条为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.8.4 设置线条的透明度

       6.4.4.9 圆弧属性

       注意：仅圆弧相关的部件或组成部分适用该属性。

       1. (arc_width)圆弧宽度属性：

       用户可以以像素为单位设置弧的宽度(厚度)，示例如下：

图6.4.4.9.1 设置圆弧宽度

       2. (arc_rounded)圆弧端点：

       用户可以设置圆弧的端点形状，在相关的设置函数中，如果传入的参数为true，则圆弧的端点为圆角；如果传入的参数为false，则圆弧的端点为直角。如下图所示：

图6.4.4.9.2 设置圆弧端点

       3. (arc_color)圆弧颜色属性：

       设置圆弧的颜色，示例如下：

图6.4.4.9.3 设置圆弧颜色

       4. (arc_opa)圆弧透明度属性：

       设置圆弧的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示圆弧完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示圆弧为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.9.4 设置圆弧透明度

       6.4.4.10 文本属性

       该属性适用于文本相关的部件或组成部分。

       1. (text_color)文本颜色属性：

       设置文本的颜色，示例如下：

图6.4.4.10.1 设置文本颜色

       2. (text_opa)文本透明度属性：

       设置文本的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示文本完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示文本为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.10.2 设置文本透明度

       3. (text_font)文本字体属性：

       用户可以根据需求设置文本的字体（包括自定义的字体），示例如下：

图6.4.4.10.3 设置文本字体

       4. (text_letter_space)文本间隙属性：

       设置文本字符的间隙，示例如下：

图6.4.4.10.4 设置文本字符间隙

       5. (text_decor)文本装饰属性：

       文本装饰包括下划线和删除线两种，示例如下（下划线为例）：

图6.4.4.10.5设置文本装饰

       文本装饰相关的枚举如下：

       ① LV_TEXT_DECOR_NONE：正常文本。

       ② LV_TEXT_DECOR_UNDERLINE：文件添加下划线

       ③ LV_TEXT_DECOR_STRIKETHROUGH：文本添加删除线。

       6. (text_align)文本对齐属性：

       用户可以设置对象内的文本对齐，该属性相关的枚举如下：

       ① LV_TEXT_ALIGN_LEFT：对象内文本左对齐。

       ② LV_TEXT_ALIGN_CENTER：对象内文本中间对齐。

       ③ LV_TEXT_ALIGN_RIGHT：对象内文本右对齐。

       ④ LV_TEXT_ALIGN_AUTO：对象内文本自动对齐。

       6.4.4.11 其他属性

       1. (radius)设置圆角的半径属性：

       用户可以设置对象边框的圆角半径，如果圆角的半径为0，则对象边框圆角为直角型；如果圆角的半径大于0且小于等于LV_RADIUS_CIRCLE，则对象边框的圆角为圆型(圆角的半径由设定值决定)，示例如下：

图6.4.4.11.1 设置对象圆角

       2. (opa)透明度：

       设置对象的透明度，如果透明度值为0、LV_OPA_0或LV_OPA_TRANSP，则表示对象完全透明；如果透明度值为255、LV_OPA_100或LV_OPA_COVER，则表示对象为不透明，用户可以根据需求，在0~255之间设置透明度的值，示例如下：

图6.4.4.11.2 设置对象透明度

       3. (anim)动画属性：

       使对象具有动画效果。

       4. (anim_time)动画时间属性：

       设置动画时间，该动画时间以毫秒为单位。

       5. (anim_speed)动画速度属性：

       设置动画速度，该动画速度以像素/秒为单位。

       6. (layout)布局属性：

       设置对象的布局，子元素将根据布局策略重新定位和调整大小。

       7. (base_dir)对象方向属性：

       设置对象的基本方向，取值为:LV_BIDI_DIR_LTR/RTL/AUTO。