ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 嵌入式/内核开发 > 嵌入式/内核开发 > 《LVGL开发指南 V1.0（G4电机开发板专用）》第十二章 下拉列表部件(lv_dropdown)

《LVGL开发指南 V1.0（G4电机开发板专用）》第十二章 下拉列表部件(lv_dropdown)

原创 嵌入式/内核开发 作者：正点原子 时间：2026-05-28 10:05:45 0 删除 编辑

第十二章 下拉列表部件(lv_dropdown)


       下拉列表部件常用于多选一的场景，其点击后可展开多个选项，用户可以从这些选项中选择一个，一旦选择好后，这些选项会自动收回。

       本章节将分为以下几个小节：

       12.1 下拉列表部件的组成

       12.2 下拉列表部件的相关知识

       12.3 下拉列表部件的API函数

       12.4 下拉列表部件的实验


        12.1 下拉列表部件的组成

       下拉列表部件由五个部分组成，示意图如下：


图12.1.1 下拉列表组成部分


       按钮部分：

       ① LV_PART_MAIN：按钮的主体背景；

       ② LV_PART_INDICATOR：指示器，例如上图向下的箭头。

       列表部分：

       ③ LV_PART_SELECTED：当前选中的选项；

       ④ LV_PART_SCROLLBAR：滚动条；

       ⑤ LV_PART_MAIN：列表主体背景。

       注意：用户需要设置上述组成部分的样式，需要先将按钮或列表相关的部分获取回来，关于部件样式设置的内容，请大家参考6.4.4章节。


        12.2 下拉列表部件的相关知识


       12.2.1 添加选项

       用户需要在下拉列表中添加选项，可以使用以下三种方法：

       ① 调用lv_dropdown_set_options函数添加选项，该函数如下所示：

lv_dropdown_set_options(dropdown, "First \n Second \n Third");

       在上述的函数中，我们通过字符串传递下拉列表选项，这些选项字符串之间通过‘\n’ 进行分隔。

       ② 调用lv_dropdown_add_option函数添加选项，该函数如下所示：

lv_dropdown_add_option(dropdown, "New option", pos);

       上述的函数只会添加一个选项，其形参pos表示添加的位置，注意：0表示列表最上面的位置，以此向下类推。

       ③ 调用lv_dropdown_set_static_options函数添加选项，该函数如下所示：

lv_dropdown_set_options_static(dropdown, options);

       上述函数所添加的是静态选项，在这种情况下，用户不能再使用lv_dropdown_add_option函数添加选项，否则有可能会出现问题。

       接下来，我们以简单示例来理解下拉列表的选项添加，示例代码如下所示：

void lv_mainstart(void)
{
    /* 创建一个下拉列表 */
    lv_obj_t* lv_ddlist1 = lv_dropdown_create(lv_scr_act());
    /* 方法一 添加多个选项（动态） */
    lv_dropdown_set_options(lv_ddlist1, "a\nb\nc\nd");
    lv_obj_set_pos(lv_ddlist1, 100, 100);
    /* 默认显示的选项 */
    lv_dropdown_set_selected(lv_ddlist1, 0);
 
    lv_obj_t* lv_ddlist2 = lv_dropdown_create(lv_scr_act());
    /* 方法二 添加单个选项 */
    lv_dropdown_add_option(lv_ddlist2, "0", 0);
    lv_dropdown_add_option(lv_ddlist2, "1", 1);
    lv_dropdown_add_option(lv_ddlist2, "2", 2);
    lv_dropdown_add_option(lv_ddlist2, "3", 3);
    /* 默认显示的选项 */
    lv_dropdown_set_selected(lv_ddlist2, 1);
    lv_obj_set_pos(lv_ddlist2, 300, 100);
 
    lv_obj_t* lv_ddlist3 = lv_dropdown_create(lv_scr_act());
    /* 方法三 添加多个选项（静态） */
    lv_dropdown_set_options_static (lv_ddlist3, "1");
    lv_obj_set_pos(lv_ddlist3, 500, 100);
}

       在上述源码中，我们分别使用了三种方法来添加选项，一般情况下，第一种方法用得较多，示例代码可以在PC模拟器中运行，效果图如下所示：


