【LVGL 学习】进度条（BAR）控件学习

一、概述

1.1 Bar 简介

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

二、Bar 基础知识

2.1 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 如上所述的普通进度条。

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

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

测试示例使用LVGL8.3，开发环境：VS2019

以下是设置控件所需常用的API接口函数

/**
    功能：创建进度条对象
    返回：指向创建的进度条的指针
    形参:
    parent：指向对象的指针，它将是新进度条的父对象，一般是NULL（默认当前屏幕），或者lv_scr_act()
 */
lv_obj_t * lv_bar_create(lv_obj_t * parent);

/**
    功能：设置进度条的最大最小值
    返回：无
    形参:
    obj：指向进度条的指针
    min：最小值
    max：最大值
 */
void lv_bar_set_range(lv_obj_t * obj, int32_t min, int32_t max);

/**
    功能：设置进度条的值，（不设置 lv_bar_set_start_value 函数默认开始都是0开始）
    返回：无
    形参:
    obj	 ：指向进度条的指针
    value：设置进度条的新值
    anim ：设置是否带有动画 LV_ANIM_OFF | LV_ANIM_ON 需要其它动画相关函数关联
 */
void lv_bar_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);

/**
    功能：设置开始进度条的值，和（ lv_bar_set_value ）函数配合使用，不能单独使用
    返回：无
    形参:
    obj	 ：指向进度条的指针
    value：设置进度条的开始的新值
    anim ：设置是否带有动画 LV_ANIM_OFF | LV_ANIM_ON 需要其它动画相关函数关联
 */
void lv_bar_set_start_value(lv_obj_t * obj, int32_t start_value, lv_anim_enable_t anim);

测试示例1：

void bar_demo(void)
{
    lv_obj_t* bar = lv_bar_create(lv_scr_act());            //创建一个进度条控件
    lv_obj_set_size(bar, 200, 20);                          //设置进度条控件的大小
    lv_obj_center(bar);                                     //将进度条控件放入到父对象（屏幕）的中心位置

    lv_bar_set_range(bar, 0, 100);                         //设置进度条的设置范围大小

    /*
        功能：设置进度条默认值显示
        参数1：进度条控件指针
        参数2：设置进度条当前的值
        参数3：设置是否带有动画 LV_ANIM_OFF | LV_ANIM_ON
    */
    lv_bar_set_value(bar, 50, LV_ANIM_ON);                 //设置进度条默认值显示
}

测试示例2：

static void set_value(void* bar, int32_t v)
{
    lv_bar_set_start_value(bar, 50 - (v - 50), LV_ANIM_OFF);
    lv_bar_set_value(bar, v, LV_ANIM_OFF);
}
/**
 * Example of styling the bar
 */
void lv_example_bar_2(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_border_opa(&style_bg, LV_OPA_TRANSP);
    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); 
    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_range(bar, 0, 100);

    lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);
    lv_bar_set_value(bar, 50, LV_ANIM_OFF);
    lv_bar_set_start_value(bar, 50, LV_ANIM_OFF);

    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, bar);
    lv_anim_set_values(&a, 50, 100);
    lv_anim_set_exec_cb(&a, set_value);
    lv_anim_set_time(&a, 2000);
    //lv_anim_set_playback_time(&a, 2000);
    lv_anim_set_repeat_count(&a, 0);
    lv_anim_start(&a);
}