M5List

M5List 是一个可在用户界面中创建列表的控件。本质上它是一个具有垂直布局的矩形，可向其中添加按钮和文本。

UiFlow2 示例

列表示例

在 UiFlow2 中打开 cores3_list_example.m5f2 项目。

本示例演示如何创建一个用于显示一系列条目的列表。

UiFlow2 代码块：

cores3_list_example.png

示例输出：

None

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
 13list0 = None
 14File = None
 15New = None
 16Open = None
 17Save = None
 18Delete = None
 19
 20
 21def New_clicked_event(event_struct):  # noqa: N802
 22    global page0, list0, File, New, Open, Save, Delete
 23
 24    print("New")
 25
 26
 27def Open_clicked_event(event_struct):  # noqa: N802
 28    global page0, list0, File, New, Open, Save, Delete
 29
 30    print("Open")
 31
 32
 33def Save_clicked_event(event_struct):  # noqa: N802
 34    global page0, list0, File, New, Open, Save, Delete
 35
 36    print("Save")
 37
 38
 39def Delete_clicked_event(event_struct):  # noqa: N802
 40    global page0, list0, File, New, Open, Save, Delete
 41
 42    print("Delete")
 43
 44
 45def New_event_handler(event_struct):  # noqa: N802
 46    global page0, list0, File, New, Open, Save, Delete
 47    event = event_struct.code
 48    if event == lv.EVENT.CLICKED and True:
 49        New_clicked_event(event_struct)
 50    return
 51
 52
 53def Open_event_handler(event_struct):  # noqa: N802
 54    global page0, list0, File, New, Open, Save, Delete
 55    event = event_struct.code
 56    if event == lv.EVENT.CLICKED and True:
 57        Open_clicked_event(event_struct)
 58    return
 59
 60
 61def Save_event_handler(event_struct):  # noqa: N802
 62    global page0, list0, File, New, Open, Save, Delete
 63    event = event_struct.code
 64    if event == lv.EVENT.CLICKED and True:
 65        Save_clicked_event(event_struct)
 66    return
 67
 68
 69def Delete_event_handler(event_struct):  # noqa: N802
 70    global page0, list0, File, New, Open, Save, Delete
 71    event = event_struct.code
 72    if event == lv.EVENT.CLICKED and True:
 73        Delete_clicked_event(event_struct)
 74    return
 75
 76
 77def setup():
 78    global page0, list0, File, New, Open, Save, Delete
 79
 80    M5.begin()
 81    Widgets.setRotation(1)
 82    m5ui.init()
 83    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
 84    list0 = m5ui.M5List(x=-1, y=2, w=320, h=240, parent=page0)
 85    File = list0.add_text("File")
 86    New = list0.add_button(lv.SYMBOL.BULLET, "New")
 87
 88    page0.screen_load()
 89    Open = list0.add_button(lv.SYMBOL.DIRECTORY, "Open")
 90    Save = list0.add_button(lv.SYMBOL.SAVE, "Save")
 91    Delete = list0.add_button(lv.SYMBOL.CLOSE, "Delete")
 92
 93    New.add_event_cb(New_event_handler, lv.EVENT.ALL, None)
 94    Open.add_event_cb(Open_event_handler, lv.EVENT.ALL, None)
 95    Save.add_event_cb(Save_event_handler, lv.EVENT.ALL, None)
 96    Delete.add_event_cb(Delete_event_handler, lv.EVENT.ALL, None)
 97
 98    New.set_text_color(0xFFFF00, 255, lv.PART.MAIN | lv.STATE.PRESSED)
 99    Open.set_text_color(0xFFFF00, 100, lv.PART.MAIN | lv.STATE.PRESSED)
100    Save.set_text_color(0xFFFF00, 255, lv.PART.MAIN | lv.STATE.PRESSED)
101    Delete.set_text_color(0xFFFF00, 255, lv.PART.MAIN | lv.STATE.PRESSED)
102
103
104def loop():
105    global page0, list0, File, New, Open, Save, Delete
106    M5.update()
107
108
109if __name__ == "__main__":
110    try:
111        setup()
112        while True:
113            loop()
114    except (Exception, KeyboardInterrupt) as e:
115        try:
116            m5ui.deinit()
117            from utility import print_error_msg
118
119            print_error_msg(e)
120        except ImportError:
121            print("please update to latest firmware")

示例输出：

None

API参考

M5List

class m5ui.list.M5List(*args, **kwargs)

基类：list

创建一个列表对象。

参数:

  • x (int) – 列表的 x 坐标。

  • y (int) – 列表的 y 坐标。

  • w (int) – 列表的宽度。

  • h (int) – 列表的高度。

  • parent (lv.obj) – 要将列表附加到的父对象；若未指定，则附加到默认屏幕。

UiFlow2 代码块：

None

MicroPython 代码块：

from m5ui import M5List
import lvgl as lv

m5ui.init()
list_0 = M5List(x=120, y=80, w=60, h=30, parent=page0)
move_background()

将列表的背景项移动到末尾。

UiFlow2 代码块：

button_move_to_index.png

label_move_to_index.png

MicroPython 代码块：

button_0.move_background()
text_0.move_background()
move_foreground()

将列表的前景项移动到末尾。

UiFlow2 代码块：

button_move_to_index.png

label_move_to_index.png

MicroPython 代码块：

button_0.move_foreground()
text_0.move_foreground()
move_to_index(index)

将指定索引的项目移动到列表末尾。

UiFlow2 代码块：

button_move_to_index.png

label_move_to_index.png

MicroPython 代码块：

button_0.move_to_index(0)
text_0.move_to_index(1)
delete()

从列表中删除该项目。

UiFlow2 代码块：

button_delete.png

label_delete.png

MicroPython 代码块：

button_0.delete()
text_0.delete()
add_text(text, text_c=2171169, text_opa=255, bg_c=15131366, bg_opa=255, font=lvgl.font_montserrat_14)

向列表添加文本标签。

参数:

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

  • text_c (int) – 标签文字的颜色（十六进制）。

  • text_opa (int) – 按钮文字的不透明度（0-255）。

  • bg_c (int) – 标签背景颜色（十六进制）。

  • bg_opa (int) – 标签背景的不透明度（0-255）。

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

返回:

创建的标签对象 m5ui.M5Label。

返回类型:

lv.obj

UiFlow2 代码块：

add_text.png add_text2.png

MicroPython 代码块：

list_0.add_text("Item 1", text_c=0x000000, text_opa=255, bg_c=0xFFFFFF, bg_opa=255, font=lv.font_montserrat_14)
add_button(icon, text='button0', h=0, bg_c=16777215, bg_opa=255, text_c=0, text_opa=255, font=lvgl.font_montserrat_14)

向列表添加按钮。

参数:

  • icon (int) – 按钮上要显示的图标。

  • text (str) – 按钮上要显示的文本。

  • h (int) – 按钮的高度。

  • bg_c (int) – 按钮背景颜色（十六进制）。

  • bg_opa (int) – 按钮背景的不透明度（0-255）。

  • text_c (int) – 按钮文字颜色（十六进制）。

  • text_opa (int) – 按钮文字的不透明度（0-255）。

  • font (lv.font) – 按钮文字所使用的字体。

返回:

创建的按钮对象 m5ui.M5Button。

返回类型:

lv.obj

UiFlow2 代码块：

add_button.png add_button2.png

MicroPython 代码块：

list_0.add_button(lv.SYMBOL.BULLET, text="Home", h=40, bg_c=0xFFFFFF, text_c=0x000000, font=lv.font_montserrat_14)