目录
- 一、进度条
- 1、概述
- 2、方向
- 3、进度条的当前值和范围值
- 4、进度条模式
- 5、进度条事件
- 6、相关 API
- 二、例程
一、进度条
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); // 应用动画效果
}
}
![[C++] C++11详解 (五)function包装器、bind绑定](https://i-blog.csdnimg.cn/direct/638b1e31cd614a5a935e37161e05793c.png)
