1. 背景

UiFlow2 通过 block 编程和 MicroPython 编程，效果是一样的，各有优劣。

1.1 block 编程

用彩色图块封装复杂的语法逻辑，类似于拼图。

优点：

•        低门槛、零语法错误：不用担心括号、缩进错误；

•        快速硬件集成：M5Stack 官方已将众多的传感器、执行器封装成了专用模块；

•        UI设计联动：在UiFlow2中的UI设计器中拖拽生成的按钮、标签，可以直接在积木中选择对应的事件回调函数，流程非常顺滑

缺点：

•        逻辑密度低：当项目变得复杂时，画布会变得非常混乱，难以维护；

1.2 MicroPython 编程

直接编写文本代码。

优点：

•        极高的灵活性：某些高级功能在block中无法实现，只能通过 Python 代码完成；

•        易于重用和版本控制：代码可以复制粘贴，可以提交到 git 等版本控制系统；

•        数学与算法优势：处理复杂的数学运算、解析二进制协议时，写代码比拼积木快得多

缺点：

•        硬件配置繁琐：需要手动查找引脚编号、配置通信协议参数；

•        调试繁琐：缩进错误、变量名写错等需要调试时才会报错

2. 运行 page 示例

https://uiflow-micropython.readthedocs.io/en/latest/m5ui/page.html

这个教程中的 micropython 代码拷贝粘贴到 UiFlow2 编码区，如下图，先点击 Read Mode 切换到 Custom Edit 模式，可以修改 MicroPython 代码，把教程中的代码粘贴过来。

2.1 运行报错

教程中的代码运行报错了，如下所示，提示 M5Screen 属性是不存在的。

2.2 问题定位

比较教程中的代码和 block对应的代码，发现教程中使用了 m5ui.M5Screen()，而 block 对应的代码使用的是 m5ui.M5Page()。

•        这就解释了报错 AttruibuteError: M5Screen，因为不存在；

•        此外，教程对应的章节是 M5UI/M5Page，更加说明了 M5Screen 是不存在的，只有 M5Page 才是合法的；

2.3 修改教程代码

原代码意图：长按屏幕时，屏幕背景颜色变为黑色；当松开屏幕时，背景颜色恢复为白色。

由于原代码有问题，处理page的触摸事件不能正常切换颜色，我去掉了 click/long_press 事件回调函数，现在能正常响应。

修改后的完整代码如下：

# 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

def page0_pressed_event(event_struct):
    global page0

    page0.set_bg_color(0x000000, 255, 0)

def page0_released_event(event_struct):
    global page0

    page0.set_bg_color(0xFFFFFF, 255, 0)

# def page0_clicked_event(event_struct):
#     global page0

#     page0.set_bg_color(0x000000, 255, 0)

# def page0_long_pressed_event(event_struct):
#     global page0

#     page0.set_bg_color(0x000000, 255, 0)

def page0_event_handler(event_struct):
    global page0
    event = event_struct.code
    if event == lv.EVENT.PRESSED and True:
        page0_pressed_event(event_struct)
    if event == lv.EVENT.RELEASED and True:
        page0_released_event(event_struct)
    # if event == lv.EVENT.CLICKED and True:
    #     page0_clicked_event(event_struct)
    # if event == lv.EVENT.LONG_PRESSED and True:
    #     page0_long_pressed_event(event_struct)
    return

def setup():
    global page0

    M5.begin()
    m5ui.init()    page0 = m5ui.M5Page(bg_c=0xFFFFFF) # 注意是 m5ui.M5Page

    page0.add_event_cb(page0_event_handler, lv.EVENT.ALL, None)

    page0.screen_load()

def loop():
    global page0
    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")

2.4 运行演示

参见 uiflow2-m5page-event.gif