|  **银杏科技有限公司旗下技术文档发布平台**  ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^  版本  ^  日期  ^  作者  ^  修改内容  ^
|  V1.0  |  2020-12-24  |  yang  |  初次建立  | 

===== 实验二十五：lv_dropdown下拉列表 =====

==== 一、下拉列表 ====

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

**LV_DROPDOWN_PART_MAIN** 是下拉列表的主要部分，它是一个简单的 **lv_obj** 对象，它使用所有典型的背景属性，按下、聚焦、编辑等也照常应用。

单击下拉列表主对象时创建的列表是一个 **Page** 对象。它的背景部分可以被 **LV_DROPDOWN_PART_LIST** 引用，为矩形本身使用所有典型的背景属性，并为选项使用文本属性。要调整选项之间的间距，请使用**text_line_space** 样式属性。填充值可用于在边缘上留出一些空间。

页面的可滚动部分被隐藏，其样式始终为空（透明，无填充）。滚动条可以被** LV_DROPDOWN_PART_SCRLBAR** 引用并使用所有典型的背景属性。

所选选项可以引用 **LV_DROPDOWN_PART_SELECTED** 并使用所有典型的背景属性引用并使用。它将以其默认状态在所选选项上绘制一个矩形，并在按下状态下在被按下的选项上绘制一个矩形。

==== 二、设定选项 ====

这些选项作为字符串通过 **lv_dropdown_set_options(dropdown, options)** 传递到下拉列表。选项之间应用 **\n** 分隔。例如："**First\nSecond\nThird**"。该字符串将保存在下拉列表中，因此也可以保存在本地变量中。

函数 **lv_dropdown_add_option(dropdown, "New option", pos)** 插入一个新选项以建立 **pos** 索引。
为了节省内存，这些选项也可以使用 **lv_dropdown_set_static_options(dropdown, options)** 设置静态（常量）字符串。在这种情况下，当下拉列表存在且 **lv_dropdown_add_option** 不能使用时，选项字符串应处于活动状态。

用户也可以通过命令 **lv_dropdown_set_selected(dropdown, id)** 来选择一个选项，其中 **id** 是选项的索引。 

==== 三、获取选择的选项 ====

使用函数 **lv_dropdown_get_selected(dropdown)** 可以获取当前选择的选项。它将返回所选选项的索引。
想要获取所选选项的名称可以使用函数 **lv_dropdown_get_selected_str(dropdown, buf, buf_size)** ，它将把名称复制到数组 **buf** 中。

<code c>
char buf[32];                                          /* 定义数组 */
lv_dropdown_get_selected_str(obj, buf, sizeof(buf));   /* 获取所选值名称 */
lv_label_set_text_fmt(label, "Selected: %s\n", buf);   /* 更新标签内容 */
</code>

==== 四、列表弹出方向 ====

弹出的列表可以在任何一侧创建。默认值 **LV_DROPDOWN_DOWN** 可以通过函数** lv_dropdown_set_dir(dropdown, LV_DROPDOWN_DIR_LEFT/RIGHT/UP/DOWN)** 进行修改。如果列表垂直于屏幕之外，它将与边缘对齐。

{{ :icore4t:icore4t_rtt_lvgl_25_1.gif?direct |}}

<code c>
void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                        /* 初始化lvgl2rtt */
	
	lv_obj_t * ddlist = lv_dropdown_create(lv_scr_act(), NULL);  /* 创建下拉列表 */
	lv_obj_set_size(ddlist, 100, 20);                            /* 设置尺寸 */
	lv_dropdown_set_options(ddlist, "Apple\n" "Banana\n" "Orange\n" "Melon\n" "Grape\n" "Raspberry");                                                        /* 设置选项内容 */
	lv_obj_align(ddlist, NULL, LV_ALIGN_CENTER, 0, -50);         /* 设置对齐方式 */
	lv_obj_set_event_cb(ddlist, event_handler);                  /* 设置回调函数 */
	lv_dropdown_set_dir(ddlist, LV_DROPDOWN_DIR_LEFT);           /* 设置弹出方向 */
}
</code>

==== 五、示意标志 ====

使用 **lv_dropdown_set_symbol(dropdown, LV_SYMBOL_...)** 可以将** sign**（通常是箭头）添加到下拉列表中。如果下拉列表的方向是 **LV_DROPDOWN_DIR_LEFT** ，**sign** 将显示在左侧，否则显示在右侧。

==== 六、最大高度 ====

下拉列表的最大高度可以通过 **lv_dropdown_set_max_height(dropdown, height)** 设置。默认情况下，下拉列表的高度为** 3/4** 屏幕垂直分辨率。

==== 七、显示所选 ====

下拉列表的主要部分可以显示所选选项或静态文本。可以使用函数 **lv_dropdown_set_show_selected(sropdown, true/false)** 来控制。

函数 **lv_dropdown_set_text(dropdown, "Text")** 则可以设置静态文本。不过仅保存静态文本的指针。 

==== 八、弹出时间 ====

下拉列表弹框的打开/关闭动画时间由 **lv_dropdown_set_anim_time(ddlist, anim_time)** 来调整。参数 **anim_time** 越小弹出速度越快，当参数为零表示没有弹出动画，直接显示列表框。

==== 九、手动控制 ====

列表弹框的弹出/关闭可以用命令 **lv_dropdown_open/close(dropdown)** 控制，例如弹出列表使用 **lv_dropdown_open(dropdown)** 。

{{ :icore4t:icore4t_rtt_lvgl_25_2.gif?direct |}}

<code c>
void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                       /* 初始化lvgl2rtt */
	
	lv_obj_t * ddlist = lv_dropdown_create(lv_scr_act(), NULL); /* 创建下拉列表 */
	lv_obj_set_size(ddlist, 100, 20);                           /* 设置尺寸 */
	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, event_handler);                 /* 设置回调函数 */

     while(1){
		lv_dropdown_open(ddlist);                           /* 打开列表 */
		rt_thread_mdelay(1000);
		lv_dropdown_close(ddlist);                          /* 关闭列表 */
		rt_thread_mdelay(1000);
     }
}
</code>

==== 十、事件 ====

除通用事件外，下拉列表还发送以下特殊事件：
  * **LV_EVENT_VALUE_CHANGED** 选择新选项时发送。

以下键值由按钮处理：
  * **LV_KEY_RIGHT / DOWN** 选择下一个选项。
  * **LV_KEY_LEFT / UP** 选择上一个选项。
  * **LY_KEY_ENTER** 应用选定的选项（发送 **LV_EVENT_VALUE_CHANGED** 事件并关闭下拉列表）。

{{ :icore4t:icore4t_rtt_lvgl_25_3.gif?direct |}}

<code c>
static void 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)); /* 获取所选值 */
		lv_label_set_text_fmt(label, "Selected: %s\n", buf); /* 更新标签内容 */
} }

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                        /* 初始化lvgl2rtt */
	
	label = lv_label_create(lv_scr_act(), NULL);                 /* 创建标签 */
	lv_obj_set_pos(label, 20, 20);                               /* 设置显示坐标 */
	lv_label_set_text(label, "no select");                       /* 设置初始内容 */
	
	lv_obj_t * ddlist = lv_dropdown_create(lv_scr_act(), NULL);  /* 创建下拉列表 */
	lv_obj_set_size(ddlist, 100, 20);                            /* 设置尺寸 */
	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, event_handler);                  /* 设置回调函数 */
}
</code>