一. LVGL GUI进度条控件的概念

首先我们来看下进度条控件的模样，有一个直观的认识！

相信你只要想做什么炫酷的进度条都能搞出来！

进度条控件类似于弧控件，也有一个背景跟指示器，背景是指进度条控件的宽度值，指示器是当前进度条在什么位置的值！

二. LVGL GUI进度条小部件和样式

进度条的主要部分被称为 LV_BAR_PART_BG ，它使用典型的背景样式属性。

LV_BAR_PART_INDIC 是一个虚拟部件，还使用了所有典型的背景属性。默认情况下，指示器的最大尺寸与背景的尺寸相同，但是在其中设置正的填充值 LV_BAR_PART_BG 将使指示器变小。 （负值会使它变大）如果在指标上使用了值样式属性，则将根据指标的当前大小来计算对齐方式。例如，中心对齐的值始终显示在指示器的中间，而不管其当前大小如何。

我们来看写下代码，设置背景为黑色，前景指示器为橙色（丑点无所谓，就是验证嘛）

void lvgl_bar_style_test(void)

{

lv_obj_t* bar1 = lv_bar_create(lv_scr_act(), NULL);

lv_obj_set_size(bar1, 200, 20);

lv_obj_align(bar1, NULL, LV_ALIGN_CENTER, 0, 0);

lv_bar_set_value(bar1, 50, LV_ANIM_OFF);

lv_obj_set_style_local_bg_color(bar1, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_COLOR_BLACK);

lv_obj_set_style_local_bg_color(bar1, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_ORANGE);

}

效果图：

三. LVGL GU进度条控件的使用

1. 值跟范围(Value and range)

可以通过这个函数来设置进度条范围lv_bar_set_range(bar, min, max)，默认范围是[1:100]

可以通过这个函数来设置进度条的值lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF)

可以通过这个函数来设置进度条的起始值lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)

其中设置值会有动画是否开始，下面我们来写代码验证下：

void lvgl_bar_rang_value_test(void)

{

lv_obj_t* bar1 = lv_bar_create(lv_scr_act(), NULL);

lv_obj_set_size(bar1, 200, 20);

lv_bar_set_range(bar1, 0, 10000);

lv_obj_set_pos(bar1, 50, 300);

lv_bar_set_value(bar1, 9000, LV_ANIM_OFF);

lv_obj_t* bar2 = lv_bar_create(lv_scr_act(), NULL);

lv_obj_set_size(bar2, 200, 20);

lv_bar_set_range(bar2, 0, 10000);

lv_obj_set_pos(bar2, 300, 300);

lv_bar_set_anim_time(bar2, 5000); /* 填充满的时间 */

lv_bar_set_value(bar2, 9000, LV_ANIM_ON);

}

我们创建了两个进度条，范围都是0:10000，我们都设置值为9000，但是区别是进度条1动画关闭，进度条2动画开启，并且5s才达到我们要设置的9000，这里要注意一点：

lv_bar_set_anim_time一定一定要在lv_bar_set_value之前调用，否则会按照默认的动画时间填充，而不是你预期的填充时间

2. 模式(Modes)

如果启用，则可以将条形对称地绘制为零（从零开始，从左到右绘制） 。用这个函数lv_bar_set_type(bar, LV_BAR_TYPE_SYMMETRICAL)（不知所云？？？？）

3. 事件(Events)

控件只有普通的event，没有特殊的，所以这里不做说明，去看Event的文章

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