LVGL 之 Bar 控件介绍

 一、概述

1.1 Bar 简介

Bar 控件由一个背景和一个指示器组成，进度条会根据宽度和高度的大小自动选择是水平进度条还是垂直进度条，比如 Bar 的宽度小于其高度，则创建垂直进度条。

图 1. Bar 进度条

 

二、Bar 基础知识

2.1 Bar 样式

图 2. Bar 样式

Bar 的样式部分按照其组成分类，LV_PART_MAIN 对应背景部分的皮肤，它使用典型的背景样式属性，填充属性使指标器变小或变大。如果启用动画 LV_ANIM_ON，anim_time 样式属性设置填充动画的时间。LV_PART_INDICATOR 对应指标器本身，也使用所有典型的背景属性。

 

2.2 Bar 的范围 & 进度值

可以通过函数 lv_bar_set_value ( bar, new_value, LV_ANIM_ON  /OFF )  设置新的进度值，最后一个参数 ( LV_ANIM_ON / OFF ) 设置启用动画设置新的进度值。整个进度条值的范围（最小值和最大值）可以通过函数 lv_bar_set_range ( bar, min, max ) 修改，默认范围是 0 - 100。进度值要在所设置的进度条的范围（最小值和最大值）以内。

 

2.3 Bar 的模式

• LV_BAR_MODE_NORMAL 如上所述的普通进度条。

图 3. LV_BAR_MODE_NORMAL

• LV_BAR_MODE_SYMMETRICAL 将指标器从零值绘制到当前值，需要负的最小范围和正的最大范围。

图 4. LV_BAR_MODE_SYMMETRICAL

• LV_BAR_MODE_RANGE 也允许通过函数 lv_bar_set_start_value ( bar, new_value, LV_ANIM_ON / OFF ) 设置起始值，起始值必须始终小于结束值。

图 5. LV_BAR_MODE_RANGE

 

三、 Bar 应用

 

void my_bar_test(void)
{
    static lv_style_t style_bg;
    static lv_style_t style_indic; 

    lv_style_init(&style_bg);
    lv_style_set_border_color(&style_bg, lv_palette_main(LV_PALETTE_BLUE));

lv_style_set_border_width(&style_bg, 2);
lv_style_set_pad_all(&style_bg, 6); /*To make the indicator smaller*/
lv_style_set_radius(&style_bg, 6);
lv_style_set_anim_time(&style_bg, 1000);

lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&style_indic, 3);

lv_obj_t* bar = lv_bar_create(lv_scr_act());
lv_obj_remove_style_all(bar); /*To have a clean start*/
lv_obj_add_style(bar, &style_bg, 0);
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);

lv_obj_set_size(bar, 200, 20);
lv_obj_center(bar);
lv_bar_set_value(bar, 70, LV_ANIM_ON);
}

 

Bar 的简单应用如上，运行效果如下图所示，也可以去 LVGL 官网看看： https://docs.lvgl.io/master/widgets/core/bar.html

图 6. Bar 应用

 

static void set_temp(void * bar, int32_t temp)
{
    lv_bar_set_value(bar, temp, LV_ANIM_ON);
}
 

/**
 * A temperature meter example
 */
void lv_example_bar_3(void)
{
    static lv_style_t 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_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER); 

    lv_obj_t * bar = lv_bar_create(lv_scr_act());
    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
    lv_obj_set_size(bar, 20, 200);
    lv_obj_center(bar);
    lv_bar_set_range(bar, -20, 40); 

    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_exec_cb(&a, set_temp);
    lv_anim_set_time(&a, 3000);
    lv_anim_set_playback_time(&a, 3000);
    lv_anim_set_var(&a, bar);
    lv_anim_set_values(&a, -20, 40);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
}

 

Bar 的垂直进度条应用如上，运行效果如下图所示

图 7. Bar 应用

 

 

 

四、参考资料

（1）LVGL 官方文档 ：

https://docs.lvgl.io/master/widgets/core/bar.html