基于ESP32S3的智能终端项目--3.quareLine Studio 绘制 LVGL 界面

在嵌入式 GUI 开发中，手动编写每个控件的位置和样式非常耗时。SquareLine Studio 是一个强大的拖拽式 LVGL 界面设计工具，可以让我们像画图一样设计界面，并自动生成 C 代码。本文将带你快速上手：从安装、设计到移植到 ESP32-S3 的 PlatformIO 工程。

1. 安装 SquareLine Studio

• 下载 SquareLine Studio V1.5.0 安装包（官网或网盘）。

• 双击安装，一路 Next 即可。

2. 创建新工程

打开软件，点击 File -> New，选择 Arduino with TFT_eSPI（版本选 v1.1.1）。右侧面板设置：

• Project Name ：自定义，如 ESP32_S3_Terminal

• Resolution ：320x240（与你的屏幕匹配）

• Rotation ：0 degree

• Color Depth ：16 bit

• LVGL Version ：8.3.6（与项目中 LVGL 版本一致）

  其他默认，点击 Create。

3. 设计界面（简要）

• 左侧控件库拖拽按钮、标签、面板等到画布上。

• 右侧属性面板调整大小、对齐、样式。

• 可添加多个屏幕（Screen），并通过"Initial actions"设置启动屏幕。

4. 导入图标和字体（可选）

• 从 iconfont 下载 PNG 图标或 TTF 字体文件。

• 点击右下角 ADD FILE INTO ASSETS，导入资源，之后可在界面中使用。

5. 导出 UI 代码

设计完成后，点击菜单 File -> Export -> Create Template Project，选择一个文件夹保存。导出的工程中包含 libraries/ui 文件夹，这就是我们需要的 UI 源代码。

6. 移植到 PlatformIO 工程

• 打开你的 ESP32-S3 PlatformIO 项目（比如 esp32-lvgl-terminal）。

• 将导出的 ui 文件夹整个复制到项目的 src 目录下（最终路径：src/ui/）。

• 在 src/main.cpp 中包含 UI 头文件：

  cpp
  
  #include "ui/ui.h"

• 在 setup() 函数中，完成 LVGL、显示器和触摸初始化 之后 ，调用 ui_init()：

  cpp
  
  void setup() {
      Serial.begin(115200);
      lv_init();
      tft.begin();
      touch.begin(); // 如果有触摸
      ui_init();     // 加载 SquareLine 设计的界面
      // 其他初始化（如任务创建）
  }

7. 编译与烧录

• 点击 PlatformIO 底部工具栏的 ✓ 编译，→ 上传。

• 如果一切顺利，屏幕将显示你在 SquareLine Studio 中设计的界面。

注意事项

• 确保 SquareLine 导出的 LVGL 版本（8.3.6）与项目中 lv_conf.h 配置的版本一致。

• 如果屏幕方向不对，可在 lv_conf.h 或 TFT_eSPI 的 User_Setup.h 中调整旋转。

• 控件的事件回调（如按钮点击）需要在生成的 UI 文件中手动添加（后续可再写一篇事件处理教程）。