立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:下拉列表控件(lv_ddlist)

2020-3-29 11:09| 发布者: imliubo| 查看: 2582| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了容器控件(lv_cont),本节课带大家来学习一下下拉列表控件,相信大家对下拉列表肯定很熟悉了,比如我们想让用户选择几个固定的选项的时候,下拉列表 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了容器控件(lv_cont),本节课带大家来学习一下下拉列表控件,相信大家对下拉列表肯定很熟悉了,比如我们想让用户选择几个固定的选项的时候,下拉列表就很合适了!那么废话少说!

一 有图有真相

这里给大家展示一下下拉列表和上拉列表,其实就是列表内容的展示方向不同而已,当下拉列表的下面还有很多可展示区域时,就可以选择往下弹出选择界面,但是当没有足够的展示区域时,我们可以选择往上弹出选择界面。

二 代码分析
1. 下拉
static void ddlist_event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        char buf[32];
        lv_ddlist_get_selected_str(obj, buf, sizeof(buf));
        printf("Option: %s\n", buf);
    }
}

static void ddlist_test1(void)
{
    /*Create a drop down list*/
    lv_obj_t * ddlist = lv_ddlist_create(lv_scr_act(), NULL);
    lv_ddlist_set_options(ddlist, "Apple\n"
            "Banana\n"
            "Orange\n"
            "Melon\n"
            "Grape\n"
            "Raspberry");

    lv_ddlist_set_fix_width(ddlist, 150);
    lv_ddlist_set_draw_arrow(ddlist, true);
    lv_obj_align(ddlist, NULL, LV_ALIGN_IN_TOP_MID, 0, 20);
    lv_obj_set_event_cb(ddlist, ddlist_event_handler);
}
同样的这里我们创建了一个下拉列表的对象,那么创建完对象后,我们需要做什么呢?既然时下拉列表,那肯定要有下拉选项是不是?没错,就是添加我们的下拉列表选项,方法呢也很简单,我们使用lv_ddlist_set_options这个函数就可以,其中第二个参数就是我们要展示的选项,可以一次添加很多个,每个选项之间记得用 "\n" 隔开,就像上面的一样,"\n"就是我们的选项分隔符!然后lv_ddlist_set_fix_width这里其实是设置对象的宽度,当你的每一个选择内容比较多时,建议宽度设置的大一点。接下来lv_ddlist_set_draw_arrow这个函数就是设置是否绘制那个下拉提示的箭头,如果不绘制那个箭头,可能让人不会觉得那是一个下拉列表,所以这里还是建议大家记得绘制那个小箭头!然后就是对齐方式,这里我们设置的是顶部居中对齐,最后我们设置的一个回调函数,就是我们的下拉列表响应事件!我们可以通过lv_ddlist_get_selected_str这个API提取出每一个选项的字符串,然后方便我们执行对应的操作。
2.上拉
static void ddlist_test2(void)
{

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

    lv_ddlist_set_fix_width(ddlist, 150);
    lv_ddlist_set_fix_height(ddlist, 150);
    lv_ddlist_set_draw_arrow(ddlist, true);

    /* Enable auto-realign when the size changes.
     * It will keep the bottom of the ddlist fixed*/
    lv_obj_set_auto_realign(ddlist, true);

    /*It will be called automatically when the size changes*/
    lv_obj_align(ddlist, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, -20);
}
上拉其实基本与下拉一致,我们只不过是通过lv_obj_set_auto_realign这个函数启用了对象改变后的自动对齐,这样当这个下拉控件下面没有足够的显示区域,会自动将下拉改成上拉显示,当然你也可以不设置,那么就会出现一些选项没法展示出来,造成用户没法选择,大家可以实际去测试一下试试,这里为了营造底部没有足够的显示的区域所以采用的底部居中对齐。是不是很简单的就Get到了一个非常有用的控件呢?

OK,那么本节课先到这里,那么我们下节课学习仪表控件,我们下节课再见!




93

顶一下

刚表态过的朋友 (93 人)

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-11-23 22:17 , Processed in 0.016564 second(s), 17 queries .

返回顶部