图12.2.1.1添加选项示例


       12.2.2 获取当前选中的选项

       当用户选中所需的选项之后，如果没有任何反馈，这将无法和其他板块进行交互，因此，我们需要在触发的事件回调中获取当前选中的选项索引和文本，相关函数如下：

lv_dropdown_get_selected(dropdown);     /* 获取选中的选项索引 */
lv_dropdown_get_selected_str(dropdown,buf,buf_size);/* 获取选项字符串，保存到buf */

       上述源码中，第一个函数用于获取选中的选项索引，第二个函数用于获取选中的选项文本，并将其保存到指定的buf中。


       12.2.3 设置列表展开方向

       在默认的情况下，当用户点击下拉列表后，其都是往下展开的，如果用户想修改列表展开的方向，可以调用以下函数：

lv_dropdown_set_dir(dropdown, LV_DIR_LEFT/RIGHT/UP/BOTTOM); /* 设置展开方向 */

       在上述函数中，第二个形参代表列表的展开方向，用户可以选择上、下、左、右四个方向。

       接下来，我们以简单示例来理解下拉列表的展开方向，示例代码如下所示：

void lv_mainstart(void)
{
    /* 创建一个下拉列表 */
    lv_obj_t* lv_ddlist1 = lv_dropdown_create(lv_scr_act());
    /*添加下拉列表项 */
    lv_dropdown_set_options(lv_ddlist1, "a\nb\nc\nd");
    lv_obj_set_pos(lv_ddlist1, 100, 100);
    /* 默认显示的下拉列表项 */
    lv_dropdown_set_selected(lv_ddlist1, 0);
 
    lv_obj_t* lv_ddlist2 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_dir(lv_ddlist2,LV_DIR_LEFT); /* 设置为左侧展开 */
    /*添加下拉列表项 */
    lv_dropdown_add_option(lv_ddlist2, "0", 0);
    lv_dropdown_add_option(lv_ddlist2, "1", 1);
    lv_dropdown_add_option(lv_ddlist2, "2", 2);
    lv_dropdown_add_option(lv_ddlist2, "3", 3);
    /* 默认显示的下拉列表项 */
    lv_dropdown_set_selected(lv_ddlist2, 1);
    lv_obj_set_pos(lv_ddlist2, 300, 100);
 
    lv_obj_t* lv_ddlist3 = lv_dropdown_create(lv_scr_act());
    /*添加下拉列表项 */
    lv_dropdown_set_options_static(lv_ddlist3, "1");
    lv_obj_set_pos(lv_ddlist3, 500, 100);
}

       由上述源码可知，我们设置了第二个下拉列表（lv_ddlist2）的展开方向为LV_DIR_LEFT，即向左侧展开，示例代码可以在PC模拟器中运行，效果图如下所示：


图12.2.3.1 设置下拉列表的方向


       12.2.4 设置下拉列表图标

       下拉列表的图标箭头默认是向下的，如果用户修改了列表的展开方向，此时的箭头方向和展开方向就对应不上了。为了解决上述的问题，LVGL提供了相关的图标设置函数：

lv_dropdown_set_symbol(dropdown，LV_SYMBOL_…);   /* 设置图标 */

       在上述函数中，第二个形参代表的是图标，一般情况下，我们调用内部的字体图标即可满足需求，修改后的图标如下图所示：


图12.2.4.1设置下拉列表的图标


       12.2.5 设置列表常显文本

       在默认情况下，当用户选中某个选项后，该选项的文本会更新到列表的头部，示意图如下：


图12.2.5.1默认显示


       在上图中， 当用户选中第一个选项，其文本内容（a）将更新到列表头部，如果用户需要设置列表头部的文本为固定内容，可以调用lv_dropdown_set_text函数，示例源码如下： 

LV_FONT_DECLARE(myFont14)
 
