如何用LVGL bar做一个方形进度条

用模拟器演示 方形进度条

1、先创建一个bar控件

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

2、增加一些样式

static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, LV_STATE_DEFAULT, 0);//这里的参数0意思是进度条的指示器样式弧度为零，也就是直角。
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_YELLOW);//进度条背景颜色
lv_style_set_border_width(&style, LV_STATE_DEFAULT, 2); //进度条背景线条宽度
lv_style_set_border_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLACK);//颜色

lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 5);//指示器到背景四周的距离
lv_style_set_pad_bottom(&style, LV_STATE_DEFAULT, 5);
lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 5);
lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 5);


lv_obj_add_style(bar1, LV_BAR_TYPE_NORMAL, &style);//样式加到进度条中
lv_obj_set_size(bar, 300, 50); //进度条大小
lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 0, 0);// 设置对象对齐，中心对齐Y轴偏移10

背景演示结果

3、创建一个任务以改变进度条指示器

lv_task_create(bar_anim, 100, LV_TASK_PRIO_HIGH, bar1);

4、bar_anim实现

void bar_anim(lv_task_t* t)
{
  static lv_style_t styles;	
  static uint32_t x = 0;				// 静态变量Bar可变值
  lv_obj_t* bar = t->user_data;		// 从任务参数中获取bar对象
  
  lv_bar_set_range(bar, 0, 100);  //lv_bar_set_range(bar, min, max)进度条范围
  
  lv_obj_set_style_local_radius(bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, 0); /*Add a local style*/
  lv_obj_set_style_local_bg_color(bar, LV_BAR_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_RED);

  static char buf[64];
  lv_snprintf(buf, sizeof(buf), "%d / %d", x, lv_bar_get_max_value(bar));// 创建字符串
  lv_obj_set_style_local_value_str(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, buf);// 显示字符串

  lv_bar_set_value(bar, x, LV_ANIM_ON); // 设置值，关闭动画 lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF)
  lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 10, 20);	// 重新设置对齐
  x++;
  if (x > lv_bar_get_max_value(bar)) 
    x = 0; // 超过范围，从0开始
}

进度条演示结果

完。