LVGL

LVGL（Light and Versatile Graphics Library）是一款开源的嵌入式图形库，专为资源有限的微控制器（如STM32、ESP32等）设计，能够快速构建交互式用户界面（GUI）。它支持丰富的图形组件、动画效果和主题定制，适用于智能手表、物联网设备、工业控制面板等场景。

---

​LVGL 核心特点

1. ​轻量高效

   • 仅需数十KB RAM和Flash即可运行，支持裁剪功能（通过宏配置移除不需要的模块）。
   • 支持16位、32位色深，优化了图形渲染性能。

2. ​跨平台

   • 兼容多种显示控制器（如SSD1306、ILI9341）和输入设备（触摸屏、编码器、按键）。
   • 可在FreeRTOS、RT-Thread等实时操作系统或无OS环境下运行。

3. ​丰富的组件

   • 提供按钮、标签、列表、图表、滑块、键盘等80+组件。
   • 支持层级布局（通过 lv_obj 父子关系管理）、Flexbox和Grid布局。

4. ​动画与主题

   • 内置平滑动画效果（移动、缩放、透明度等）。
   • 支持动态切换主题（默认提供Material、Monochrome等风格）。

5. ​多语言支持

   • 内置UTF-8编码，支持中文等非拉丁字符（需配置外部字体）。

---

​LVGL 快速入门

​1. 环境准备

• ​硬件需求

  • 微控制器（如STM32F4、ESP32）。
  • 显示屏（SPI/I2C接口的LCD或OLED）。
  • 输入设备（如电阻/电容触摸屏、按键）。

• ​软件依赖

  • 下载LVGL源码：从 GitHub仓库 克隆或下载最新版本。
  • 显示驱动：需自行实现屏幕的像素写入函数（或使用官方提供的驱动模板）。

---

​2. 移植LVGL到项目

1. ​添加源码到工程
   将LVGL的 src、examples 和 porting 目录加入项目，确保包含头文件路径。

2. ​配置 lv_conf.h
   复制 lvgl/lv_conf_template.h 为 lv_conf.h，根据需求启用功能：

   c

   复制

   #define LV_COLOR_DEPTH 16      // 根据屏幕色深设置
   #define LV_USE_LOG 1           // 启用日志
   #define LV_USE_FONT_SIMSUN_16  1 // 启用中文字体（需自行添加字体文件）

3. ​初始化LVGL
   在主函数中初始化LVGL核心库和硬件：

   c

   复制

   lv_init();                  // 初始化LVGL库
   lv_port_disp_init();        // 实现显示驱动接口（用户自行编写）
   lv_port_indev_init();       // 实现输入设备接口（如触摸屏）

4. ​主循环处理
   在 while(1) 循环中定期调用LVGL任务处理函数：

   c

   复制

   while (1) {
     lv_timer_handler();      // 处理LVGL任务（推荐5ms调用一次）
     lv_tick_inc(5);          // 更新内部时钟（需根据实际调用周期调整）
     delay_ms(5);
   }

---

​3. 创建第一个UI界面

c

复制

void create_ui() {
  // 创建一个父容器（屏幕）
  lv_obj_t *screen = lv_scr_act();

  // 添加一个按钮
  lv_obj_t *btn = lv_btn_create(screen);
  lv_obj_set_size(btn, 100, 50);
  lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);

  // 添加按钮上的标签
  lv_obj_t *label = lv_label_create(btn);
  lv_label_set_text(label, "Click Me!");

  // 绑定点击事件
  lv_obj_add_event_cb(btn, btn_event_handler, LV_EVENT_CLICKED, NULL);
}

// 事件回调函数
void btn_event_handler(lv_event_t *e) {
  lv_obj_t *btn = lv_event_get_target(e);
  lv_label_set_text(lv_obj_get_child(btn, 0), "Hello LVGL!");
}

---

​4. 样式与主题

c

复制

// 自定义按钮样式
static lv_style_t style_btn;
lv_style_init(&style_btn);
lv_style_set_bg_color(&style_btn, lv_color_hex(0x2196F3)); // 背景色
lv_style_set_radius(&style_btn, 10);                        // 圆角
lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT);        // 应用样式

// 使用预设主题
lv_theme_t *theme = lv_theme_default_init(NULL, LV_COLOR_MAKE(0x20, 0x30, 0x40), LV_COLOR_RED, true, LV_FONT_DEFAULT);
lv_disp_set_theme(NULL, theme);

---

​5. 高级功能

• ​动画效果

  c

  复制

  lv_anim_t anim;
  lv_anim_init(&anim);
  lv_anim_set_var(&anim, label);
  lv_anim_set_values(&anim, 0, 100);
  lv_anim_set_exec_cb(&anim, (lv_anim_exec_xcb_t)lv_obj_set_y);
  lv_anim_start(&anim);

• ​多语言支持
  使用工具（如LVGL官方字体转换器）将中文字体转换为C数组，并在 lv_conf.h 中引用。

---

​移植示例（以STM32 + ILI9341为例）​

1. ​硬件初始化

   • 配置SPI/I2C接口驱动显示屏。
   • 实现 lv_port_disp.c 中的 disp_flush 函数，将像素数据写入显存。

2. ​显示驱动接口

   c

   复制

   void disp_flush(lv_disp_drv_t *drv, const lv_area_t *area, lv_color_t *color_p) {
     // 将color_p中的像素数据写入屏幕的指定区域（area->x1, y1 到 x2, y2）
     ILI9341_DrawBitmap(area->x1, area->y1, area->x2, area->y2, (uint16_t*)color_p);
     lv_disp_flush_ready(drv); // 通知LVGL刷新完成
   }

3. ​触摸屏驱动
   实现 lv_port_indev.c 中的触摸坐标读取函数。

---

​资源与社区

• ​官方文档：https://docs.lvgl.io/
• ​示例代码：lvgl/examples 目录提供丰富示例。
• ​在线模拟器：通过 LVGL Simulator 在PC上快速验证UI设计。
• ​社区支持：GitHub Issues、LVGL Forum。

通过以上步骤，您可以快速上手LVGL，并根据需求逐步深入复杂功能开发。