用GUI做一个下拉列表吧，LVGL『Drop-down list下拉列表控件』介绍

原创专注于无线通信的蓬勃 2021-02-27 08:22

【有奖直播】深入学习Microchip时钟和全新单片机方案 泰克精选产品限时双重优惠

一. LVGL GUI下拉列表控件的概念

下拉列表允许用户从列表中选择一个值。下拉列表默认情况下处于关闭状态，并显示单个值或预定义的文本。激活后（通过单击下拉列表），将创建一个列表，用户可以从中选择一个选项。当用户选择新值时，该列表将被删除。

二. LVGL GUI下拉列表小部件和样式

调用下拉列表的主要部分， LV_DROPDOWN_PART_MAIN 它是一个简单的 lv_obj 对象。它使用所有典型的背景属性。按下，聚焦，编辑等阶梯也照常应用。
单击主对象时创建的列表是 Page。它的背景部分可以被引用， LV_DROPDOWN_PART_LIST 并为矩形本身使用所有典型的背景属性，并为选项使用文本属性。要调整选项之间的间距，请使用
text_line_space 样式属性。填充值可用于在边缘上留出一些空间。页面的可滚动部分被隐藏，其样式始终为空（透明，无填充）。
滚动条可以被引用 LV_DROPDOWN_PART_SCRLBAR 并使用所有典型的背景属性。
可以 LV_DROPDOWN_PART_SELECTED 使用所有典型的背景属性引用并使用所选的选项。它将以其默认
状态在所选选项上绘制一个矩形，并在按下状态下在被按下的选项上绘制一个矩形

三. LVGL GUI下拉列表控件的使用

1. 设置选项(Set options)

有集中方法来设置下拉列表中的选项：

lv_dropdown_set_options(dropdown, options)
lv_dropdown_add_option(dropdown, "New option", pos)

用这个函数lv_dropdown_set_selected来设置默认的选择的选项

我们写一个程序创建3个下拉列表，第一个用lv_dropdown_set_options这种方法，第二个用这个方法lv_dropdown_add_option，第三个默认不添加，自己看效果体验下

void lvgl_dlist_set_option_test(void)
{
    lv_obj_t* ddlist1 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist1, "0\n1\n2\n3");
    lv_obj_set_pos(ddlist1,100,100);
    lv_dropdown_set_selected(ddlist1,0);

    lv_obj_t* ddlist2 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_add_option(ddlist2,"0",0);
    lv_dropdown_add_option(ddlist2, "1", 1);
    lv_dropdown_add_option(ddlist2, "2", 2);
    lv_dropdown_add_option(ddlist2, "3", 3);
    lv_dropdown_set_selected(ddlist2, 1);
    lv_obj_set_pos(ddlist2, 300, 100);

    lv_obj_t* ddlist3 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_obj_set_pos(ddlist3, 500, 100);
}

我们来实验下效果：

2. 获取选择的选项(Get selected option)

用这个函数lv_dropdown_get_selected_str(dropdown, buf, buf_size)来获取选择的选项，一般跟event配合来使用，在event的时候我们再来写代码

3. 方向(Direction)

下拉列表的方向，用这个函数设置lv_dropdown_set_dir(dropdown, LV_DROPDOWN_DIR_LEFT/RIGHT/UP/DOWN)

我们来体验下：

void lvgl_dlist_direct_test(void)
{
    lv_obj_t* ddlist1 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_obj_set_pos(ddlist1, 100, 300);
    lv_dropdown_set_dir(ddlist1, LV_DROPDOWN_DIR_DOWN);

    lv_obj_t* ddlist2 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_obj_set_pos(ddlist2, 300, 300);
    lv_dropdown_set_dir(ddlist2, LV_DROPDOWN_DIR_UP);

    lv_obj_t* ddlist3 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_obj_set_pos(ddlist3, 500, 300);
    lv_dropdown_set_dir(ddlist3, LV_DROPDOWN_DIR_LEFT);

    lv_obj_t* ddlist4 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_obj_set_pos(ddlist4, 700, 300);
    lv_dropdown_set_dir(ddlist4, LV_DROPDOWN_DIR_RIGHT);
}

4. 符号(Symbol)

设置下拉列表的符号，如图红框位置就是设置的符号，用这个函数设置lv_dropdown_set_symbol(ddlist3, LV_SYMBOL_LEFT);

对应的代码如下：

void lvgl_dlist_symbol_test(void)
{
    lv_obj_t* ddlist1 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist1, "0\n1\n2\n3");
    lv_obj_set_pos(ddlist1, 100, 300);
    lv_dropdown_set_dir(ddlist1, LV_DROPDOWN_DIR_DOWN);
    lv_dropdown_set_symbol(ddlist1, LV_SYMBOL_DOWN);

    lv_obj_t* ddlist2 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist2, "0\n1\n2\n3");
    lv_obj_set_pos(ddlist2, 300, 300);
    lv_dropdown_set_dir(ddlist2, LV_DROPDOWN_DIR_UP);
    lv_dropdown_set_symbol(ddlist2, LV_SYMBOL_UP);

    lv_obj_t* ddlist3 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist3, "0\n1\n2\n3");
    lv_obj_set_pos(ddlist3, 500, 300);
    lv_dropdown_set_dir(ddlist3, LV_DROPDOWN_DIR_LEFT);
    lv_dropdown_set_symbol(ddlist3, LV_SYMBOL_LEFT);

    lv_obj_t* ddlist4 = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist4, "0\n1\n2\n3");
    lv_obj_set_pos(ddlist4, 700, 300);
    lv_dropdown_set_dir(ddlist4, LV_DROPDOWN_DIR_RIGHT);
    lv_dropdown_set_symbol(ddlist4, LV_SYMBOL_RIGHT);
}

5. 最大高度(Maximum height)

通过这个函数来设置lv_dropdown_set_max_height(dropdown, height)

6. 显示选择(Show selected)

主要部分可以显示所选选项或静态文本。可以用这个函数lv_dropdown_set_show_selected(sropdown, true/false)设置

7. 动画时间(Animation time)

其实在最新版本中，我并没有找到这个函数

8. 手动开启/关闭(Manually open/close)

用这个函数lv_dropdown_open/close(dropdown, LV_ANIM_ON/OFF)打开跟关闭

9. 事件(Event)

除了基本的事件外，我们来看下这个当选择值改变的时候产生的事件

LV_EVENT_VALUE_CHANGED - Sent when the new option is selected.

我们来看下程序

static void droup_list_event_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        char buf[32];
        lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
        printf("Option: %s\n", buf);
    }
}

void lvgl_drop_list_test1(void)
{

    /*Create a normal drop down list*/
    lv_obj_t* ddlist = lv_dropdown_create(lv_scr_act(), NULL);
    lv_dropdown_set_options(ddlist, "Apple\n"
        "Banana\n"
        "Orange\n"
        "Melon\n"
        "Grape\n"
        "Raspberry");

    lv_obj_align(ddlist, NULL, LV_ALIGN_IN_TOP_MID, 0, 20);
    lv_obj_set_event_cb(ddlist, droup_list_event_handler);
}

看下效果图

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

登录阅读全文



免责声明：该内容由专栏作者授权发布或作者转载，目的在于传递更多信息，并不代表本网赞同其观点，本站亦不保证或承诺内容真实性等。若内容或图片侵犯您的权益，请及时联系本站删除。侵权投诉联系： nick.zong@aspencore.com！

专注于无线通信的蓬勃朝气蓬勃——不积跬步无以至千里，不积小流无以成江海

进入专栏