LVGL 是一款开源轻量级嵌入式 GUI 框架，适用于低功耗 MCU、RTOS 及小型 Linux 系统。其特点包括资源占用低、跨平台支持强、内置丰富组件及高度可定制。文章介绍了 LVGL 架构原理，并以 STM32+FreeRTOS 为例详细说明了移植步骤，包括源码添加、配置修改、显示与触摸驱动实现、任务初始化等。此外还涵盖了首个 GUI 界面创建、性能优化技巧（如 DMA2D 加速）、配套工具（SquareLine Studio）及常见问题解决方案。LVGL 是嵌入式设备实现精美界面的首选方案。
随着物联网设备和智能终端的发展，越来越多的嵌入式设备开始追求精美的 GUI 界面。 但 MCU 资源有限，如何在几百 KB 的 Flash 和几十 KB 的 RAM 上跑出流畅的界面？
传统方案：
结论：如果你要在 STM32、ESP32、NXP、Linux 上做 GUI，LVGL 是首选！
LVGL（Light and Versatile Graphics Library）是一款开源的轻量级嵌入式 GUI 框架，主要用于低功耗 MCU、RTOS 和小型 Linux 系统。
| 特点 | 说明 |
|---|---|
| 轻量高效 | 在 STM32F4（180MHz）+ 64KB RAM 上，依然能实现 60FPS 流畅动画 |
| 跨平台 | 支持 MCU、RTOS、Linux、Windows、ESP32、Raspberry Pi |
| 功能强大 | 内置按钮、滑条、表格、图表、动画、触控支持 |
| 高度可定制 | 开关各种功能、颜色深度、缓存策略 |
| 生态完善 | SquareLine Studio、LVGL Simulator、丰富 Demo |
一句话总结：LVGL 提供 UI 组件和渲染引擎，但显示驱动和触摸驱动需要你移植。
┌──────────────────────────────┐
│ 应用层 (UI 应用逻辑) │
└───────────▲──────────────────┘
┌───────────┴──────────────┐
│ LVGL 核心库 │
│ • 界面组件（按钮、列表） │
│ • 样式引擎（CSS-like） │
│ • 动画管理 │
│ • 事件驱动 │
└───────────▲──────────────┘
┌───────────┴──────────────┐
│ 显示驱动层 + 输入驱动层 │
│ • TFT/LCD 显示刷新 │
│ • 触摸/按键输入 │
└───────────▲──────────────┘
┌───────────┴──────────────┐
│ 硬件（MCU + LCD） │
└──────────────────────────┘
| 项目 | 选择 |
|---|---|
| 硬件 | STM32F4/F7/H7、ESP32、NXP、RK 系列 |
| IDE | STM32CubeIDE / Keil / VSCode / PlatformIO |
| 操作系统 | 裸机 / FreeRTOS / RT-Thread |
| 屏幕 | TFT LCD / OLED / IPS / SPI 屏 |
| LVGL 版本 | 最新 v9.x 推荐 |
下载 LVGL：
git clone https://github.com/lvgl/lvgl.git
lvgl 文件夹拷贝到工程目录#include "lvgl.h"
修改 lv_conf.h：
#define LV_COLOR_DEPTH 16 // RGB565
#define LV_MEM_SIZE (64U * 1024U)
#define LV_TICK_CUSTOM 1
实现 disp_flush() 回调：
void disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p) {
lcd_draw_area(area->x1, area->y1, area->x2, area->y2, color_p);
lv_disp_flush_ready(disp);
}
实现 touchpad_read()：
bool touchpad_read(lv_indev_drv_t * indev, lv_indev_data_t * data) {
if(touch_is_pressed()) {
data->point.x = get_touch_x();
data->point.y = get_touch_y();
data->state = LV_INDEV_STATE_PRESSED;
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
return false;
}
lv_init();
lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.flush_cb = disp_flush;
lv_disp_drv_register(&disp_drv);
lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv);
indev_drv.read_cb = touchpad_read;
lv_indev_drv_register(&indev_drv);
void gui_task(void *pvParameter) {
while(1) {
lv_timer_handler();
vTaskDelay(pdMS_TO_TICKS(5));
}
}
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_center(btn);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "点我试试！");
lv_obj_center(label);
运行效果： [图片：运行效果]
| 技巧 | 描述 |
|---|---|
| 启用 DMA2D/GPU | 利用硬件加速，降低 CPU 占用 |
| 双缓冲 | 使用两个显存缓冲区，减少闪烁 |
| 降低刷新率 | 合理设置 LV_DISP_DEF_REFR_PERIOD |
| 精简组件 | 关闭不用的控件，减少内存占用 |
| 工具 | 功能 |
|---|---|
| SquareLine Studio | 所见即所得的 GUI 设计器 |
| LVGL Simulator | 在 PC 上调试 UI 界面 |
| 官方 Demo | 各类控件示例，快速上手 |
| 问题 | 解决方案 |
|---|---|
| 屏幕不显示 | 检查 disp_flush() 实现 |
| 触摸无反应 | 确认 touchpad_read() 返回正确坐标 |
| FPS 太低 | 开启 DMA2D，优化缓冲区大小 |
| 内存溢出 | 增加 LV_MEM_SIZE 或关闭不必要功能 |
一句话总结：LVGL = 嵌入式 GUI 界面开发的开源神器 学会它，你的项目 UI 将从'黑白简陋'跃升为'丝滑炫酷'！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online