用户工具

站点工具


icore4tlvgl_25
银杏科技有限公司旗下技术文档发布平台
技术支持电话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 中。

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

四、列表弹出方向

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

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);           /* 设置弹出方向 */
}

五、示意标志

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

六、最大高度

下拉列表的最大高度可以通过 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)

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);
     }
}

十、事件

除通用事件外,下拉列表还发送以下特殊事件:

  • LV_EVENT_VALUE_CHANGED 选择新选项时发送。

以下键值由按钮处理:

  • LV_KEY_RIGHT / DOWN 选择下一个选项。
  • LV_KEY_LEFT / UP 选择上一个选项。
  • LY_KEY_ENTER 应用选定的选项(发送 LV_EVENT_VALUE_CHANGED 事件并关闭下拉列表)。

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);                  /* 设置回调函数 */
}
icore4tlvgl_25.txt · 最后更改: 2022/04/01 11:15 由 sean