LVGL-下拉列表部件 lv_dropdown
- ■ LVGL-下拉列表部件 lv_dropdown
- ■ 下拉列表部件的组成
- ■ 添加选项
- ■ 获取当前选中的选项
- ■ 设置列表展开方向
- ■ 设置下拉列表图标
- ■ 设置列表常显文本
- ■ 打开、开闭下拉列表
- ■ 下拉列表部件的 API 函数
■ LVGL-下拉列表部件 lv_dropdown
■ 下拉列表部件的组成
按钮部分:
① LV_PART_MAIN:按钮的主体背景;
② LV_PART_INDICATOR:指示器,例如上图向下的箭头。
列表部分:
③ LV_PART_SELECTED:当前选中的选项;
④ LV_PART_SCROLLBAR:滚动条;
⑤ LV_PART_MAIN:列表主体背景。 注意: 用户需要设置上述组成部分的样式,需要先将按钮或列表相关的部分获取回来。
■ 添加选项
lv_dropdown_set_options(dropdown, "First \n Second \n Third");
lv_dropdown_add_option(dropdown, "New option", pos); //其形参 pos 表示添加的位置, 注意: 0 表示列表最上面的位置,
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_dropdown_get_selected(dropdown)/* 获取选中的选项索引*/
lv_dropdown_get_selected_str(dropdown, buf, buf_size)/* 获取选项字符串,保存到指定的 buf 中。
■ 设置列表展开方向
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_dropdown_set_symbol(dropdown, LV_SYMBOL_…) /* 设置图标 */
■ 设置列表常显文本
lv_dropdown_set_text 函数,
在默认情况下,当用户选中某个选项后,该选项的文本会更新到列表的头部,示意图如下:
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_ddlist
}
在上述源码中,我们调用了 lv_dropdown_set_tex函数,把第一个列表( lv_ddlist1)的头部文本固定为“ dropdown”
■ 打开、开闭下拉列表
当用户需要直接打开或者关闭下拉列表时,可以直接调用以下函数
lv_dropdown_open(dropdown) /* 打开下拉列表 */
lv_dropdown_close(dropdown) /* 关闭下拉列表 */
■ 下拉列表部件的 API 函数
lv_dropdown_create() 创建下拉列表
lv_dropdown_set_text() 设置下拉列表按钮的文本(常显文本)
lv_dropdown_set_options() 添加选项(动态)
lv_dropdown_set_options_static() 添加选项(静态)
lv_dropdown_add_option() 添加单个选项
lv_dropdown_clear_options() 清除所有选项
lv_dropdown_set_selected() 设置当前所选项
lv_dropdown_set_dir() 设置展开方向
lv_dropdown_set_symbol() 设置图标
lv_dropdown_set_selected_highlight()设置当前选中的选项是否高亮
lv_dropdown_get_list() 获取下拉列表,以设置样式或进行其他修改
lv_dropdown_get_text() 获取下拉列表按钮的文本
lv_dropdown_get_options() 获取下拉列表的选项
lv_dropdown_get_selected() 获取所选选项的索引
lv_dropdown_get_option_cnt() 获取选项的总数
lv_dropdown_get_selected_str() 获取当前选中的选项文本
lv_dropdown_get_symbol() 获取图标
lv_dropdown_get_selected_highlight()判断当前选中的选项是否高亮
lv_dropdown_get_dir() 获取展开方向
lv_dropdown_open() 打开下拉列表
lv_dropdown_close() 关闭下拉列表