void lv_mainstart(void)
{
    /* 创建一个下拉列表 */
lv_obj_t* lv_ddlist1 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_text(lv_ddlist1, "dropdown");
    /*添加下拉列表项 */
    lv_dropdown_set_options(lv_ddlist1, "a\nb\nc\nd");
    lv_obj_set_pos(lv_ddlist1, 100, 100);
    /* 默认显示哪一个下拉列表项 */
    lv_dropdown_set_selected(lv_ddlist1, 0);
    lv_obj_t* lv_ddlist2 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_dir(lv_ddlist2,LV_DIR_LEFT);/* 设置下拉方向 */
    /*添加下拉列表项 */
    lv_dropdown_add_option(lv_ddlist2, "0", 0);
    lv_dropdown_add_option(lv_ddlist2, "1", 1);
    lv_dropdown_add_option(lv_ddlist2, "2", 2);
    lv_dropdown_add_option(lv_ddlist2, "3", 3);
    /* 默认显示哪一个下拉列表项 */
    lv_dropdown_set_selected(lv_ddlist2, 1);
    lv_obj_set_pos(lv_ddlist2, 300, 100);
    lv_obj_t* lv_ddlist3 = lv_dropdown_create(lv_scr_act());
    /*添加下拉列表项 */
    lv_dropdown_set_options_static(lv_ddlist3, "1");
    lv_obj_set_pos(lv_ddlist3, 500, 100);
}

       在上述源码中，我们调用了lv_dropdown_set_tex函数，把第一个列表（lv_ddlist1）的头部文本固定为“dropdown”。示例代码可以在PC模拟器中运行，效果图如下所示：


12.2.5.2 设置下拉列表常显文本


       12.2.6 打开、开闭下拉列表

       当用户需要直接打开或者关闭下拉列表时，可以直接调用以下函数：

lv_dropdown_open(dropdown);  /* 打开下拉列表 */
lv_dropdown_close(dropdown); /* 关闭下拉列表 */


        12.3 下拉列表部件的API函数

       LVGL官方提供了一些与下拉列表部件相关API，如下表所示：


表12.3.1 下拉列表部件相关的API函数


       接下来，我们介绍LVGL下拉列表部件常用的API函数：

       1. lv_dropdown_create函数

       创建下拉列表，其函数原型如下所示：

lv_obj_t *lv_ dropdown _create(lv_obj_t *parent);

       该函数的形参描述如表12.3.2所示：


表12.3.2 lv_dropdown_create函数形参描述


       返回值：指向创建的下拉列表的指针。

       2. lv_dropdown_set_text函数

       设置下拉列表按钮的文本（常显文本），其函数原型如下所示：

void lv_dropdown_set_text(lv_obj_t *obj, const char *txt);

       该函数的形参描述如表12.3.3所示：


表12.3.3 lv_dropdown_set_text函数形参描述


       返回值：无。

       3. lv_dropdown_set_options函数

       添加选项（动态），其函数原型如下所示：

void lv_dropdown_set_options(lv_obj_t *obj, const char *options);

       该函数的形参描述如表12.3.4所示：


表12.3.4 lv_dropdown_set_options函数形参描述


       返回值：无。

       4. lv_dropdown_set_options_static函数

       添加选项（静态），其函数原型如下所示：

void lv_dropdown_set_options_static(lv_obj_t *obj, const char * options);

       该函数的形参描述如表12.3.5所示：


表12.3.5 lv_dropdown_set_options_static函数形参描述


       返回值：无。

       5. lv_dropdown_add_option函数

       添加单个选项，其函数原型如下所示：

void lv_dropdown_add_option(lv_obj_t *obj, constchar *option, uint32_t pos);

       该函数的形参描述如表12.3.6所示：


表12.3.6 lv_dropdown_add_option函数形参描述


       返回值：无。

       7. lv_dropdown_set_selected函数

       设置当前所选项，其函数原型如下所示：

void lv_dropdown_set_selected(lv_obj_t *obj, uint16_t sel_opt);

       该函数的形参描述如表12.3.7所示：


表12.3.7 lv_dropdown_set_selected函数形参描述


       返回值：无。

       8. lv_dropdown_set_dir函数

       设置展开方向，其函数原型如下所示：

oid lv_dropdown_set_dir(lv_obj_t *obj, lv_dropdown_dir_t dir);

       该函数的形参描述如表12.3.9所示：


表12.3.9 lv_dropdown_set_dir函数形参描述


       返回值：无。

       9. lv_dropdown_set_symbol函数

       设置图标，其函数原型如下所示：

