1、UI界面设计

将SquareLine Studio设计的文件导出到 ui文件夹 下。

2、Vscode仿真文件夹构建

        Vscode的环境配置和仿真文件夹的构建我都是根据这篇文章（   LVGL在VScode中安装模拟器运行配置笔记教程_vscode lvgl-CSDN博客）的步骤来的。

到文章的第3步，使用Vscode打开创建的仿真文件夹，给当前的CMake项目选择编译器，我的Vscode窗口在下面没有显示当前可用的编译器。

我是通过Ctrl + Shift + P，输入 CMake: Select a Kit 点击后会出现当前可使用的编译器。

如果输入CMake: Select a Kit 没有弹出这个选项。可以按 Ctrl + Shift + P，输入 Reload Window

重新加载窗口，等 VSCode 完全加载后，再按 Ctrl + Shift + P，输入 CMake: Select a Kit。

选择最下面可用的编译器即可。

如果没有配置编译器的情况下直接点击下方的  生成按钮 ，或者按 Ctrl + Shift + P，输入CMake:Quick Start。

会弹出 添加新预设 这个选项，那是CMake 没给  项目 指定编译器（配置预设），所以无法生成构建文件。

点击后会弹出三个选项，选择编译器创建就是让 VSCode 自动扫描你电脑里已安装的编译器（比如 MinGW 的 gcc.exe），再自动生成一套配置预设。适合已安装 MinGW让Vscode自动识别。

当点击从编译器创建后，就会弹出扫描编译器。

扫描完后会找到系统的MingGW，并创建CMakePresents.json

CMakePresents.json文件中有GCC的各种参数。

然后在按照 2、Vscode仿真文件夹构建的步骤选择编译器就可以了。

另外如果安装了多个版本的MinGW，要保证CMakePresents.json文件中是你要使用的那个版本的MinGW，另外如果要更换MinGW版本，需要清除CMake缓存和删除bulid文件夹（每次点击生成按钮都会重建的），有可能缓存中还是旧版本的MinGW，导致编译不通过。

通过上面的步骤就可以将 项目的编译器 配置好了，剩下的就是修改CMakeList.txt文件了。

3、CMakeList.txt文件修改

        CMakeList.txt 的作用是告诉 CMake工具 项目有哪些文件、用什么编译器、怎么编译、链接什么库"，然后 CMake工具会 自动生成具体的构建脚本（如 Makefile）。

我的 CMakeList.txt 文件结构：

#创建每个CMakeLists.txt文件固定的
cmake_minimum_required(VERSION 3.10)
project(lvgl)
set(CMAKE_C_STANDARD 11)#C11
set(CMAKE_CXX_STANDARD 17)#C17
set(CMAKE_CXX_STANDARD_REQUIRED ON)

#${PROJECT_SOURCE_DIR} = 项目根目录（CMakeLists.txt 所在目录）编译器会在这里查找 #include "xxx.h"
INCLUDE_DIRECTORIES(${PROJECT_SOURCE_DIR})

#递归收集所有头文件 GLOB_RECURSE = 递归搜索子目录匹配 lv_drivers/、lvgl/demos/、lvgl/、当前目录下的所有 .h 文件存到变量 INCLUDES 中
file(GLOB_RECURSE INCLUDES "lv_drivers/*.h" "lvgl/demos/*.h"  "lvgl/*.h" "ui/*.h")

#递归收集所有源文件匹配 .c 文件，存到 SOURCES 变量
file(GLOB_RECURSE SOURCES  "lv_drivers/*.c" "lvgl/demos/*.c"  "lvgl/*.c" "ui/*.c" "ui/components/*.c" "ui/screens/*.c")

#设置可执行文件输出目录编译生成的 main.exe 会放到 项目根目录/bin/
SET(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin)

#设置 C++ 编译优化级别 -O3 = 最高优化（但你的项目是 C 文件，应该用 CMAKE_C_FLAGS）
SET(CMAKE_CXX_FLAGS "-O3")


#查找 SDL2 库REQUIRED = 必须找到，否则报错找到后会设置 SDL2_INCLUDE_DIRS 和 SDL2_LIBRARIES
find_package(SDL2 REQUIRED SDL2)

#添加 SDL2 头文件路径 让编译器能找到 SDL.h
include_directories(${SDL2_INCLUDE_DIRS})

#生成可执行文件 定义编译目标 main.exe
add_executable(main main.c mouse_cursor_icon.c ${SOURCES} ${INCLUDES})

# 拷贝SDL2.dll 文件到 bin目录下
file(COPY SDL2.dll DESTINATION ../bin)


#添加编译宏定义  等价于 C 代码中的 #define LV_CONF_INCLUDE_SIMPLE
add_compile_definitions(LV_CONF_INCLUDE_SIMPLE)

#链接 SDL2 库 把 main.exe 和 SDL2 库链接起来 PRIVATE = 仅当前目标使用，不传递
target_link_libraries(main PRIVATE SDL2 )

#添加自定义命令 make run  运行：cmake --build build --target run 或直接执行编译好的 main.exe
add_custom_target (run COMMAND ${EXECUTABLE_OUTPUT_PATH}/main)

到这里就可以仿真LVGL官方的模板了。

4、自己设计的UI界面移植

        将从SquareLine导出的 ui文件 夹放到 lvgl_template_v8.3文件夹下。文件结构如下：

然后在main.c文件中，将main函数下的lv_demo_widgets()，修改成 ui文件夹 下，ui.c 中的ui_init() 函数。

运行效果如下（一个简单的界面）：

如果在SquareLine  Studio中修改了界面，在Vscode中直接替换 ui文件夹 即可，不用过多修改。

另外，要保证在SquareLine Studio导出的LV_COLOR_DEPTH 和Vscode仿真的LV_COLOR_DEPTH一致，可以在lv_conf.h中修改LV_COLOR_DEPTH，当前是16 。

是否显示内存占用等信息，也可在lv_conf.h中设置，1为显示，0为不显示

如果想要修改仿真界面的高和宽，可以在lv_drv_conf.h中修改。

学习过程中梳理出来的，如果有错欢迎指出！