当前位置：首页 > news >正文

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

news 2026/6/14 10:53:50

为你的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替代模拟实现