M5TabView

M5TabView 是一个可用于在用户界面中创建选项卡视图的组件。

UiFlow2 示例

标签视图基础

在 UiFlow2 中打开 tabview_cores3_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
tabview0 = None
Tab1 = None
Tab2 = None
label1 = None
label2 = None
label3 = None


def setup():
    global page0, tabview0, Tab1, Tab2, label1, label2, label3

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    tabview0 = m5ui.M5TabView(
        x=0, y=-2, w=320, h=240, bar_size=60, bar_pos=lv.DIR.TOP, parent=page0
    )
    Tab1 = tabview0.add_tab("Tab1")
    Tab2 = tabview0.add_tab("Tab2")
    label1 = m5ui.M5Label("This is label1", x=0, y=0, parent=Tab1)

    page0.screen_load()
    label2 = m5ui.M5Label(
        "Hello World",
        x=0,
        y=0,
        text_c=0xFFCC00,
        bg_c=0x99FF99,
        bg_opa=255,
        font=lv.font_montserrat_24,
        parent=Tab1,
    )
    label3 = m5ui.M5Label("hello M5", x=0, y=0, parent=Tab2)
    label3.set_style_text_font(lv.font_montserrat_24, lv.PART.MAIN | lv.STATE.DEFAULT)
    label3.set_text_color(0x6600CC, 255, 0)
    label3.set_bg_color(0x33FF33, 255, 0)


def loop():
    global page0, tabview0, Tab1, Tab2, label1, label2, label3
    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参考

M5TabView

class m5ui.tabview.M5TabView(*args, **kwargs)

基类：tabview

创建一个标签页视图对象。

参数:

x (int) – 标签视图的 x 坐标位置。
y (int) – 标签视图的 y 坐标位置。
w (int) – 标签视图的宽度。
h (int) – 标签视图的高度。
bar_size (int) – 标签栏的大小。
bar_pos (int) – 标签栏的位置。
parent (lv.obj) – 要附加标签视图的父对象。如果未指定，标签视图将附加到默认屏幕。

UiFlow2 代码块：

None

MicroPython 代码块：

from m5ui import M5Label
import lvgl as lv

m5ui.init()
tabview0 = m5ui.M5TabView(x=0, y=-2, w=320, h=240, bar_size=60, bar_pos=lv.DIR.TOP, parent=page0)

add_tab(text)

向标签视图添加一个标签页。

参数:: text (str) – 标签页上要显示的文本。
返回类型:: lv.obj

UiFlow2 代码块：

MicroPython 代码块：

Tab1 = tabview0.add_tab("Tab1")
Tab2 = tabview0.add_tab("Tab2")

rename_tab(pos, txt)

重命名标签视图中的标签。

参数:

pos (int) – 要重命名的标签页位置。
txt (str) – 标签页的新文本。

返回类型:

None

UiFlow2 代码块：

MicroPython 代码块：

tabview0.rename_tab(0, 'hello M5')

M5Label 可以在 TabView 中使用。具体用法请参考 m5ui.M5Label 文档。