一、简介

LVGL全程LittleVGL，是一个轻量化的，开源的，用于嵌入式GUI设计的图形库。并且配合LVGL模拟器，可以在电脑对界面进行编辑显示，测试通过后再移植进嵌入式设备中，实现高效的项目开发。

SquareLine Studio是LVGL官方推荐的UI设计平台，可以便捷地设计界面并一键生成代码导出。导出的代码在模拟器和嵌入式设备上都适用。目前支持的LVGL版本为8.2和8.3。对个人而言，注册即可免费使用。

官方地址：SquareLine Studio

二、platformio 移植

1 PlatformIO下载LVGL库

在PlatformIO库中直接搜索LVGL库添加到工程

（ps：因为这里下载的v8.1.0版本没有lv_demos，若需要运行例程可以自己再下载一个，不过注意下载完后需要lv_demo_conf_template.h改成lv_demo_conf.h，要不然不能编译）

2 修改文件名

lvgl_config_template.h修改为lvgl_config.h

#if 0 的0改为1

这时候就可以编译了（否则编译报错）

3 移植显示驱动

添加TFT_eSPI库

定义彩屏引脚（在User_Setup.h文件里）

配置文件修改

在User_Setup.h文件中选择取消注释你需要的驱动文件

修改分辨率

（ps：LVGL的长宽设置是横着来看的，原本TFT库的是竖着来看的，所以这里长宽需要反过来，当然视具体情况而定）

其他就不说了，具体修改如下

#define ST7789_DRIVER 
//色彩
#define ESP32_DMA
#define TFT_RGB_ORDER TFT_BGR
#define TFT_INVERSION_OFF
//分辨率
#define TFT_WIDTH 240
#define TFT_HEIGHT 240
//管脚
#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18#define TFT_CS 5 // Chip select control pin
#define TFT_CS -1
#define TFT_DC 27  // Data Command control pin
#define TFT_RST 26 // Reset pin (could connect to RST pin)
//字体
#define SMOOTH_FONT
//SPI速率
#define SPI_FREQUENCY  40000000
#define SPI_READ_FREQUENCY 6000000

测试代码：

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>static lv_disp_draw_buf_t draw_buf;    //定义显示器变量
static lv_color_t buf[TFT_WIDTH * 10]; //定义刷新缓存TFT_eSPI tft = TFT_eSPI();/* Display flushing */
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.init();         //初始化tft.setRotation(3); //屏幕旋转方向（横向）lv_init();lv_disp_draw_buf_init(&draw_buf, buf, NULL, TFT_WIDTH * 10);/*Initialize the display*/static lv_disp_drv_t disp_drv;lv_disp_drv_init(&disp_drv);/*Change the following line to your display resolution*/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);/*获取LVGL版本信息*/String LVGL_Arduino = "Hello LVGL! ";LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch(); //版本lv_obj_t *label = lv_label_create(lv_scr_act());lv_label_set_text(label, LVGL_Arduino.c_str());lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); //居中显示
}void loop()
{lv_timer_handler(); /* let the GUI do its work */delay(5);
}

4 使用SquareLine Studio生成ui代码

（1）打开创建工程界面

这里可以看到SquareLine Studio可以直接选择Arduino的tft_espi库的接口，这大大方便了我们的移植。

（2）设置屏幕参数

（3）设计UI界面

（4）生成代码

选择Export-Export UI Files导出项目文件，并将该文件夹放置到platform项目中的lib文件目录下

有时候会报一些配置的错误 ，直接排除就好。因为有时候你的屏幕没有触摸功能，但是你的UI有，并且生成了代码，就会报错。

测试代码

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>
#include "ui.h"static lv_disp_draw_buf_t draw_buf;    //定义显示器变量
static lv_color_t buf[TFT_WIDTH * 10]; //定义刷新缓存TFT_eSPI tft = TFT_eSPI();/* Display flushing */
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.init();         //初始化lv_init();lv_disp_draw_buf_init(&draw_buf, buf, NULL, TFT_WIDTH * 10);/*Initialize the display*/static lv_disp_drv_t disp_drv;lv_disp_drv_init(&disp_drv);/*Change the following line to your display resolution*/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);ui_init();
}void loop()
{lv_timer_handler(); /* let the GUI do its work */delay(5);
}