使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第二十讲)

         这一期将讲解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);

下一期讲解其他控件使用。

本文章由威三学院出品

对课程感兴趣可以私信联系