LVGL_基础控件滚轮roller

LVGL_基础控件滚轮roller

1、创建滚轮roller控件

/* 创建一个 lv_roller 部件(对象) */
lv_obj_t * roller = lv_roller_create(lv_scr_act());    // 创建一个 lv_roller 部件(对象),他的父对象是活动屏幕对象

// 将部件(对象)添加到组，如果设置了默认组，这里可以省略，因为 lv_roller 是 LV_OBJ_CLASS_GROUP_DEF_TRUE
//lv_group_add_obj(g, roller);

//lv_roller_set_options(roller, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10", LV_ROLLER_MODE_NORMAL);   // 写法1：设置选项，索引从0开始
//lv_roller_set_options(roller, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10", LV_ROLLER_MODE_INFINITE); // 设置为可以无限滚动的模式
lv_roller_set_options(roller,
                      "1\n"
                      "2\n"
                      "3\n"
                      "4\n"
                      "5\n"
                      "6\n"
                      "7\n"
                      "8\n"
                      "9\n"
                      "10",
                      LV_ROLLER_MODE_NORMAL); // 写法2：设置选项(连续写两个双引号相当于将两者连起来，相当于上面的方法1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、创建为无限滚动的模式

lv_roller_set_options(roller, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10", LV_ROLLER_MODE_INFINITE); // 设置为可以无限滚动的模式
1

3、设置默认选中项（注意：选中项是从0开始的）

// 设置默认选中的选项
lv_roller_set_selected(roller, 3, LV_ANIM_ON);
1
2

4、设置显示的行数（5行）

// 设置可见的选项个数(行数)
// 如果滚轮的字体、行距、边框宽度等发生变化，则需要再次调用此函数以重新进行调整。
lv_roller_set_visible_row_count(roller, 5);
1
2
3

5、设置显示的高度

// 可见行也可以通过调整高度设置，但是一般不会这么做
// 正常是使用 lv_roller_set_visible_row_count 设置
lv_obj_set_height(roller, 200);
1
2
3

6、设置滚轮的字体

// 修改滚轮所使用的字体(英文)
lv_obj_set_style_text_font(roller, &lv_font_montserrat_22, LV_PART_MAIN);                 // 设置没有选中的选项的字体
lv_obj_set_style_text_font(roller, &lv_font_montserrat_22, LV_PART_SELECTED);             // 设置选中的选项的字体
1
2
3

7、设置滚轮显示汉字

// 修改滚轮所使用的字体(中文)
LV_FONT_DECLARE(lv_font_source_han_sans_bold_14);   // 声明字体，可以放到函数外部
lv_obj_set_style_text_font(roller, &lv_font_source_han_sans_bold_14, LV_PART_MAIN);                 // 设置没有选中的选项的字体
lv_obj_set_style_text_font(roller, &lv_font_source_han_sans_bold_14, LV_PART_SELECTED);             // 设置选中的选项的字体
lv_roller_set_options(roller, "一\n二\n三\n四\n五\n六\n七\n八\n九\n十", LV_ROLLER_MODE_NORMAL);     // 设置中文选项
1
2
3
4
5

8、改变选项中文字的位置

    // 改变选项中文字位置
//lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_LEFT, 0);   // 左对齐
lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_RIGHT, 0);  // 右对齐
//lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_CENTER, 0); // 居中对齐
//lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_AUTO, 0);   // 自动对齐
1
2
3
4
5

9、添加事件

// 添加事件
// 当我们滑动了滚轮中的选项列表时，会触发 LV_EVENT_VALUE_CHANGED 事件类型，这里接收所有的事件类型，在回调处理函数中再过滤处理
lv_obj_add_event_cb(roller, roller_event_handler, LV_EVENT_ALL, NULL);

// 通过其他部件选择选项
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_align_to(btn, roller, LV_ALIGN_OUT_TOP_MID, 0, -10);
lv_obj_add_event_cb(btn, btn_event_handler, LV_EVENT_CLICKED , roller);

// 通过其他部件选择
static void btn_event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *btn = lv_event_get_target(e);
    lv_obj_t *roller  = lv_event_get_user_data(e);


    if(code == LV_EVENT_CLICKED) {
        uint32_t sel_opt = lv_roller_get_selected(roller);          // 获取当前选项的索引(位置)
        uint32_t total_opt = lv_roller_get_option_cnt(roller) - 1;  // 获取当前选项的总数，因为索引从 0 开始算，所以减一用于判断最后的选项

        if (sel_opt == total_opt)   sel_opt = 0;
        else                        sel_opt += 1;

        lv_roller_set_selected(roller, sel_opt, LV_ANIM_ON);
        lv_event_send(roller, LV_EVENT_VALUE_CHANGED, 0);           // 向 roller 发送 LV_EVENT_VALUE_CHANGED 事件
    }
}


// 滚轮的事件回调处理函数
static void roller_event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *roller = lv_event_get_target(e);

    if (code == LV_EVENT_VALUE_CHANGED)
    {
        LV_LOG_USER("%d", lv_roller_get_selected(roller));             // 获取被选中的选项的索引值，从0开始
        char tmp_buf[8];
        lv_roller_get_selected_str(roller, tmp_buf, sizeof(tmp_buf));  // 获取被选中的选项的内容
        LV_LOG_USER("%s", tmp_buf);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

10、设置背景颜色

lv_obj_set_style_bg_color(roller,lv_color_hex(0xd35230),0);
1

11、设置选中项的背景颜色

lv_obj_set_style_bg_color(roller,lv_color_hex(0xF0F0F0),LV_PART_SELECTED);
1

12、设置选项之间的间隔

lv_obj_set_style_text_line_space(roller,50,0);
1