2. 嵌入式UI开发基础

在桌面或手机平台上开发界面时,开发者通常默认拥有数百 MB 甚至数 GB 的内存、GHz 级多核 CPU、GPU 硬件加速以及成熟的操作系统调度。而 Qt for MCUs 面向的是另一类世界:主频几十到几百 MHz 的微控制器、几十到几百 KB 的 SRAM、无 MMU、无完整操作系统,甚至没有文件系统。理解这些约束,是决定“界面能不能做、该怎么做”的前提。

一、MCU 资源限制:内存、算力与存储

MCU 的资源限制不是单一维度,而是内存、算力、存储、功耗四者相互挤压的结果。其中内存往往是最先触顶的瓶颈,因为 UI 需要帧缓冲、图层、字体位图、图片解码缓存和控件对象树。

  • RAM 限制:帧缓冲是硬性开销。以 480×272、RGB565 为例,单缓冲约 480×272×2 ≈ 255 KB,双缓冲则翻倍。若 MCU 只有 512 KB SRAM,双缓冲几乎不可行,必须依赖外部 SDRAM 或采用分块刷新。
  • Flash 限制:字体、图标、图片、QML 编译产物都占用 Flash。中文字库动辄数 MB,通常需要裁剪字符集或使用外部 Flash。
  • 算力限制:无 GPU 时,所有填充、混合、缩放、旋转都由 CPU 完成。一次全屏 alpha 混合可能消耗数毫秒,直接影响帧率。
  • 功耗限制:电池供电设备要求降低刷新频率、减少动画,甚至让屏幕进入局部刷新或休眠。
核心判断:先算清“一帧要多少字节、一秒要刷多少帧”,再决定分辨率、色深、缓冲策略和动画复杂度。资源预算应在写第一行 QML 之前完成。

二、实时性要求:帧率、响应与确定性

嵌入式 UI 的实时性包含两个层面:视觉上的帧率稳定,以及交互上的响应确定。MCU 通常运行 RTOS(如 FreeRTOS、ThreadX)或裸机主循环,UI 任务必须与电机控制、传感器采集、通信等实时任务共存。

关键指标包括:目标帧率(常见 30/60 FPS)、单帧渲染时间上限、触摸到视觉反馈的延迟(通常要求 <100 ms)、以及最坏情况执行时间(WCET)。若 UI 渲染占用 CPU 过久,会挤占控制任务的时序,造成系统级故障。

// 典型帧预算计算(30 FPS)
单帧时间预算 = 1000 ms / 30 ≈ 33.3 ms
其中:渲染 ≈ 20 ms,触摸采样与事件分发 ≈ 5 ms,余量 ≈ 8 ms

// 若使用 60 FPS
单帧时间预算 = 1000 ms / 60 ≈ 16.7 ms
// 无 GPU 的 MCU 上,全屏动画通常难以稳定达到
常见误区:把 UI 任务优先级设得过高,导致通信或控制任务被饿死;或把耗时渲染放在中断中执行。正确做法是让 UI 以合适优先级运行,并把重绘拆分为可中断的小块。

三、显示与触控硬件:从接口到信号链

显示与触控是 UI 的物理入口。显示侧常见接口有 SPI、8080/6800 并口、RGB 并口、MIPI-DSI;触控侧常见电阻屏(ADC 采样)和电容屏(I²C 控制器)。不同接口的带宽差异巨大,直接决定刷新能力。

下图展示了一个典型的 MCU 显示与触控信号链:MCU 通过显示接口把帧数据送到显示控制器,同时通过触控接口读取坐标,再经事件系统驱动 UI 更新。

MCU 显示与触控信号链 MCU UI 渲染 / QML 引擎 帧缓冲 / 图层管理 触控事件分发 显示接口 SPI / RGB / MIPI-DSI 触控接口 ADC / I²C 显示控制器 时序 / 刷新 触控控制器 坐标采样 LCD 显示面板 触控面板 触摸坐标 → 事件 → UI 状态更新 → 重绘

四、常见 UI 框架对比与选型

嵌入式 UI 框架众多,选型需结合硬件能力、开发效率、授权成本和团队技能。下表对常见方案做横向对比。

框架 典型资源占用 渲染方式 开发语言 适用场景
Qt for MCUs Flash 数百 KB 起,RAM 数十 KB 起 QML 编译为 C++,轻量渲染引擎 QML + C++ 中高端 MCU,复杂动效与产品级 UI
LVGL Flash 约 100 KB,RAM 约 16 KB 起 C 语言即时渲染 C 资源紧张、成本敏感型设备
TouchGFX 依赖 STM32 生态,占用中等 部分硬件加速 C++ STM32 + Chrom-ART 平台
emWin 占用中等,商业授权 软件渲染为主 C 工业 HMI、医疗设备
裸机自绘 最低,完全可控 直接写显存 C 极简界面、单一功能产品

五、案例与复盘:一个智能面板的取舍

某智能家居面板采用 320×240 RGB565 屏幕、Cortex-M7 @ 216 MHz、512 KB SRAM、无外部 SDRAM。最初方案使用双缓冲全屏动画,结果帧率仅 12 FPS,触摸延迟明显。复盘后采取以下措施:

  1. 改为单缓冲 + 脏矩形局部刷新,仅重绘变化区域,帧率提升到 28 FPS。
  2. 将背景图预合成到 Flash,避免运行时 alpha 混合。
  3. 动画限制在 200×120 区域内,减少像素填充量。
  4. 触摸事件去抖并合并,降低事件分发频率。
选型与优化的通用顺序:先明确分辨率与帧率目标 → 计算内存与带宽预算 → 选择框架 → 用局部刷新、预合成、降色深等手段逼近预算。不要先选框架再倒推硬件。

嵌入式 UI 开发的本质,是在有限资源下做确定性交付。MCU 资源限制决定了“能画多大”,实时性要求决定了“能画多快”,显示与触控硬件决定了“怎么画、怎么点”,而框架对比则帮助团队在效率与成本之间找到平衡点。掌握这四者之间的关系,才能为后续 Qt for MCUs 的工程实践打下可靠基础。