void lv_dropdown_set_symbol(lv_obj_t *obj, const char*symbol);

       该函数的形参描述如表12.3.10所示：


表12.3.10 lv_dropdown_set_symbol函数形参描述


       返回值：无。


        12.4 下拉列表部件的实验


       12.4.1 硬件设计


       1. 例程功能

       本实验主要测试下拉列表部件API函数的使用，实验现象：开机后，屏幕上显示一个下拉列表，用户可通过KEY0、KEY1切换当前选项，通过KEY2选中相应的选项。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程9 dropdown (下拉列表)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。


       12.4.2 软件设计


       12.4.2.1 程序流程图

       本实验的程序流程图，如下图12.4.2.1.1所示：


图12.4.2.1.1 下拉列表部件实验流程图


       12.4.2.2 程序解析

       关于LVGL的用户代码，我们都是在lv_mainstart.c文件中编写的，本实验的源码如下所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    g = lv_group_create();                  /* 创建按键组 */
    lv_indev_set_group(indev_keypad, g);    /* 设置按键组 */
    lv_example_dropdown();                  /* 下拉列表 */
}
/**************************** 第一部分 结束 ****************************/
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  下拉列表
 * @param  无
 * @return 无
 */
static void lv_example_dropdown(void)
{
/* 定义并创建下拉列表 */
lv_obj_t* dropdown = lv_dropdown_create(lv_scr_act()); 
/* 添加下拉列表选项 */
lv_dropdown_set_options_static(dropdown, options);  
/* 设置下拉列表字体 */ 
    lv_obj_set_style_text_font(dropdown, &lv_font_montserrat_22, LV_PART_MAIN); 
    /* 设置下拉列表宽度 */
lv_obj_set_width(dropdown, 150);
/* 设置下拉列表位置 */
    lv_obj_align(dropdown, LV_ALIGN_CENTER, 0, 0);            
 
/* 定义并创建标签 */
label = lv_label_create(lv_scr_act());  
/* 设置标签表字体 */
lv_obj_set_style_text_font(label, &lv_font_montserrat_22, LV_PART_MAIN); 
/* 设置标签宽度 */ 
lv_obj_set_width(label, 150);  
/* 设置标签位置 */
lv_obj_align_to(label, dropdown, LV_ALIGN_OUT_TOP_MID, 25, 
-scr_act_height() / 8);   
/* 设置标签文本 */   
lv_label_set_text(label, "option 1");  
/* 添加下拉列表回调 */
lv_obj_add_event_cb(dropdown, dropdown_event_cb, 
LV_EVENT_VALUE_CHANGED, NULL);         
/* 添加到按键组 */
    lv_group_add_obj(g, dropdown);    
}
 
/**
 * @brief  下拉列表事件回调
 * @param  无
 * @return 无
 */
static void dropdown_event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);          /* 获取事件类型 */
    lv_obj_t *dropdown = lv_event_get_target(e);          /* 获取触发源 */
    if (LV_EVENT_VALUE_CHANGED == code)                   /* 判断事件类型 */
    {
        char buf[10];
/* 获取当前选项文本 */
        lv_dropdown_get_selected_str(dropdown, buf, sizeof(buf));   
        lv_label_set_text(label, buf);                    /* 显示当前选项文本 */
    }
}
/**************************** 第二部分 结束 ****************************/

       上述源码可分为以下三个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了下拉列表示例函数；

       ②下拉列表和标签。我们创建下拉列表和标签部件，然后在事件的回调函数中将列表的所选项文本获取回来，更新到标签中。


       12.4.3 下载验证

       把工程编译并下载到我们的开发板中， 运行效果如图12.4.3.1所示：


图12.4.3.1 下拉列表部件实验


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70040860/viewspace-3172430/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： 《LVGL开发指南 V1.0（G4电机开发板专用）》第十一章 复选框部件(lv_checkbox)
下一篇： 《LVGL开发指南 V1.0（G4电机开发板专用）》第十三章 图片部件(lv_img)
请登录后发表评论 登录
全部评论
正点原子

注册时间：2024-08-30

  • 博文量
    588
  • 访问量
    763892

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593