这一期将讲解lvgl中进度条的使用，进度条部件有一个背景和一个指示器。指示器相对于背景的长度显示了进度条的当前值。如果部件的宽度小于其高度，就可以创建垂直的进度条。进度条的起始值和终止值都可以设置。将起始值更改为其取值范围内除最小值之外的其他值，会改变指示器的起始位置。
• LV_PART_MAIN：进度条的背景。它使用典型的背景样式属性。添加内边距会使指示器变小或变大。如果通过 LV_ANIM_ON 设置了相关值，那么 anim_time 样式属性会设置动画时间。
• LV_PART_INDICATOR：进度条的指示器；同样也使用所有典型的背景属性。
以下是进度条的实例图：
进度条的值与范围设置：
可以使用 lv_bar_set_value(bar, new_value, LV_ANIM_ON / OFF) 来设置一个新值。该值是在一个取值范围（最小值和最大值）内进行解读的，这个取值范围可以通过 lv_bar_set_range(bar, min, max) 来修改。默认的取值范围是 0 到 100，并且默认的绘制方向在水平模式下是从左到右，在垂直模式下是从下到上。如果最小值大于最大值，比如 100 到 0，那么绘制方向就会反转。 在函数 lv_bar_set_value() 中设置新值时，可以根据最后一个参数（LV_ANIM_ON/OFF）来决定是否带有动画效果
以下是利用GUI gudier对滑动条进行设置：
效果：进度条将从0开始加载到9000用时5s，并且展示动画效果。
以下是具体的代码：
//Write codes screen_1_bar_1
//创建进度条
ui->screen_1_bar_1 = lv_bar_create(ui->screen_1);
//设置进度条动画时间
lv_obj_set_style_anim_time(ui->screen_1_bar_1, 5000, 0);
//设置进度条模式
lv_bar_set_mode(ui->screen_1_bar_1, LV_BAR_MODE_NORMAL);
//设置进度条范围和当前值
lv_bar_set_range(ui->screen_1_bar_1, 0, 10000);
lv_bar_set_value(ui->screen_1_bar_1, 9000, LV_ANIM_ON);
//设置进度条位置和大小
lv_obj_set_pos(ui->screen_1_bar_1, 132, 199);
lv_obj_set_size(ui->screen_1_bar_1, 200, 20);
//Write style for screen_1_bar_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置进度条背景颜色（LV_PART_MAIN）部分
//设置进度条背景颜色透明度
lv_obj_set_style_bg_opa(ui->screen_1_bar_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置进度条的圆角半径
lv_obj_set_style_radius(ui->screen_1_bar_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影的宽度
lv_obj_set_style_shadow_width(ui->screen_1_bar_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影颜色为黑
lv_obj_set_style_shadow_color(ui->screen_1_bar_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置透明度不透明
lv_obj_set_style_shadow_opa(ui->screen_1_bar_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影扩展值为1
lv_obj_set_style_shadow_spread(ui->screen_1_bar_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置x轴偏移为1
lv_obj_set_style_shadow_ofs_x(ui->screen_1_bar_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置y轴偏移为1
lv_obj_set_style_shadow_ofs_y(ui->screen_1_bar_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style for screen_1_bar_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//设置进度条指示器部分样式（LV_PARTs_INDICATOR）
//设置进度条指示器部分的背景透明度为255
lv_obj_set_style_bg_opa(ui->screen_1_bar_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置进度条指示器的背景颜色为蓝色
lv_obj_set_style_bg_color(ui->screen_1_bar_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置渐变方向为LV_GRAD_DIR_NONE,没有渐变效果
lv_obj_set_style_bg_grad_dir(ui->screen_1_bar_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置圆角半径为10
lv_obj_set_style_radius(ui->screen_1_bar_1, 10, LV_PART_INDICATOR|LV_STATE_DEFAULT);
下一期讲解其他控件使用。
本文章由威三学社出品
对课程感兴趣可以私信联系