M5Menu

M5Menu 是一个用于在用户界面中创建多级菜单的组件。

UiFlow2 示例

MicroPython 示例

菜单事件

本示例创建了一个多级菜单。

MicroPython 代码块:

  1# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
  2#
  3# SPDX-License-Identifier: MIT
  4
  5import os, sys, io
  6import M5
  7from M5 import *
  8import m5ui
  9import lvgl as lv
 10
 11
 12page0 = None
 13menu0 = None
 14Label1 = None
 15Label2 = None
 16Page_2 = None
 17Page2_Label1 = None
 18Page2_Label2 = None
 19Page_3 = None
 20Page3_Label = None
 21Page3_Switch = None
 22
 23
 24import random
 25
 26
 27def Page3_Switch_checked_event(event_struct):  # noqa: N802
 28    global \
 29        page0, \
 30        menu0, \
 31        Label1, \
 32        Label2, \
 33        Page_2, \
 34        Page2_Label1, \
 35        Page2_Label2, \
 36        Page_3, \
 37        Page3_Label, \
 38        Page3_Switch
 39
 40    Page3_Label.set_text_color(random.randint(0x000000, 0xFFFFFF), 255, 0)
 41
 42
 43def Page3_Switch_unchecked_event(event_struct):  # noqa: N802
 44    global \
 45        page0, \
 46        menu0, \
 47        Label1, \
 48        Label2, \
 49        Page_2, \
 50        Page2_Label1, \
 51        Page2_Label2, \
 52        Page_3, \
 53        Page3_Label, \
 54        Page3_Switch
 55
 56    Page3_Label.set_text_color(random.randint(0x000000, 0xFFFFFF), 255, 0)
 57
 58
 59def Page3_Switch_event_handler(event_struct):  # noqa: N802
 60    global \
 61        page0, \
 62        menu0, \
 63        Label1, \
 64        Label2, \
 65        Page_2, \
 66        Page2_Label1, \
 67        Page2_Label2, \
 68        Page_3, \
 69        Page3_Label, \
 70        Page3_Switch
 71    event = event_struct.code
 72    obj = event_struct.get_target_obj()
 73    if event == lv.EVENT.VALUE_CHANGED:
 74        if obj.has_state(lv.STATE.CHECKED):
 75            Page3_Switch_checked_event(event_struct)
 76        else:
 77            Page3_Switch_unchecked_event(event_struct)
 78    return
 79
 80
 81def setup():
 82    global \
 83        page0, \
 84        menu0, \
 85        Label1, \
 86        Label2, \
 87        Page_2, \
 88        Page2_Label1, \
 89        Page2_Label2, \
 90        Page_3, \
 91        Page3_Label, \
 92        Page3_Switch
 93
 94    M5.begin()
 95    Widgets.setRotation(1)
 96    m5ui.init()
 97    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
 98    menu0 = m5ui.M5Menu(x=0, y=0, w=320, h=240, parent=page0)
 99    menu0.set_page(menu0.main_page)
100    Label1 = menu0.add_label("Label1")
101    Label2 = menu0.add_label("Label2")
102    menu0.set_mode_root_back_button(lv.menu.ROOT_BACK_BUTTON.ENABLED)
103    menu0.set_mode_header(lv.menu.HEADER.TOP_FIXED)
104
105    page0.screen_load()
106    Label2.set_style_text_font(lv.font_montserrat_24, lv.PART.MAIN | lv.STATE.DEFAULT)
107    Label2.set_text(str("Click me!!!!!!!!"))
108    Page_2 = lv.menu_page(menu0, "Page2")
109    menu0.set_load_page_event(Label2.cont, Page_2)
110    Page2_Label1 = menu0.add_label("Label1", parent=Page_2)
111    Page2_Label2 = menu0.add_label(
112        "Label2 (Click me)",
113        text_c=0xFF0000,
114        text_opa=255,
115        bg_c=0xFFFFFF,
116        bg_opa=255,
117        font=lv.font_montserrat_24,
118        parent=Page_2,
119    )
120    Page_3 = lv.menu_page(menu0, "Page3")
121    menu0.set_load_page_event(Page2_Label2.cont, Page_3)
122    Page3_Label = menu0.add_label("A Label", parent=Page_3)
123    Page3_Label.set_style_text_font(lv.font_montserrat_24, lv.PART.MAIN | lv.STATE.DEFAULT)
124    Page3_Switch = menu0.add_switch(
125        "A Switch",
126        w=80,
127        h=40,
128        bg_c=0xE7E3E7,
129        bg_opa=255,
130        bg_c_checked=0x2196F3,
131        bg_c_checked_opa=255,
132        circle_c=0xFF9966,
133        circle_opa=255,
134        parent=Page_3,
135    )
136    Page3_Switch.add_event_cb(Page3_Switch_event_handler, lv.EVENT.ALL, None)
137
138
139def loop():
140    global \
141        page0, \
142        menu0, \
143        Label1, \
144        Label2, \
145        Page_2, \
146        Page2_Label1, \
147        Page2_Label2, \
148        Page_3, \
149        Page3_Label, \
150        Page3_Switch
151    M5.update()
152
153
154if __name__ == "__main__":
155    try:
156        setup()
157        while True:
158            loop()
159    except (Exception, KeyboardInterrupt) as e:
160        try:
161            m5ui.deinit()
162            from utility import print_error_msg
163
164            print_error_msg(e)
165        except ImportError:
166            print("please update to latest firmware")

