当前位置：首页 > news >正文

LVGL 控件之进度条（lv_bar）

news 2025/5/14 17:10:44

一、进度条

1、概述

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

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

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

背景（LV_PART_MAIN）：用于显示范围值；
指示器（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、进度条模式

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

LV_BAR_MODE_NORMAL：普通模式（默认）；
LV_BAR_MODE_SYMMETRICAL：始终从零开始绘制，范围值可以是负数；
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);                                     // 应用动画效果}
}