跳到主要内容

GUI 框架

点亮屏幕只是第一步,要绘制界面还需要一个图形库。图形库与屏幕类型基本解耦:只要向它提供“把一块像素数据写到屏幕”的驱动函数,便可在任何屏幕上工作。本章介绍 ESP32 生态中常用的图形库及其选型思路。

1. 图形库的分层

各图形库的结构基本一致,自上而下分为三层:

  1. 控件 / 应用层:按钮、标签、图表等现成控件,以及布局、动画、事件系统。只有完整的 GUI 框架(如 LVGL)具备这一层。
  2. 绘图引擎:点、线、矩形、文字、位图的绘制,管理内存中的绘图缓冲区。所有图形库的核心。
  3. 驱动接口(HAL):图形库不直接操作硬件,而是调用注册(或库内置)的刷屏函数、输入函数与硬件交互。

前面各章已展示了这一分层的两种形态:

  • Arduino_GFX、u8g2 这类绘图库自带常见驱动 IC 的驱动,选择对应构造器即可使用,绘图 API 直接可用;
  • LVGL 这类GUI 框架不含硬件驱动,需要把“刷屏函数”(通常由 Arduino_GFX 等绘图库或 esp_lcd 提供)和“触摸读取函数”(见 触摸控制章节)注册给它,架构详见 Arduino 教程第 12 节

2. 常用图形库对比

定位目标屏幕控件体系触摸支持内存开销
LVGL完整 GUI 框架彩屏为主,单色可配丰富(按钮/列表/图表/动画)高(需帧缓冲 + 框架开销)
u8g2单色绘图库OLED / RLCD / 单色 LCD低(1bpp 缓冲)
Arduino_GFX彩屏绘图库SPI/QSPI/I80/RGB 彩屏低(可无帧缓冲直写)
LovyanGFX彩屏绘图库SPI/I80/RGB 彩屏集成常见触摸 IC低~中
TFT_eSPI彩屏绘图库SPI 彩屏部分低~中
GxEPD2墨水屏驱动库E-Paper低(1bpp 缓冲)

几点补充:

  • 绘图库之间 API 高度相似:Arduino_GFX、LovyanGFX、TFT_eSPI 的 API 风格相近(fillScreendrawRectsetCursor 等),掌握其中一种即可类推其他库的用法。本教程彩屏示例统一使用 Arduino_GFX,因为它支持的总线和驱动 IC 最全,微雪多数带屏开发板的示例包也基于它。
  • LVGL 不能独立工作,它总是构建于某个绘图库或 esp_lcd 之上。使用 LVGL 实际是绘图库负责刷屏、LVGL 负责界面的组合。
  • LVGL v8 与 v9 的 API 有不兼容变更,使用所用开发板示例包提供的版本即可,勿混用。

3. 如何选择

可按屏幕类型和需求依以下路径选择:

  1. 单色屏(OLED / RLCD / 黑白墨水屏显示简单内容)→ u8g2。1bpp 缓冲与屏幕原生格式一致,字体丰富,内存占用最小。示例见 OLED 章节RLCD 章节
  2. 墨水屏 → 微雪官方驱动库或 GxEPD2。墨水屏的全刷/局刷控制需要专门的库支持,见 E-Paper 章节。原则上也能把 LVGL 移植到墨水屏上,但秒级刷新与 GUI 框架的交互假设不匹配,一般不推荐。
  3. 彩屏、只做数据展示(仪表读数、状态页,无复杂交互)→ Arduino_GFX 直接绘制。无需引入框架,代码量小,见 LCD 章节 的示例。
  4. 彩屏、需要交互界面(按钮、列表、动画、触摸)→ LVGL。控件和事件系统能避免大量手写代码,配合 SquareLine Studio 等工具还可以可视化设计界面。注意 LVGL 需要整帧或部分帧缓冲,高分辨率屏幕要确认 PSRAM(见 AMOLED 章节 的内存估算)。

若仍无法确定,可先从 Arduino_GFX(彩屏)或 u8g2(单色屏)入手:二者上手简单,后续需要复杂界面时再引入 LVGL,已有的驱动代码仍可复用。

4. 延伸阅读

  • Arduino 教程第 12 节:LVGL 图形界面开发:LVGL 的架构、移植与完整开发流程。
  • OLED 章节:u8g2 的构造器、缓冲模式与实战。
  • 各微雪带屏开发板的产品页:对应屏幕的官方示例包中通常同时提供绘图库和 LVGL 两类例程,是最贴合硬件的起点。