LVGL『Roller滚轮控件』介绍

一. LVGL GUI滚轮控件的概念

Roller 允许您通过滚动简单地从多个选项中选择一个选项。

二. LVGL GUI滚轮小部件和样式

滚轮的主要部分称为 LV_ROLLER_PART_BG 。它是一个矩形，并使用所有典型的背景属性。Roller标签的样式继承自背景的文本样式属性。要调整选项之间的间距，请使用 text_line_space 样式属
性。该填充样式属性设置两侧的空间。中间的选定选项可通过 LV_ROLLER_PART_SELECTED 虚拟小部件引用。除了典型的背景属性外，它还
使用文本属性来更改所选区域中文本的外观。

三. LVGL GUI滚轮控件的使用

1. 设置选项(Set options)

通过这个函数来设置滚动条的选项lv_roller_set_options(roller, options, LV_ROLLER_MODE_NORMAL/INFINITE)

通过这个函数来设置选择的选项lv_roller_set_selected(roller, id, LV_ANIM_ON/OFF)

写个程序验证下：可以看到id5就是June

void lvgl_roller_set_option_test(void)
{
    lv_obj_t* roller1 = lv_roller_create(lv_scr_act(), NULL);
    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_align(roller1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_roller_set_selected(roller1, 5, LV_ANIM_ON);
}

2. 获取当前选项(Get selected option)

用这个函数来获取当前选项的ID，lv_roller_get_selected(roller)

用这个选项来获取当前选项的文本字符串，lv_roller_get_selected_str(roller, buf, buf_size)

此部分我们不写代码了，跟Event一起写！

3. 对齐选项(Align the options)

用这个函数来设置选项的对齐方式lv_roller_set_align(roller, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT)

4. 可见行(Visible rows)

用这个函数来设置滚轮控件显示的行数lv_roller_set_visible_row_count(roller, num)

我们来写一个测试一下，创建两个滚轮控件，一个是默认的，一个设置为可见10行

void lvgl_roller_visible_raw_test(void)
{
    lv_obj_t* roller1 = lv_roller_create(lv_scr_act(), NULL);
    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_align(roller1, NULL, LV_ALIGN_CENTER, -100, -200);

    lv_obj_t* roller2 = lv_roller_create(lv_scr_act(), NULL);
    lv_roller_set_options(roller2,
        "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_align(roller2, NULL, LV_ALIGN_CENTER, 100, -200);
    lv_roller_set_visible_row_count(roller2,10);
}

5. 动画时间(Animation time)

用这个函数来设置动画时间lv_roller_set_anim_time(roller, anim_time)

6. 事件(Event)

除了通用事件外，滚轮控件还有以下特殊事件

LV_EVENT_VALUE_CHANGED sent when a new option is selected

我们写个程序结合获取当前选项来看下

static void roller_event_test_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        char buf[32];
        lv_roller_get_selected_str(obj, buf, sizeof(buf));
        printf("Selected month: ID:%d Text:%s\n", lv_roller_get_selected(obj), buf);
    }
}


void lvgl_roller_event_test(void)
{
    lv_obj_t* roller1 = lv_roller_create(lv_scr_act(), NULL);
    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, 4);
    lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(roller1, roller_event_test_handler);
}

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