LVGL 控件之进度条（lv_bar）

---

一、进度条

1、概述

进度条对象（lv_bar）有一个背景和一个指示器。指示器的宽度根据进度条的当前值自动设置。

如果设置进度条的宽度小于其高度，就可以创建出垂直摆放的进度条。。

不仅可以设置结束，还可以设置进度条的起始值，从而改变指标的起始位置。

1. 背景（LV_PART_MAIN）：用于显示范围值；
2. 指示器（LV_PART_INDICATOR）：用于显示当前值

2、方向

进度条可以设置为水平或者垂直方向，当它的宽度小于高度时，其为水平方向，反之为垂直方向。

例一：当长度大于宽度时，为水平显示：

lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());  //创建bar对象
lv_obj_set_size(bar_ltr,200,20);                   //设置尺寸
lv_bar_set_value(bar_ltr,70,LV_ANIM_OFF);          //设置初始值
lv_obj_align(bar_ltr,LV_ALIGN_CENTER,0,-30);       //设置位置

例二：当长度小于宽度时，为垂直显示：

lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());  //创建bar对象
lv_obj_set_size(bar_ltr,20,200);                   //设置尺寸
lv_bar_set_value(bar_ltr,70,LV_ANIM_OFF);          //设置初始值
lv_obj_align(bar_ltr,LV_ALIGN_CENTER,0,-30);       //设置位置

例三：改变进度条指示器方向：

void my_gui(void)
{
    lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());  //创建bar对象
    lv_obj_set_size(bar_ltr,200,20);                   //设置尺寸
   lv_bar_set_value(bar_ltr,70,LV_ANIM_OFF);           //设置初始值
   lv_obj_align(bar_ltr,LV_ALIGN_CENTER,0,-30);        //设置位置

   lv_obj_t * bar_rtl = lv_bar_create(lv_scr_act());      //创建bar对象
   lv_obj_set_style_base_dir(bar_rtl,LV_BASE_DIR_RTL,0);  //设置基类方向
   lv_obj_set_size(bar_rtl,200,20);                       //设置尺寸
   lv_bar_set_value(bar_rtl,70,LV_ANIM_OFF);              //设置初始值
   lv_obj_align(bar_rtl,LV_ALIGN_CENTER,0,30);            //设置位置
}

3、进度条的当前值和范围值

进度条当前值指的是当前指示器所指示的值，范围值是指进度条当前值的可变化范围，用户需要设置这两个参数，可以调用以下函数：

函数	含义
lv_bar_set_range(bar, min, max)	设置进度条部件范
lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF)	设置进度条当前值

其中，当前值设置函数的最后一个形参代表是否使用动画，如果使用动画请传入 LV_ANIM_ON，否则传入 LV_ANIM_OFF。

注意：在默认情况下，范围值为 0~100，进度条都是从该范围的最小值开始绘制的。

例四：

