vscode搭建LVGL模拟器

前言

我们在使用LVGL进行UI设计的时候，每次都需要烧录到MCU上才能看到结果，这样效率太低下了，所以这里使用VScode实现在PC上模拟LVGL

以下是基于LVGL v9.x在windows下实现的vscode搭建模拟器，老版本的模拟方法略有却别，具体请百度

准备工作

mingw64下载

由于官网更新后，导致官网直接下载的都是源码，现在下载需要前往github获取编译后的bin

github：Releases · niXman/mingw-builds-binaries

下载这个即可

image-20250809190112787

CMake下载

CMake官网：Download CMake

image-20250809190603245

SDL2下载

SDL2，全称为Simple DirectMedia Layer，是一个跨平台的多媒体开发库。SDL2提供了一系列函数，用于访问音频、键盘、鼠标、游戏杆和图形硬件，允许开发者编写一套代码即可在不同平台上运行。它的主要应用之一是游戏开发，许多知名游戏都是基于SDL2构建的。此外，SDL2也用于游戏开发工具、模拟器、样本演示和多媒体应用等。

在这里的LVGL就是使用了SDL2模拟一个显示触摸屏操作。

SDL2 github：Releases · libsdl-org/SDL

我们这里下载2.x版本的即可

image-20250809190809675

lvgl模拟器下载

lvgl的vscode模拟器github:lvgl/lv_port_pc_vscode

下载即可master版本(v9.3)即可：

image-20250809191012443

FreeRTOS下载

点击模拟器仓库中的FreeRTOS子模块，跳转后下载即可

或者访问github链接：FreeRTOS/FreeRTOS-Kernel at 23cfd114d314b0e2dc5e53a3540b0647fc0a1b5b

image-20250809191048685

image-20250809191228319

lvgl源码下载

github：lvgl/lvgl at db62f65c22811acf36b9b83da0228d7389317283

我们这里下载lvgl v9.3：

image-20250809191335183

lvgl驱动下载

lvgl 9.x版本之后，lvgl源码就自带了，不用下载了

新建模拟器项目

在此之前我要说：一定不能有中文文件夹!!!!!!!!!!

最终我们就得到了6个压缩包:

image-20250809191658035

我们将lv_port_pc_vscode_master压缩包解压后得到模拟器工程，这就是我们的工程文件夹模板

然后我们分别将对应的FreeRTOS、lvgl源码压缩包解压后的文件夹内的所有内容，全部复制到lv_port_pc_vscode_master对应的FreeRTOS文件夹、lvgl文件夹

image-20250809192136337

然后分别将CMake、mingw64、SDL2解压后的文件夹放到自己想要的位置。

image-20250809192342172

放好后，我们开始添加系统环境变量，分别将这三个文件夹的bin目录添加到系统环境目录下

image-20250809192438077

项目构建

vscode插件

在vscode中，插件要下好这几个：

image-20250809192724523

image-20250809192729592

vscode构建

打开我们之前的lv_port_pc_vscode_master文件夹，点击构建按钮，开始编译

image-20250809193712693

正常来说都能构建成功，构建完成后，会在bin目录下生成main.exe文件，我们点击它即可启动

image-20250809194556312

image-20250809193737253

然后就会显示默认的lvgl demo

image-20250815182348093

移植SquareLine代码开始模拟

在前面项目的基础上，创建一个user_code文件夹，然后将SquareLine导出的代码全部拷贝过来

image-20250815183329428

image-20250815183510853

修改ui.h中包含头文件路径

image-20250815183721050

然后回到main.c中，添加对应的头文件和ui_init代码

image-20250815183603301

image-20250815183621454

在根目录下的CMakeLists.txt的添加对应的内容，以便我们能使用user_code中的内容

image-20250815184022727

然后进行编译即可，遇到报错对应解决一下，解决不了问ai或百度!

可能遇到的问题

全量编译

我们遇到只修改main.c的文件后进行编译，非常之久的情况，因为默认的是设置编译生成的bin目录在根目录下，导致每一次修改过后，都会触发全量编译，而lvgl的demo那些很多，所以就会等待很久

解决方法：

将CMakeLists下的输出可执行文件的路径，改为变为build目录下，而不是根目录下

image-20250810160901508

image-20250810160937398

未定义的SDL_main

编译最后报错:

image-20250809200307429

把main.c里的main函数名改为SDL_main即可

image-20250809200408451

image-20250809200445877

找不到文件sdl2-config.cmake

如果遇到CMake构建时报错找不到这个文件，我们可以再次确认是否SDL添加进环境变量，然后重启一下电脑，看看可以不。

image-20250809195652996

解决方法1：如果不可以，我们修改CMakeLists.txt中的内容，添加一行SDL2_DIR路径即可(路径为你自己放SDL2的目录下)

image-20250809194646290

image-20250809195138957

解决方法2：由于这个文件在x86_64_mingw32\lib目录下，所以将其添加到环境变量试一试

image-20250830000221649