ESP32+1.3寸屏保姆级教程：用PlatformIO搞定TFT_eSPI和LVGL驱动（附完整代码）

ESP32与1.3寸TFT屏幕的终极开发指南从PlatformIO到LVGL的完美实践在创客和嵌入式开发领域ESP32凭借其强大的性能和丰富的功能接口成为了物联网和交互式项目的首选微控制器。而1.3寸TFT屏幕则是小型项目中显示交互界面的理想选择尺寸适中且价格亲民。本文将带你从零开始在VSCodePlatformIO环境下一步步完成ESP32与1.3寸TFT屏幕的驱动配置并实现LVGL图形库的完美运行。1. 硬件准备与平台搭建1.1 硬件清单与连接首先确保你手头有以下硬件组件ESP32开发板如ESP-WROOM-321.3寸TFT屏幕240×240分辨率ST7789驱动杜邦线若干Micro USB数据线对于1.3寸TFT屏幕的接线参考以下配置屏幕引脚ESP32引脚功能说明GNDGND接地VCC3.3V电源SCLD18SPI时钟SDAD23SPI数据RESD19复位DCD5数据/命令选择BLKD21背光控制可选提示不同厂商的屏幕引脚定义可能略有差异务必参考你的屏幕规格书确认引脚功能。1.2 开发环境配置安装VSCodeVisual Studio Code在VSCode扩展商店中搜索并安装PlatformIO IDE安装完成后通过PlatformIO主页创建新项目选择ESP32 Dev Module作为开发板选择Arduino作为框架指定项目保存路径; platformio.ini 基础配置示例 [env:esp32dev] platform espressif32 board esp32dev framework arduino monitor_speed 1152002. TFT_eSPI库的配置与优化2.1 安装与基础配置在PlatformIO项目中添加TFT_eSPI库打开PlatformIO主页选择Libraries标签搜索TFT_eSPI并安装最新版本安装完成后需要修改库的用户配置文件导航到项目目录下的.pio/libdeps/esp32dev/TFT_eSPI文件夹打开User_Setup.h文件进行编辑// User_Setup.h 关键配置示例 #define ST7789_DRIVER // 指定使用ST7789驱动 #define TFT_WIDTH 240 // 屏幕宽度 #define TFT_HEIGHT 240 // 屏幕高度 // 引脚定义 #define TFT_MOSI 23 // SPI数据线 #define TFT_SCLK 18 // SPI时钟线 #define TFT_CS -1 // 未使用片选 #define TFT_DC 5 // 数据/命令选择 #define TFT_RST 19 // 复位引脚 #define TFT_BL 21 // 背光控制 #define SPI_FREQUENCY 40000000 // SPI通信频率(40MHz)2.2 常见问题解决在配置过程中你可能会遇到以下问题SPI库引用错误 在platformio.ini中添加以下配置解决lib_ldf_mode deep屏幕显示异常检查SPI频率是否设置过高确认所有引脚连接正确尝试调整屏幕旋转方向tft.setRotation(1); // 参数0-3对应不同旋转方向背光不亮 确保BLK引脚已连接并正确配置或尝试直接连接3.3V3. LVGL图形库的集成与配置3.1 LVGL库的安装与初始化通过PlatformIO安装LVGL库建议选择8.x稳定版本在项目目录中创建lvgl_conf.h文件复制lvgl/lvgl_conf_template.h并重命名启用基本配置// lvgl_conf.h 关键配置 #define LV_COLOR_DEPTH 16 // 颜色深度(16bit) #define LV_HOR_RES_MAX 240 // 水平分辨率 #define LV_VER_RES_MAX 240 // 垂直分辨率 #define LV_USE_LOG 1 // 启用日志 #define LV_USE_USER_DATA 1 // 启用用户数据3.2 LVGL与TFT_eSPI的对接在main.cpp中实现显示驱动接口#include lvgl.h #include TFT_eSPI.h static TFT_eSPI tft; static lv_disp_draw_buf_t draw_buf; static lv_color_t buf[TFT_WIDTH * 10]; // 显示缓冲区 // 显示刷新回调函数 void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) { uint32_t w area-x2 - area-x1 1; uint32_t h area-y2 - area-y1 1; tft.startWrite(); tft.setAddrWindow(area-x1, area-y1, w, h); tft.pushColors((uint16_t *)color_p-full, w * h, true); tft.endWrite(); lv_disp_flush_ready(disp); } void setup() { // 初始化TFT屏幕 tft.init(); tft.setRotation(0); tft.fillScreen(TFT_BLACK); // 初始化LVGL lv_init(); lv_disp_draw_buf_init(draw_buf, buf, NULL, TFT_WIDTH * 10); // 配置显示驱动 static lv_disp_drv_t disp_drv; lv_disp_drv_init(disp_drv); disp_drv.hor_res TFT_WIDTH; disp_drv.ver_res TFT_HEIGHT; disp_drv.flush_cb my_disp_flush; disp_drv.draw_buf draw_buf; lv_disp_drv_register(disp_drv); // 创建测试界面 lv_obj_t *label lv_label_create(lv_scr_act()); lv_label_set_text(label, Hello LVGL!); lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); } void loop() { lv_timer_handler(); // 处理LVGL任务 delay(5); }4. 高级优化与性能提升4.1 双缓冲与内存优化为了提升显示流畅度可以实现双缓冲机制// 定义两个缓冲区 static lv_color_t buf1[TFT_WIDTH * 20]; static lv_color_t buf2[TFT_WIDTH * 20]; // 初始化时使用双缓冲 lv_disp_draw_buf_init(draw_buf, buf1, buf2, TFT_WIDTH * 20);4.2 触摸输入支持如果你的屏幕支持触摸功能可以添加触摸驱动#include XPT2046_Touchscreen.h #define TOUCH_CS 16 // 触摸芯片片选引脚 XPT2046_Touchscreen touch(TOUCH_CS); // 触摸读取函数 void my_touchpad_read(lv_indev_drv_t *indev, lv_indev_data_t *data) { if (touch.touched()) { TS_Point p touch.getPoint(); >// 背光控制函数 void setBacklight(bool state) { digitalWrite(TFT_BL, state ? HIGH : LOW); } // 在需要时关闭背光节省电量 setBacklight(false);5. 实战项目构建简易天气站界面结合LVGL的丰富组件我们可以创建一个美观的天气显示界面void createWeatherUI() { // 创建主样式 static lv_style_t main_style; lv_style_init(main_style); lv_style_set_bg_color(main_style, lv_color_hex(0x000000)); // 应用主样式 lv_obj_t *scr lv_scr_act(); lv_obj_add_style(scr, main_style, 0); // 添加温度显示 lv_obj_t *temp_label lv_label_create(scr); lv_label_set_text(temp_label, 25°C); lv_obj_set_style_text_color(temp_label, lv_color_hex(0xFFFFFF), 0); lv_obj_set_style_text_font(temp_label, lv_font_montserrat_48, 0); lv_obj_align(temp_label, LV_ALIGN_TOP_LEFT, 20, 20); // 添加天气图标 LV_IMG_DECLARE(icon_cloudy); lv_obj_t *icon lv_img_create(scr); lv_img_set_src(icon, icon_cloudy); lv_obj_align(icon, LV_ALIGN_TOP_RIGHT, -20, 20); // 添加日期时间 lv_obj_t *date_label lv_label_create(scr); lv_label_set_text(date_label, 2023-07-15 14:30); lv_obj_set_style_text_color(date_label, lv_color_hex(0xCCCCCC), 0); lv_obj_align(date_label, LV_ALIGN_BOTTOM_MID, 0, -20); }注意实际项目中你需要准备天气图标并添加到LVGL资源文件中。