为你的STM32小屏幕找个GUI：在1.8寸TFT上移植LVGL或U8g2的实战记录
当你的STM32项目需要一块1.8寸TFT屏幕来显示交互界面时，直接操作像素点显然不够高效。本文将带你探索如何在资源有限的嵌入式系统中，为ST7735驱动的128x160分辨率屏幕选择合适的GUI框架，并实现一个完整的交互式界面。
1. GUI框架选型：LVGL vs U8g2
面对嵌入式系统常见的资源限制，轻量级GUI框架成为首选。以下是两个主流选项的核心对比：
| 特性 | LVGL | U8g2 |
|---|---|---|
| 内存占用 | 20KB+ RAM | 2KB+ RAM |
| 功能复杂度 | 完整控件库/动画支持 | 基础绘图/文本显示 |
| 开发效率 | 可视化设计器 | 代码级控制 |
| 适用场景 | 智能家居面板 | 传感器数据显示 |
LVGL的优势在于其丰富的预制组件：
- 按钮、滑块、图表等30+控件
- 内置动画引擎和主题系统
- 支持触摸和物理按键输入
- 活跃的开发者社区
而U8g2则更适合极简需求：
- 单色/彩色显示统一API
- 极低的内存占用
- 直接控制每个像素
- 适合静态信息展示
实际项目中，我曾在一个空气质量监测仪上同时使用两者：U8g2负责常驻的状态栏，LVGL处理主交互界面。
2. 驱动层适配实战
无论选择哪个框架，都需要实现底层显示接口。以LVGL为例，需要完成以下关键适配：
2.1 显示缓冲区配置
// 双缓冲配置示例 static lv_disp_draw_buf_t draw_buf; static lv_color_t buf1[128*10]; // 行缓冲 static lv_color_t buf2[128*10]; lv_disp_draw_buf_init(&draw_buf, buf1, buf2, 128*10);2.2 实现刷新回调
void my_disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) { uint16_t width = area->x2 - area->x1 + 1; Lcd_SetRegion(area->x1, area->y1, area->x2, area->y2); LCD_WriteIndex(0x2C); for(int y = area->y1; y <= area->y2; y++) { for(int x = area->x1; x <= area->x2; x++) { uint16_t color = color_p->full; LCD_WriteData_16Bit(color); color_p++; } } lv_disp_flush_ready(disp_drv); }2.3 输入设备集成
对于旋转编码器输入：
void encoder_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data) { static int32_t last_val = 0; int32_t new_val = read_encoder(); >#define LV_MEM_SIZE (8*1024) #define LV_DISP_DEF_REFR_PERIOD 30 #define LV_DPI_DEF 60字体选择策略：
- 仅嵌入使用到的字符
- 使用内置符号字体替代图片
- 考虑自定义位图字体生成工具
动态加载资源：
LV_IMG_DECLARE(logo_day); LV_IMG_DECLARE(logo_night); void update_ui_theme(bool is_night) { lv_img_set_src(logo_img, is_night ? &logo_night : &logo_day); }4. 完整案例：环境监测界面
下面是一个融合传感器数据的界面实现步骤：
创建基础布局：
lv_obj_t * chart = lv_chart_create(lv_scr_act()); lv_obj_set_size(chart, 120, 80); lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);添加实时数据系列：
lv_chart_series_t * temp_series = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y); lv_chart_set_next_value(chart, temp_series, sensor_read_temp());实现自动滚动：
static void timer_cb(lv_timer_t * timer) { lv_chart_set_next_value(chart, temp_series, get_new_temp()); lv_chart_refresh(chart); } lv_timer_create(timer_cb, 1000, NULL);添加交互控件：
lv_obj_t * btn = lv_btn_create(lv_scr_act()); lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL); static void btn_event_cb(lv_event_t * e) { if(e->code == LV_EVENT_CLICKED) { lv_chart_set_zoom_x(chart, 256); // 放大视图 } }
5. 性能调优实战
当界面出现卡顿时，可以尝试以下诊断方法：
使用性能监视器：
LV_PROFILER_BEGIN; // 可疑代码段 LV_PROFILER_END;关键优化点：
- 将
lv_conf.h中的LV_USE_PERF_MONITOR设为1 - 避免在回调中进行复杂计算
- 使用
lv_obj_mark_layout_as_dirty替代全局重绘
- 将
SPI优化技巧：
- 启用DMA传输
- 提升时钟频率至最大稳定值
- 使用硬件SPI替代模拟实现
在最近一个智能温控器项目中，通过以下调整将帧率从8FPS提升到15FPS：
- 将显示缓冲区从全屏改为1/4屏双缓冲
- 启用STM32的SPI DMA传输
- 简化界面中不必要的阴影效果
