一、概述
1.1 Roller 简介
Roller 滚轮类似下拉列表，和下拉列表不同的是，滚轮有直接可见的几个选项，我们可以通过滚动滚轮中的列表来浏览并选择选项。
图 1. Roller
二、Roller 基础知识
2.1 Roller 样式
- LV_PART_MAIN 滚轮的背景使用了所有典型的背景属性和文本样式属性，可以通过 style_text_line_space 调整选项之间的间隔。当滚轮滚动并且没有完全停在一个选项上时，它将按照样式中指定的 anim_time 值 (ms) 自动滚动到前进方向最近的有效选项。
- LV_PART_SELECTED 滚轮的中间选中的选项。除了典型的背景属性之外，它还使用文本样式属性来更改所选区域中文本的外观。
图 2. Roller 样式
2.2 Roller 设置待选选项
可以通过函数 lv_roller_set_options(roller, options, LV_ROLLER_MODE_NORMAL/INFINITE) 设置 Roller 中的选项，选项之间要用 \n 分隔。例如："First\nSecond\nThird"。
上述函数最后一个入口参数为 Roller 的滚动模式选择，有如下两种：
- LV_ROLLER_MODE_NORMAL 是设置为正常模式（滚轮在选项结束时结束），即滚到下面最后一个选项后，只能向上往回滚，如图 3 所示。
- LV_ROLLER_MODE_INFINITE 是设置为无限模式（滚轮可以永远滚动），即所有选项像轮胎一样排成圈循环滚动，滚到下面最后一个选项后，可以继续向下滚到第一个选项，如图 4 所示。
图 3. LV_ROLLER_MODE_NORMAL
图 4. LV_ROLLER_MODE_INFINITE
2.3 Roller 设置 / 获取选中选项
可以使用 lv_roller_set_selected(roller, index, LV_ANIM_ON/OFF) 手动选中一个选项，其中 index 是选项的索引，选项从 0 开始索引。
使用函数 lv_roller_get_selected(roller) 获取所选中的选项的索引 index。
Roller 的可见行数可以通过函数 lv_roller_set_visible_row_count(roller, num) 进行设置。此函数会根据滚轮当前样式的高度（字体、行距、边框宽度等）进行调整。如果滚轮的字体、行距、边框宽度等发生变化，则需要再次调用此函数以重新进行调整。
例如，设置可见行为 7 行，效果如下。
图 5. Roller 可见行设置
三、 Roller 应用
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target(e);
if(code == LV_EVENT_VALUE_CHANGED) {
char buf[32];
lv_roller_get_selected_str(obj, buf, sizeof(buf));
LV_LOG_USER("Selected month: %s\n", buf);
}
}
/**
* An infinite roller with the name of the months
*/
void lv_example_roller_1(void)
{
lv_obj_t *roller1 = lv_roller_create(lv_scr_act());
lv_roller_set_options(roller1,
"January\n"
"February\n"
"March\n"
"April\n"
"May\n"
"June\n"
"July\n"
"August\n"
"September\n"
"October\n"
"November\n"
"December",
LV_ROLLER_MODE_INFINITE);
lv_roller_set_visible_row_count(roller1, 5);
lv_obj_center(roller1);lv_obj_add_event_cb(roller1, event_handler, LV_EVENT_ALL, NULL);
}
Roller 的简单应用如上，运行效果如下图所示。
图 6. Roller 应用一
static void mask_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);
static int16_t mask_top_id = -1;
static int16_t mask_bottom_id = -1;
if (code == LV_EVENT_COVER_CHECK) {
lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
} else if (code == LV_EVENT_DRAW_MAIN_BEGIN) {
/* add mask */
const lv_font_t * font = lv_obj_get_style_text_font(obj, LV_PART_MAIN);
lv_coord_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);
lv_coord_t font_h = lv_font_get_line_height(font);
lv_area_t roller_coords;
lv_obj_get_coords(obj, &roller_coords);
lv_area_t rect_area;
rect_area.x1 = roller_coords.x1;
rect_area.x2 = roller_coords.x2;
rect_area.y1 = roller_coords.y1;
rect_area.y2 = roller_coords.y1 + (lv_obj_get_height(obj) - font_h - line_space) / 2;
lv_draw_mask_fade_param_t * fade_mask_top = lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
lv_draw_mask_fade_init(fade_mask_top, &rect_area, LV_OPA_TRANSP, rect_area.y1, LV_OPA_COVER, rect_area.y2);
mask_top_id = lv_draw_mask_add(fade_mask_top, NULL);
rect_area.y1 = rect_area.y2 + font_h + line_space - 1;
rect_area.y2 = roller_coords.y2;
lv_draw_mask_fade_param_t * fade_mask_bottom =lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
lv_draw_mask_fade_init(fade_mask_bottom, &rect_area, LV_OPA_COVER, rect_area.y1, LV_OPA_TRANSP, rect_area.y2);
mask_bottom_id = lv_draw_mask_add(fade_mask_bottom, NULL);
} else if (code == LV_EVENT_DRAW_POST_END) {
lv_draw_mask_fade_param_t * fade_mask_top = lv_draw_mask_remove_id(mask_top_id);
lv_draw_mask_fade_param_t * fade_mask_bottom = lv_draw_mask_remove_id(mask_bottom_id);
lv_mem_buf_release(fade_mask_top);
lv_mem_buf_release(fade_mask_bottom);
lv_draw_mask_free_param(&fade_mask_top);
lv_draw_mask_free_param(&fade_mask_bottom);
mask_top_id = -1;
mask_bottom_id = -1;
}
}
/**
* Add an fade mask to roller.
*/
void lv_example_roller_3(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_black());
lv_style_set_text_color(&style, lv_color_white());
lv_style_set_border_width(&style, 0);
lv_style_set_pad_all(&style, 0);
lv_obj_add_style(lv_scr_act(), &style, 0);
lv_obj_t *roller1 = lv_roller_create(lv_scr_act());
lv_obj_add_style(roller1, &style, 0);
lv_obj_set_style_bg_opa(roller1, LV_OPA_TRANSP, LV_PART_SELECTED);
#if LV_FONT_MONTSERRAT_22
lv_obj_set_style_text_font(roller1, &lv_font_montserrat_22, LV_PART_SELECTED);
#endif
lv_roller_set_options(roller1,
"January\n"
"February\n"
"March\n"
"April\n"
"May\n"
"June\n"
"July\n"
"August\n"
"September\n"
"October\n"
"November\n"
"December",
LV_ROLLER_MODE_INFINITE);
lv_obj_center(roller1);
lv_roller_set_visible_row_count(roller1, 5);
lv_obj_add_event_cb(roller1, mask_event_cb, LV_EVENT_ALL, NULL);
}
还可以与蒙版一起应用，突出选中选项，效果如下。
图 7. Roller 应用二
四、参考资料
（1）LVGL 官方文档 ：