网站开发如何模块化把网站做成微信小程序
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开始。
课后思考
-
怎么让进度条动起来？
设置进度条的值的时候
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对应的函数，在函数中改变进度条的值即可。 -
如何实现一个方形，颜色渐变的进度条
其实就是将两个官方示例结合起来,以下是颜色渐变的样式示例
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); // 设置颜色渐变方向