示例输出:

None

API参考

M5Menu

class m5ui.menu.M5Menu(*args, **kwargs)

基类:menu

创建一个列表对象。

参数:
  • x (int) – 菜单的 x 坐标位置。

  • y (int) – 菜单的 y 坐标位置。

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

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

  • page_name (str) – 菜单主页的名称。

  • parent (lv.obj) – 要附加菜单的父对象。如果未指定,菜单会附加到默认屏幕。

UiFlow2 代码块:

None

MicroPython 代码块:

from m5ui import M5Menu
import lvgl as lv

m5ui.init()
menu0 = M5Menu(x=120, y=80, w=60, h=30, parent=page0)
set_page(page)

为菜单设置主页面。

参数:

page (lv.obj) – 主页面对象。

UiFlow2 代码块:

set_page.png

MicroPython 代码块:

menu0.set_page(menu0.main_page)
set_mode_header(mode)

设置菜单的模式头部。

参数:

mode (int) – 模式头部文本。 选项:- lv.menu.HEADER.TOP_FIXED - lv.menu.HEADER.TOP_UNFIXED - lv.menu.HEADER.BOTTOM_FIXED

UiFlow2 代码块:

set_mode_header.png

MicroPython 代码块:

menu0.set_mode_header(lv.menu.HEADER.TOP_FIXED)
set_pos(x, y)

设置菜单的位置。

参数:
  • x (int) – 菜单的 x 坐标。

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

UiFlow2 代码块:

set_pos.png

MicroPython 代码块:

menu0.set_pos(100, 100)
set_size(width, height)

设置菜单的尺寸。

参数:
  • width (int) – 菜单的宽度。

  • height (int) – 菜单的高度。

UiFlow2 代码块:

set_size.png

MicroPython 代码块:

menu0.set_size(100, 50)
add_label(text, text_c=2171169, text_opa=255, bg_c=16777215, bg_opa=255, font=lvgl.font_montserrat_14, parent=None)

向菜单添加一个标签。

参数:
  • text (str) – 标签上要显示的文本。

  • text_c (int) – 标签的文本颜色。

  • bg_c (int) – 标签的背景颜色。

  • bg_opa (int) – 标签背景的不透明度。

  • font (lv.font_t) – 标签的字体。

  • parent (lv.obj) – 要附加标签的父对象。如果未指定,标签将附加到菜单的主页面。

返回:

创建的标签对象。

返回类型:

m5ui.M5Label UiFlow2 代码块: add_label.png add_label2.png

MicroPython 代码块:

label0 = menu0.add_label("Hello, World!", text_c=0x212121, bg_c=0xFFFFFF, bg_opa=255, font=lv.font_montserrat_14, parent=menu0.main_page)
add_switch(text, w=50, h=20, bg_c=15197159, bg_opa=255, bg_c_checked=166139, bg_c_checked_opa=255, circle_c=16777215, circle_opa=255, parent=None)

向菜单添加一个开关。

参数:
  • text (str) – 开关旁显示的文本。

  • w (int) – 开关的宽度。

  • h (int) – 开关的高度。

  • bg_c (int) – 开关未选中时的背景颜色。

  • bg_c_checked (int) – 开关选中时的背景颜色。

  • circle_c (int) – 开关圆圈的颜色。

  • parent (lv.obj) – 要附加开关的父对象。如果未指定,开关将附加到菜单的主页面。

返回:

创建的开关对象。

返回类型:

m5ui.M5Switch

UiFlow2 代码块:

add_switch.png

add_switch2.png

MicroPython 代码块:

switch_0 = menu0.add_switch("Switch 1", w=50, h=20, bg_c=0xE7E3E7, bg_c_checked=0x0288FB, circle_c=0xFFFFFF, parent=menu0.main_page)