效果图：

软件版本：

IDE：vscode + plotformio

单片机：ESP32

屏幕：SPI ST7789 2.4寸 240 320

Gui Guider：1.9.0 支持 LVGL 8.3.10 9.2.1版本

LVGL ：9.2.2

这里我看了一下9.2.2对比9.2.1的更新改动不是特别大。所以支持9.2.2目前也没有发现什么问题。

概述

Guider 和 LVGL（Light and Versatile Graphics Library）之间的关系主要体现在图形用户界面（GUI）设计和开发的上下文中。LVGL 是一个用于嵌入式系统的开源图形库，它提供了创建复杂且美观的图形界面所需的各种工具和组件。而 Guider 则是与 LVGL 相关联的一个图形界面设计工具，专门用来简化 LVGL 应用的设计过程。

关系概述

• LVGL：作为核心，LVGL 提供了构建嵌入式系统图形界面的基础功能。这包括各种UI组件（如按钮、标签、图表等）、动画效果、支持多点触控等功能。开发者可以直接使用 C 语言调用 LVGL 的 API 来创建界面，但这个过程可能需要较多的手动编码工作，并要求开发者对 LVGL 的API有较深的理解。

• Guider：是一个可视化的界面设计器，旨在使 LVGL 的界面开发变得更加直观和高效。通过 Guider，开发者可以使用拖拽式的界面来设计应用的外观，无需手动编写大量的代码。设计完成后，Guider 能够生成相应的 LVGL 代码或配置文件，这些可以直接集成到您的项目中。这样不仅加快了开发速度，也降低了入门门槛，使得即使是不太熟悉 LVGL API 的开发者也能快速上手。

下载地址

GUI Guider | NXP 半导体

注册登录后点击下载即可。

使用教程

点击创建新项目

选择版本，我这里选的则V9.2.1

选择画板

选择一些案例，这里后面可以去试一下找一下灵感，有很多漂亮的组件。我这边选的是空画板。

选择画板的尺寸

默认配置：

中文显示

屏幕上显示中文

给要显示中文的控件选择这个字体即可。

控件图：

运行按钮：

应用：

编译完成后可以去找到你这个工程的目录下，找到这两个文件夹，赋值到你的ESP32工程目录下

我这边直接复制到了lib下。

包含下绝对路径，之前调整过头文件的路径问题，问题很多，所以这里就直接包含绝对路径了。

声明一下。

初始化，这里界面就可以正常显示出来了。 下面第二句代码是LVGL的库函数，可以控制生成的UI的tabelView默认显示第几个，这个API比较多，我也没有记住很多。

整体流程基本如此。