网站服务器安装教程视频核心关键词

LVGL学习笔记-----进度条控件(lv_bar)

@@author: 明月清了个风

@@date： 2025.7.10

⭐️关于按钮空间的一些笔记和课后思考的答案

进度条的创建

lv_obj_t * bar = lv_bar_create(lv_screen_active());lv_obj_set_size(bar, 200, 20); // 设置长宽，宽更大时就竖起来lv_bar_set_range(bar, 0, 100); // 设置进度条数值范围。lv_obj_center(bar);lv_bar_set_value(bar, 70, LV_ANIM_OFF);  //设置进度条的值
lv_obj_set_style_bg_color(bar, lv_color_hex(0xc3494b), LV_PART_MAIN);  // 设置主体的颜色lv_obj_set_style_bg_color(bar, lv_color_hex(0x66d252), LV_PART_INDICATOR); // 设置指示器颜色

指示器的默认指示方向从左向右，从下到上，默认范围0 \sim 100，如果设置了最小值大于最大值，那么绘图方向就会反过来。

进度条有三种模式

typedef enum {LV_BAR_MODE_NORMAL,LV_BAR_MODE_SYMMETRICAL,LV_BAR_MODE_RANGE
} lv_bar_mode_t;

LV_BAR_MODE_SYMMETRICAL能够创建一个两侧对称的进度条，并且进度条从0开始。

课后思考

1. 怎么让进度条动起来？

   设置进度条的值的时候 lv_bar_set_value(bar, 70, LV_ANIM_OFF);会开启进度条的动画，因此涉及动画效果的设置，如lv_obj_set_style_anim_duration(bar, 1000, 0);需要在设定值之前进行。

   也可以使用定时器lv_timer_create(my_timer, 1000, bar);,然后需要实现一个my_timer对应的函数，在函数中改变进度条的值即可。

2. 如何实现一个方形，颜色渐变的进度条

   其实就是将两个官方示例结合起来,以下是颜色渐变的样式示例

       lv_style_init(&style_indic);lv_style_set_radius(&style_indic, 0);lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));  // 设置渐变颜色lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);	// 设置颜色渐变方向