void my_gui(void)
{
    lv_obj_t* lv_bar = lv_bar_create(lv_scr_act());  /* 创建进度条 */
    lv_obj_set_style_bg_color(lv_bar, lv_color_black(),LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(lv_bar, lv_palette_main(LV_PALETTE_BLUE),
                              LV_STATE_DEFAULT);

    lv_obj_set_size(lv_bar, 20, 100);  /* 设置进度条的大小 */
    lv_bar_set_range(lv_bar, 0, 100);  /* 设置进度条的范围 */

    lv_obj_align(lv_bar, LV_ALIGN_CENTER, 0, 0);  /* 设置对齐模式 */

    /* 填充满的时间 */
    lv_obj_set_style_anim_time(lv_bar, 5000, LV_STATE_DEFAULT);
    lv_bar_set_value(lv_bar, 100, LV_ANIM_ON);  /* 设置进度条当前值，并开启动画 */
}

4、进度条模式

进度条部件具有三种模式，它们对应的枚举如下所示：

1. LV_BAR_MODE_NORMAL：普通模式（默认）；
2. LV_BAR_MODE_SYMMETRICAL：始终从零开始绘制，范围值可以是负数；
3. LV_BAR_MODE_RANGE：允许设置起始值，该起始值必须始终小于结束值。

函数	含义
lv_bar_set_mode(lv_obj_t *objj, lv_bar_mode_t mode)	设置进度条模式

例五：

void my_gui(void)
{
    lv_obj_t* bar = lv_bar_create(lv_scr_act());  /* 创建 bar 部件 */
    lv_obj_center(bar);
    lv_obj_set_style_bg_color(bar, lv_color_black(), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(bar, lv_palette_main(LV_PALETTE_BLUE),
                              LV_STATE_DEFAULT);

    lv_bar_set_mode(bar, LV_BAR_MODE_SYMMETRICAL);            /* 设置模式 */
    lv_bar_set_range(bar, -100, 100);                         /* 设置范围值 */
    lv_obj_set_style_anim_time(bar, 5000, LV_STATE_DEFAULT);  /* 设置动画时间 */
    lv_bar_set_value(bar, 100, LV_ANIM_ON);                   /* 设置当前值*/
}

我设置的范围是 -100~100，且设置的模式是 LV_BAR_MODE_SYMMETRICAL，所以要从 0 开始绘制。

5、进度条事件

LV_BAR_DRAW_PART_INDICATOR：绘制指示器。

6、相关 API

LVGL 官方提供了一些与进度条部件相关API，如下表所示：

函数	描述
lv_bar_create()	创建进度条
lv_bar_set_value()	设置进度条当前值
lv_bar_set_start_value()	设置进度条起始值
lv_bar_set_range()	设置进度条范围值
lv_bar_set_mode()	设置进度条模式
lv_bar_get_value()	获取进度条的当前值
lv_bar_get_start_value()	获取进度条起始值
lv_bar_get_min_value()	获取进度条最小值
lv_bar_get_max_value()	获取进度条最大值
lv_bar_get_mode()	获取进度条模式

二、例程

// bar对象动画回调函数
static void obj_bar_anim_exec_callback(void * bar, int32_t value)
{
    if (bar != NULL)
    {
        lv_bar_set_value((lv_obj_t *)bar, value, LV_ANIM_ON); // 设置进度条对象的值
    }
}


void my_gui()
{
    lv_obj_t * main_container = lv_obj_create(lv_scr_act());
    if (main_container == NULL)
	{
		printf("[%s:%d] create main_container failed\n", __FUNCTION__, __LINE__);
		return;
	}

    lv_obj_set_style_pad_all(main_container, 0, 0);
    lv_obj_set_style_border_width(main_container, 0, 0);                  // 边框宽
    lv_obj_set_style_radius(main_container, 0, 0);                        // 圆角大小
    lv_obj_set_size(main_container, LV_PCT(100), LV_PCT(100));            // 设置尺寸
    lv_obj_set_style_bg_opa(main_container, LV_OPA_100, 0);               // 设置背景不透明度
    lv_obj_set_style_bg_color(main_container, lv_color_hex(0x355edc), 0); // 设置背景颜色
    lv_obj_center(main_container);

    lv_obj_t * obj_label = lv_label_create(main_container);
    if (obj_label != NULL)
    {
        lv_obj_set_style_text_color(obj_label, lv_color_white(), 0); // 设置文本颜色
        lv_obj_set_style_text_font(obj_label,(const lv_font_t *)(&lv_font_montserrat_20), 0); // 设置文本字体大小
        lv_label_set_text(obj_label, "Software is upgrading, Please wait!"); // 设置文本内容
        lv_obj_align(obj_label, LV_ALIGN_CENTER, 0, -30);
    }

    static lv_style_t style_bg;
    lv_style_init(&style_bg);
    lv_style_reset(&style_bg);
    lv_style_set_border_color(&style_bg, lv_color_hex(0xFFFFFF)); // 设置边框颜色
    lv_style_set_border_width(&style_bg, 2); // 设置边框宽度
    lv_style_set_pad_all(&style_bg, 6);
    lv_style_set_radius(&style_bg, 6); // 设置圆角弧度

    static lv_style_t style_indic;
    lv_style_reset(&style_indic);
    lv_style_init(&style_indic);
    lv_style_set_bg_opa(&style_indic, LV_OPA_COVER); // 设置背景不透明度
    lv_style_set_bg_color(&style_indic, lv_color_hex(0xFFFFFF));
    lv_style_set_radius(&style_indic, 3);

    lv_obj_t * obj_bar = lv_bar_create(main_container);  // 创建一个进度条
    if (obj_bar != NULL)
    {
        lv_obj_remove_style_all(obj_bar);  // 清除所有样式
        lv_obj_add_style(obj_bar, &style_bg, 0);
        lv_obj_add_style(obj_bar, &style_indic, LV_PART_INDICATOR);
        lv_obj_set_size(obj_bar, 400, 20);
        lv_obj_align(obj_bar, LV_ALIGN_CENTER, 0, 30);

        lv_anim_t anim;
        lv_anim_init(&anim);                                      // 初始化动画
        lv_anim_set_exec_cb(&anim, obj_bar_anim_exec_callback);   // 添加回调函数
        lv_anim_set_time(&anim, 5000);                            // 设置动画时长
        lv_anim_set_var(&anim, obj_bar);                          // 动画绑定对象
        lv_anim_set_values(&anim, 0, 100);                        // 设置开始值和结束值
        lv_anim_set_repeat_count(&anim, LV_ANIM_REPEAT_INFINITE); // 重复次数，默认值为1 LV_ANIM_REPEAT_INFINIT用于无限重复
        lv_anim_start(&anim);                                     // 应用动画效果
    }
}