为你的STM32小屏幕找个GUI：在1.8寸TFT上移植LVGL或U8g2的实战记录

当你的STM32项目需要一块1.8寸TFT屏幕来显示交互界面时，直接操作像素点显然不够高效。本文将带你探索如何在资源有限的嵌入式系统中，为ST7735驱动的128x160分辨率屏幕选择合适的GUI框架，并实现一个完整的交互式界面。

1. GUI框架选型：LVGL vs U8g2

面对嵌入式系统常见的资源限制，轻量级GUI框架成为首选。以下是两个主流选项的核心对比：

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. 完整案例：环境监测界面

下面是一个融合传感器数据的界面实现步骤：

1. 创建基础布局：

   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);

2. 添加实时数据系列：

   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());

3. 实现自动滚动：

   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);

4. 添加交互控件：

   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. 性能调优实战

当界面出现卡顿时，可以尝试以下诊断方法：

1. 使用性能监视器：

   LV_PROFILER_BEGIN; // 可疑代码段 LV_PROFILER_END;

2. 关键优化点：

   • 将lv_conf.h中的LV_USE_PERF_MONITOR设为1
   • 避免在回调中进行复杂计算
   • 使用lv_obj_mark_layout_as_dirty替代全局重绘

3. SPI优化技巧：

   • 启用DMA传输
   • 提升时钟频率至最大稳定值
   • 使用硬件SPI替代模拟实现

在最近一个智能温控器项目中，通过以下调整将帧率从8FPS提升到15FPS：

• 将显示缓冲区从全屏改为1/4屏双缓冲
• 启用STM32的SPI DMA传输
• 简化界面中不必要的阴影效果