LVGL学习笔记16 - 进度条Bar

目录

 1. Parts

2. 模式

2.1 LV_BAR_MODE_SYMMETRICAL：对称模式

2.2 LV_BAR_MODE_RANGE：范围模式

3. 动画

4. 样式

4.1 方向

4.2 渐变色

4.3 增加边框

4.4 滚动条方向

---

进度条有一个背景和一个指示器组成，通过lv_bar_create创建对象。

static lv_obj_t *obj1 = lv_bar_create(lv_scr_act());
lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
lv_bar_set_value(obj1, 70, LV_ANIM_OFF);

进度条默认的范围是 0..100。

 1. Parts

进度条分2个Part：LV_PART_MAIN和LV_PART_INDICATOR。

lv_obj_set_style_bg_color(obj1, lv_color_hex(0xff0000), LV_PART_MAIN);
lv_obj_set_style_bg_opa(obj1, LV_OPA_100, LV_PART_MAIN);
lv_obj_set_style_bg_color(obj1, lv_color_hex(0x0000ff), LV_PART_INDICATOR);

红色对应MAIN，蓝色对应INDICATOR。

2. 模式

进度条可以是以下模式之一：LV_BAR_MODE_NORMAL、LV_BAR_MODE_SYMMETRICAL和LV_BAR_MODE_RANGE。

通过lv_bar_set_mode设置模式，默认是Normal。

2.1 LV_BAR_MODE_SYMMETRICAL：对称模式

可以指定负的最小范围，但是只能从零值到当前值绘制指示器。

lv_bar_set_mode(obj1, LV_BAR_MODE_SYMMETRICAL);
lv_bar_set_range(obj1, -100, 100);
lv_bar_set_value(obj1, 100, LV_ANIM_ON);

 指示器是从0画到100.

lv_bar_set_mode(obj1, LV_BAR_MODE_SYMMETRICAL);
lv_bar_set_range(obj1, -100, 100);
lv_bar_set_value(obj1, -100, LV_ANIM_ON);

 指示器是从0画到-100.

2.2 LV_BAR_MODE_RANGE：范围模式

和对称模式类似，可以指定负的最小范围，但是可以通过lv_bar_set_start_value设置起始值，然后可以从这个起始值绘制指示器。

lv_bar_set_mode(obj1, LV_BAR_MODE_RANGE);
lv_bar_set_range(obj1, -100, 100);
lv_bar_set_start_value(obj1, -100, LV_ANIM_ON);
lv_bar_set_value(obj1, 100, LV_ANIM_ON);

 

 注意，lv_bar_set_start_value必须要在lv_bar_set_range之后设置，否则会无效。

3. 动画

在设置值是可以打开动画效果。

可以通过lv_obj_set_style_anim_time修改动画时间

    obj1 = lv_bar_create(lv_scr_act());
    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
    lv_bar_set_mode(obj1, LV_BAR_MODE_NORMAL);
    lv_obj_set_style_anim_time(obj1, 2000, LV_PART_MAIN);
    lv_bar_set_range(obj1, 0, 100);
    //lv_bar_set_start_value(obj1, -100, LV_ANIM_ON);
    //lv_bar_set_value(obj1, 0, LV_ANIM_ON);

    static lv_obj_t* btn1 = lv_btn_create(lv_scr_act());
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);
    lv_obj_add_event_cb(btn1, barBtnEventHandle, LV_EVENT_CLICKED, NULL);

static void barBtnEventHandle(lv_event_t* e)
{
    lv_event_code_t eventCode = lv_event_get_code(e);
    if (eventCode == LV_EVENT_CLICKED)
    {
        lv_bar_set_value(obj1, 50, LV_ANIM_ON);
    }
}

 

4. 样式

4.1 方向

当进度条的宽度大于等于高度时，水平方向。

lv_obj_set_size(obj1, 200, 200);

 

当进度条的宽度小于高度时，垂直方向。

lv_obj_set_size(obj1, 20, 200);

4.2 渐变色

lv_obj_set_style_bg_color(obj1, lv_color_hex(0xff0000), LV_PART_INDICATOR);
lv_obj_set_style_bg_grad_color(obj1, lv_color_hex(0x0000ff), LV_PART_INDICATOR);
lv_obj_set_style_bg_grad_dir(obj1, LV_GRAD_DIR_HOR, LV_PART_INDICATOR);
lv_bar_set_value(obj1, 100, LV_ANIM_ON);

4.3 增加边框

lv_obj_set_style_border_color(obj1, lv_color_hex(0xff00000), LV_PART_MAIN);
lv_obj_set_style_border_width(obj1, 2, LV_PART_MAIN);
lv_obj_set_style_pad_all(obj1, 6, LV_PART_MAIN);
lv_obj_set_style_radius(obj1, 12, LV_PART_MAIN);

4.4 滚动条方向

滚动条默认是从左向右变化，可以通过lv_obj_set_style_base_dir设置不同的方向。

lv_obj_set_style_base_dir(obj1, LV_BASE_DIR_RTL, LV_PART_MAIN);