1、搭建VScode的LVGL模拟器

这个网上教程很多，这里不再啰嗦，可自行百度搭建，同时这里我也给出一篇网上找到的文章放这里：
https://zhuanlan.zhihu.com/p/719470425

2、Gui guider的安装

NXP 官网GUI GUIDER下载

• 在NXP官网选中对应的系统下载即可，下载完成后直接next，没有什么其他的复杂环境配置
• 不过因为LVGL版本和VScode模拟器的版本（看自己是具体什么版本，上述连接是1.8.3），gui
  guider建立项目的时候需要注意一下要建立自己的LVGL版本

3、移植

3.1 复制所需文件
将GUI GUIDER的工程里面的复制带VScode工程里面

• custom：用户自定义代码目录，不会被GUI Guider覆盖，可在此编写界面响应逻辑代
• generated： GUI Guider自动生成的代码目录，包含UI结构和事件处理代码
• import：导入的资源文件目录，存放图片、字体等外部资源

3.2 修改CMakelist.txt
打开CMakeList.txt，添加以下代码解决gui_guider生成的代码找不到头文件问题

INCLUDE_DIRECTORIES(${PROJECT_SOURCE_DIR} ${PROJECT_SOURCE_DIR}/lvgl ${PROJECT_SOURCE_DIR}/guider_code/generated ${PROJECT_SOURCE_DIR}/guider_code/custom)

file(GLOB_RECURSE INCLUDES "lv_drivers/*.h" "lvgl/demos/*.h"  "lvgl/*.h"  "./*.h" "guider_code/**/*.h")
file(GLOB_RECURSE SOURCES  "lv_drivers/*.c" "lvgl/demos/*.c"  "lvgl/src/*.c"  "guider_code/**/*.c")

3.3 修改main.c

//增加头文件
#include "guider_code/generated/gui_guider.h"
#include "guider_code/generated/events_init.h"

//定义一个全局变量
lv_ui guider_ui;
//在main初始化添加
setup_ui(&guider_ui);
events_init(&guider_ui);
custom_init(&guider_ui);  // 添加这一行