合宙Air724UG LuatOS-Air LVGL API控件--下拉框 (Dropdown)

下拉框 (Dropdown)

在显示选项过多时，可以通过下拉框收起多余选项。只为用户展示列表中的一项。

示例代码

-- 回调函数
event_handler = function(obj, event)
    if (event == lvgl.EVENT_VALUE_CHANGED) then
        print("Option:", lvgl.dropdown_get_symbol(obj))
    end
end
-- 创建下拉框
dd = lvgl.dropdown_create(lvgl.scr_act(), nil)
lvgl.dropdown_set_options(dd, [[Apple
Banana
Orange
Cherry
Grape
Raspberry
Melon
Orange
Lemon
Nuts]])
-- 设置对齐
lvgl.obj_align(dd, nil, lvgl.ALIGN_IN_TOP_MID, 0, 20)
lvgl.obj_set_event_cb(dd, event_handler)

创建

通过函数 dropdown_create 可以创建下拉列表控件。

dd = lvgl.dropdown_create(lvgl.scr_act(), nil)

添加选项

列表中的选项是通过 dropdown_set_options 添加的，通过传入一整个字符串设置的，选项之间是依靠换行符分割的，需要注意的是，如果使用 [[ ]] 这种方式表示字符串的话，左边不要留空白缩进。

lvgl.dropdown_set_options(dd, [[Apple
Banana
Orange
Cherry
Grape
Raspberry
Melon
Orange
Lemon
Nuts]])

设置完成后也可以向其中插入选项:

lvgl.dropdown_add_option(dd, "aa\nbb\ncc", 2)

设置

下拉框可以设置的选项有:

展开方向

列表展开方向的设置函数是 dropdown_set_dir，下面我们分别设置 上 下 左 右 四个方向来看下显示效果。
下拉框在上面展开

lvgl.dropdown_set_dir(dd, lvgl.DROPDOWN_DIR_UP)

下拉框在下面展开

lvgl.dropdown_set_dir(dd, lvgl.DROPDOWN_DIR_DOWN)

下拉框在左边展开

lvgl.dropdown_set_dir(dd, lvgl.DROPDOWN_DIR_LEFT)

下拉框在右边展开

lvgl.dropdown_set_dir(dd, lvgl.DROPDOWN_DIR_RIGHT)

小图标

下拉框旁边的小图标也是可以更改的，不光可以是向下拉的小箭头，有关符号的内容可以参考图片章节。

lvgl.dropdown_set_symbol(dd, "\xef\x80\x81")

我们可以看下其他部分小图标，完整部分参考图片章节。

sym = {
    "\xef\x80\x81",
    "\xef\x80\x88",
    "\xef\x80\x8b",
    "\xef\x80\x8c",
    "\xef\x80\x8d",
    "\xef\x80\x91",
    "\xef\x80\x93",
    "\xef\x80\x95",
    "\xef\x80\x99",
    "\xef\x80\x9c",
    "\xef\x80\xa1",
    "\xef\x80\xa6",
    "\xef\x80\xa7",
    "\xef\x80\xa8",
}
 
for i=1, #sym do
    lvgl.dropdown_set_symbol(dd, sym[i])
    sys.wait(1000)
end

列表框高度

展示出的列表项是根据页面大小自动展示的，但是列表高度也是可以手动设置的。

lvgl.dropdown_set_max_height(dd, 100)

控制

除了可以手动点击操作以外，下拉框也可以通过 API 进行操作，展开下拉框，收起下拉框，选择等操作。

while true do
    sys.wait(1000)
    lvgl.dropdown_open(dd)
    lvgl.dropdown_set_selected(dd, math.random(1, 8))
    sys.wait(1000)
    lvgl.dropdown_close(dd, lvgl.ANOM_OFF)
end

这个控件并没有被点击，完全是依靠 API 展开随机设置的。

事件

可以通过 lvgl.EVENT_VALUE_CHANGED 消息，获取选项的 ID。

-- 回调函数
event_handler = function(obj, event)
    if (event == lvgl.EVENT_VALUE_CHANGED) then
        print("Option:", lvgl.dropdown_get_symbol(obj))
    end
end
 
lvgl.obj_set_event_cb(dd, event_handler)

API

lvgl.dropdown_create

lvgl.dropdown_set_options_static

lvgl.dropdown_add_option

lvgl.dropdown_set_selected

lvgl.dropdown_set_dir

lvgl.dropdown_set_max_height

lvgl.dropdown_set_symbol

lvgl.dropdown_set_show_selected

lvgl.dropdown_get_text

lvgl.dropdown_get_options

lvgl.dropdown_get_selected

lvgl.dropdown_get_option_cnt

lvgl.dropdown_get_max_height

lvgl.dropdown_get_symbol

lvgl.dropdown_get_dir

lvgl.dropdown_open

lvgl.dropdown_close