📚 课程目录第4章嵌入式UI组件架构

4. 嵌入式UI组件架构

在嵌入式设备上做UI组件复用，难点并不在于“把按钮画出来”，而在于让同一个按钮组件能在不同屏幕、不同输入设备、不同RTOS甚至裸机环境下稳定工作。要做到这一点，组件不能直接操作寄存器，也不能把绘制逻辑和业务逻辑揉在一起。合理的做法是引入清晰的分层架构，把硬件差异隔离在底层，把渲染、事件、生命周期等通用能力沉淀到中间层，让上层组件只关注“长什么样、怎么响应”。

一、分层架构：把变化关进笼子

嵌入式UI组件架构通常划分为四层：硬件抽象层（HAL）、渲染引擎层、事件系统层、组件层。每一层只依赖下一层的接口，不依赖具体实现。这样当屏幕从SPI LCD换成RGB屏，或输入从按键换成触摸屏时，只需要替换HAL实现，上层组件代码几乎不动。

硬件抽象层：封装显示、输入、定时器等硬件差异，向上提供统一接口，如 lcd_fill_rect()、input_read_event()。
渲染引擎层：负责脏矩形计算、图层合成、字体与图片解码，把组件描述转换成像素操作。
事件系统层：统一管理触摸、按键、定时、自定义事件的分发与冒泡。
组件层：按钮、列表、进度条等具体组件，只关心属性、状态和事件回调。

分层的关键不是“分”，而是“依赖方向单一”。上层可以调用下层接口，下层绝不能反向依赖上层组件，否则复用性会被彻底破坏。

二、硬件抽象层：接口稳定比实现高效更重要

HAL的设计目标是“一次定义，多处实现”。以显示为例，建议定义最小操作集：初始化、设置窗口、写像素块、刷新、背光控制。输入侧则统一为事件队列，把按键、触摸、编码器都抽象成 input_event_t。这样渲染引擎不需要知道当前是电容屏还是电阻屏。

typedef struct {
    int (*init)(void);
    int (*set_window)(int x, int y, int w, int h);
    int (*write_pixels)(const uint16_t *buf, uint32_t len);
    int (*flush)(void);
} display_hal_t;

typedef struct {
    uint8_t type;      // TOUCH_DOWN / TOUCH_UP / KEY_PRESS
    int16_t x, y;
    uint16_t code;
} input_event_t;

HAL实现可以是SPI屏驱动、RGB屏DMA驱动，也可以是PC模拟器。只要接口一致，组件就能在目标板和仿真环境之间无缝切换，这对调试和自动化测试非常关键。

三、渲染引擎与事件系统：组件复用的两条主动脉

渲染引擎负责把组件的视觉描述变成实际像素。嵌入式资源有限，不能像桌面端那样全屏重绘。常用策略是脏矩形合并：组件标记自身需要更新的区域，引擎合并重叠矩形后一次性刷新。对于有透明、圆角、阴影的组件，还需要图层或离屏缓冲支持。

事件系统则决定组件如何“活”起来。推荐采用“捕获—目标—冒泡”三阶段模型：父容器先捕获，目标组件处理，再向上冒泡。触摸事件需要做坐标变换，把屏幕坐标转换成组件局部坐标；按键事件则通过焦点链分发。事件系统还应支持定时器事件，用于长按、双击、动画帧等场景。

四、组件生命周期与接口设计原则

组件生命周期是复用的骨架。一个可复用组件通常经历：创建、挂载、布局、绘制、事件处理、更新、卸载、销毁。每个阶段都应有明确职责，避免在构造函数里做硬件初始化，也避免在绘制函数里修改状态。

阶段	典型动作	常见误区
创建 create	分配对象、设置默认属性	直接调用HAL初始化硬件
挂载 mount	加入父容器、注册事件、启动定时器	重复注册导致事件多次触发
布局 layout	计算位置、尺寸、子组件排列	在布局中做耗时绘制
绘制 draw	标记脏矩形、提交渲染命令	直接写显存、绕过渲染引擎
更新 update	属性变化后局部重绘	全屏刷新造成闪烁
卸载 unmount	注销事件、停止定时器、释放资源	遗漏注销导致野指针回调

接口设计应遵循四条原则：第一，接口最小化，只暴露必要操作；第二，参数用结构体传递，便于扩展；第三，回调必须带上下文指针，避免全局变量；第四，所有返回值统一错误码，便于排障。例如按钮组件对外只暴露 button_set_text()、button_set_onclick()、button_set_enabled()，内部状态不对外暴露。

在资源紧张的MCU上，组件对象建议静态分配或使用内存池，避免频繁malloc/free造成碎片。生命周期钩子中不要做阻塞操作，耗时任务交给事件系统异步处理。

五、案例与复盘：从“能跑”到“可复用”

某项目最初把按钮绘制直接写在业务代码里，换屏后所有按钮都要改。重构后引入HAL和渲染引擎，按钮组件只依赖 render_ctx_t 和 event_ctx_t。换屏时只新增一个 display_hal_rgb.c，组件代码零修改。复盘发现，最大的收益不是代码量减少，而是排障边界清晰：显示异常查HAL，事件不响应查事件系统，样式不对查组件属性。

常见误区：把HAL写成“万能层”，既管显示又管业务；或者事件系统直接调用组件内部函数，破坏封装。分层架构一旦出现反向依赖，复用性会迅速退化，后期维护成本成倍增加。

总结来说，嵌入式UI组件架构的核心是“隔离变化、统一接口、明确生命周期”。HAL隔离硬件，渲染引擎隔离绘制细节，事件系统隔离输入差异，组件层只表达业务语义。只有这四层各司其职，组件才能真正做到一次编写、多端复用。