M5Dropdown

M5Dropdown是一个可以在用户界面中创建下拉菜单的控件。它允许用户通过紧凑的下拉界面从可用选项列表中选择一个选项。

UiFlow2 示例

四个方向的下拉菜单

在UiFlow2中打开 cores3_dropdown_directions_example.m5f2 项目。

此示例创建了向下、向上、向左和向右的下拉菜单。

UiFlow2 代码块：

示例输出：

None

MicroPython 示例

四个方向的下拉菜单

此示例创建了向下、向上、向左和向右的下拉菜单。

MicroPython 代码块：

# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
#
# SPDX-License-Identifier: MIT

import os, sys, io
import M5
from M5 import *
import m5ui
import lvgl as lv


page0 = None
dropdown0 = None
dropdown1 = None
dropdown2 = None
dropdown3 = None


def setup():
    global page0, dropdown0, dropdown1, dropdown2, dropdown3

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    dropdown0 = m5ui.M5Dropdown(
        x=110,
        y=0,
        w=100,
        h=lv.SIZE_CONTENT,
        options=["option1", "option2"],
        direction=lv.DIR.BOTTOM,
        show_selected=True,
        font=lv.font_montserrat_14,
        parent=page0,
    )
    dropdown1 = m5ui.M5Dropdown(
        x=111,
        y=212,
        w=100,
        h=lv.SIZE_CONTENT,
        options=["option1", "option2"],
        direction=lv.DIR.TOP,
        show_selected=True,
        font=lv.font_montserrat_14,
        parent=page0,
    )
    dropdown2 = m5ui.M5Dropdown(
        x=220,
        y=106,
        w=100,
        h=lv.SIZE_CONTENT,
        options=["option1", "option2"],
        direction=lv.DIR.LEFT,
        show_selected=True,
        font=lv.font_montserrat_14,
        parent=page0,
    )
    dropdown3 = m5ui.M5Dropdown(
        x=0,
        y=106,
        w=100,
        h=lv.SIZE_CONTENT,
        options=["option1", "option2"],
        direction=lv.DIR.RIGHT,
        show_selected=True,
        font=lv.font_montserrat_14,
        parent=page0,
    )

    page0.screen_load()
    dropdown0.set_selected_highlight(True)
    dropdown1.set_selected_highlight(True)
    dropdown2.set_selected_highlight(True)
    dropdown3.set_selected_highlight(True)


def loop():
    global page0, dropdown0, dropdown1, dropdown2, dropdown3
    M5.update()


if __name__ == "__main__":
    try:
        setup()
        while True:
            loop()
    except (Exception, KeyboardInterrupt) as e:
        try:
            m5ui.deinit()
            from utility import print_error_msg

            print_error_msg(e)
        except ImportError:
            print("please update to latest firmware")

示例输出：

None

API参考

M5Dropdown

class m5ui.dropdown.M5Dropdown(*args, **kwargs)

基类：dropdown

创建一个下拉菜单对象。

参数:

• x – 下拉菜单的X坐标位置。

• y – 下拉菜单的Y坐标位置。

• w – 下拉菜单的宽度。

• h – 下拉菜单的高度，默认为 lv.SIZE_CONTENT。

• options (list) – 在下拉菜单中显示的选项列表。

• direction (int) – 下拉菜单的方向，可以是 lv.DIR.LEFT、lv.DIR.RIGHT、lv.DIR.TOP 或 lv.DIR.BOTTOM。

• show_selected (bool) – 是否高亮显示选中的选项，默认为 True。

• font (lvgl.font_t) – 下拉菜单中文本使用的字体，默认为 lv.font_montserrat_14。

• parent – 此下拉菜单的父对象，默认为当前活动屏幕。

set_flag(flag, value)

为对象设置标志。如果 value 为True，则添加标志；如果为False，则移除标志。

参数:

• flag (int) – 要设置的标志。

• value (bool) – 如果为True，则添加标志；如果为False，则移除标志。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_flag(lv.obj.FLAG.HIDDEN, True)

toggle_flag(flag)

切换对象的标志。如果标志已设置，则将其移除；如果未设置，则将其添加。

参数:

flag (int) – 要切换的标志。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.toggle_flag(lv.obj.FLAG.HIDDEN)

set_state(state, value)

设置下拉菜单的状态。如果 value 为True，则设置状态；如果为False，则取消设置状态。

参数:

• state (int) – 要设置的状态。

• value (bool) – 如果为True，则设置状态；如果为False，则取消设置状态。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_state(lv.STATE.CHECKED, True)

toggle_state(state)

切换下拉框的状态。如果状态已设置，则取消设置；如果未设置，则设置。

参数:

state (int) – 要切换的状态。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.toggle_state(lv.STATE.CHECKED)

set_pos(x, y)

设置下拉菜单的位置。

参数:

• x (int) – 下拉菜单的X坐标。

