一、概述
1.1 Slider 简介
滑条控件看起来像是在进度条（Bar）上增加了一个可以调节的旋钮，使用时可以通过拖动旋钮来设置滑条的值。 与滑条（Bar）类似，Slider 可以是垂直的或水平的。
图 1. Slider
二、Slider 基础知识
2.1 Slider 样式
- LV_PART_MAIN 滑动条的背景，使用所有典型的背景样式属性。
- LV_PART_INDICATOR 显示滑动条当前状态的指示器，指示当前填充值，也使用所有典型的背景样式属性。
- LV_PART_KNOB 旋钮（可以是圆形或矩形），也使用所有典型的背景属性。默认情况下，旋钮是方形的（带有可选的圆角半径），边长等于滑动条的较小边。可以通过设置 padding 样式调整旋钮的大小，填充值也可以是不对称的。
图 2. Slider 样式
2.2 Slider 范围 & 填充值
设置滑动条的初始值可以通过函数 lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF) 实现，第三个入口参数选择更新设置值时是否开启动画效果，动画时间可由由样式的 anim_time 属性设置。
指定滑动条的范围（最小值、最大值）可以使用通过函数 lv_slider_set_range(slider, min, max) 实现。
2.3 Slider 模式
可以使用函数 lv_slider_set_mode(slider, LV_SLIDER_MODE_...) 设置滑条的模式，分别有以下几种：
- LV_SLIDER_MODE_NORMAL 是设置为普通模式，如前面图 1 所示。
- LV_SLIDER_MODE_SYMMETRICAL 这个模式下可以指定负的最小范围，但是只能从 0 值到当前值绘制指示器，如图 3 所示。
- LV_SLIDER_MODE_RANGE 在这个模式下也可以指定负的最小范围，这样滑动条的起始值可以不是 0，可以使用 lv_slider_set_left_value() 设置起始值，使用 lv_slider_set_value() 设置结束值，两侧如果不设置将使用默认值 0，要注意设置的起始值必须小于结束值，如图 4 所示。
图 3. LV_SLIDER_MODE_SYMMETRICAL
图 4. LV_SLIDER_MODE_RANGE
三、 Slider 应用
static void slider_test_event_cb(lv_event_t* e){
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t* obj = lv_event_get_target(e);
/*Provide some extra space for the value*/
if (code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
lv_coord_t* size = (lv_coord_t*)lv_event_get_param(e);
*size = LV_MAX(*size, 50);
}
else if (code == LV_EVENT_DRAW_PART_END) {
lv_obj_draw_part_dsc_t* dsc = (lv_obj_draw_part_dsc_t*)lv_event_get_param(e);
if (dsc->part == LV_PART_INDICATOR) {
char buf[16];
lv_snprintf(buf, sizeof(buf), "%d", lv_slider_get_value(obj));
lv_point_t label_size;
lv_txt_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
lv_area_t label_area;
label_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - label_size.x / 2;
label_area.x2 = label_area.x1 + label_size.x;
label_area.y2 = dsc->draw_area->y1 - 10;
label_area.y1 = label_area.y2 - label_size.y;
lv_draw_label_dsc_t label_draw_dsc;
lv_draw_label_dsc_init(&label_draw_dsc);
lv_draw_label(&label_area, dsc->clip_area, &label_draw_dsc, buf, NULL);
}
}
}
/**
* Show the current value when the slider is pressed by extending the drawer
*
*/
void my_slider_test(void)
{
/*Create a slider in the center of the display*/
lv_obj_t* slider;
slider = lv_slider_create(lv_scr_act());
lv_obj_center(slider);
lv_slider_set_mode(slider, LV_SLIDER_MODE_SYMMETRICAL);
lv_slider_set_range(slider, -100, 100);
lv_slider_set_value(slider, -37, LV_ANIM_OFF);
lv_obj_add_event_cb(slider, slider_test_event_cb, LV_EVENT_ALL, NULL);
lv_obj_refresh_ext_draw_size(slider);
}
Slider 的简单应用如上，运行效果如下图所示。
图 5. Slider 应用
四、参考资料
（1）LVGL 官方文档 ：
https://docs.lvgl.io/master/widgets/core/slider.html