• y (int) – 下拉菜单的Y坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_pos(100, 100)

set_x(x)

设置下拉菜单的X坐标。

参数:

x (int) – 下拉菜单的X坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_x(100)

set_y(y)

设置下拉菜单的Y坐标。

参数:

y (int) – 下拉菜单的Y坐标。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_y(100)

set_width(width)

设置下拉菜单的宽度。

参数:

width (int) – 下拉菜单的宽度。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_width(100)

get_width()

获取下拉菜单的宽度。

返回:

下拉菜单的宽度。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.get_width()

set_height(height)

设置下拉菜单的高度。

参数:

height (int) – 下拉菜单的高度。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_height(50)

get_height()

获取下拉菜单的高度。

返回:

下拉菜单的高度。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.get_height()

align_to(obj, align, x, y)

将下拉菜单对齐到另一个对象。

参数:

• obj (lv.obj) – 要对齐到的对象。

• align (int) – 对齐类型。

• x (int) – 相对于对齐对象的X偏移量。

• y (int) – 相对于对齐对象的Y偏移量。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)

get_selected()

获取当前选中选项的索引。

返回:

选中选项的索引。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

selected_index = dropdown_0.get_selected()

set_selected_highlight(enable)

启用或禁用选中选项的高亮显示。

参数:

enable (bool) – True表示启用高亮显示，False表示禁用。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_selected_highlight(True)

get_option_count()

清除下拉列表中的所有选项。

返回:

下拉菜单中的选项数量。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

option_count = dropdown_0.get_option_count()

get_option_index(option)

获取选项的索引。

参数:

option (str) – 要查找的选项。

返回:

选项的索引，如果未找到则返回-1。

返回类型:

int

UiFlow2 代码块：

MicroPython 代码块：

index = dropdown_0.get_option_index("Option 1")
if index != -1:
    print(f"Option found at index: {index}")
else:
    print("Option not found")

get_text()

获取下拉列表按钮的文本。

返回:

下拉菜单按钮的文本。

返回类型:

str

UiFlow2 代码块：

MicroPython 代码块：

text = dropdown_0.get_text()
print(f"Dropdown button text: {text}")

set_text(txt)

设置下拉列表按钮的文本。

参数:

txt (str) – 为下拉按钮设置的文本。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_text("Select an option")

add_event_cb(handler, event, user_data)

为下拉菜单添加事件回调。当指定事件发生时将调用回调函数。

参数:

• handler (function) – 要调用的回调函数。

• event (int) – 要监听的事件。

• user_data (Any) – 要传递给回调函数的可选用户数据。

返回:

None

UiFlow2 代码块：

MicroPython 代码块：

def dropdown_0_value_changed_event(event_struct):
    global dropdown_0
    selected = dropdown_0.get_selected_str()
    print(f"Selected: {selected}")

def dropdown_0_event_handler(event_struct):
    global dropdown_0
    event = event_struct.code
    if event == lv.EVENT.VALUE_CHANGED:
        dropdown_0_value_changed_event(event_struct)
    return

dropdown_0.add_event_cb(dropdown_0_event_handler, lv.EVENT.ALL, None)

set_options(options)

设置下拉菜单的选项。

参数:

options (list) – 在下拉菜单中显示的选项列表。

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_options(["option1", "option2", "option3"])

get_options()

获取下拉菜单中的选项列表。

返回:

选项列表。

返回类型:

list

add_option(option, pos)

在特定位置的下拉菜单中添加一个选项。

参数:

• option (str) – 要添加的选项。

• pos (int) – 要插入选项的位置。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.add_option("New Option", 1)

clear_options()

清空下拉菜单中的所有选项。

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.clear_options()

返回类型:

None

get_selected_str()

以字符串形式获取当前选中的选项。

返回:

选中的选项（字符串形式）。

返回类型:

str

UiFlow2 代码块：

MicroPython 代码块：

selected_option = dropdown_0.get_selected_str()

set_dir(direction)

设置下拉菜单的方向。

参数:

direction (int) – 下拉菜单的方向，可以是 lv.DIR.LEFT、lv.DIR.RIGHT、lv.DIR.TOP 或 lv.DIR.BOTTOM。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_dir(lv.DIR.LEFT)

set_style_radius(radius, part)

设置下拉菜单角的半径。

参数:

• radius (int) – 角的半径（以像素为单位）。

• part (int) – 下拉菜单中应用半径的部分，例如“lv.PART.MAIN”。

返回类型:

None

UiFlow2 代码块：

None

MicroPython 代码块：

dropdown_0.set_style_radius(10, lv.PART.MAIN | lv.STATE.DEFAULT)

set_size(w, h)

设置下拉菜单的尺寸。

参数:

• w (int) – 下拉菜单的宽度。

• h (int) – 下拉菜单的高度。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

dropdown_0.set_size(150, 40)