背景说明

小白刚开始接触LVGL，前些日子狠心花198元入手了一块堪称LVGL 入门利器~HMI-Board 开发板，虽然有RT-Thread 集成好的LVGL 环境，只需要几个步骤就能成功把lvgl 的示例运行起来，对于爱折腾的我来说，过于简单也并非好事，对其中的实现流程也是一无所知。于是便想着尝试把lvgl 官方的代码在vscode 运行起来。

步骤1：git 克隆 lv_port_vscode 仓库

lvgl 官方有说明模拟器可以在 linux/mac 平台上使用VS Code,目前暂不支持Windows 系统下使用 VS Code 模拟器。

官方提供GitHub - lvgl/lv_port_pc_vscode的 git 仓库`GitHub - lvgl/lv_port_pc_vscode`在git 仓库里面有README 文档，下面按照官方文档在 WSL2 中进行操作。

• 1.运行vscode 进入wsl 环境，创建`lvgl_workspace`目录,后面的操作都在这个文件夹下执行。
• 2.使用git clone 命令克隆git 仓库

git clone --recursive https://github.com/lvgl/lv_port_pc_vscode

但是在这里克隆时间特别长，而且很大概率会不成功，这里尝试在使用git 代理把仓库克隆下来，然后拷贝到 lv_port_pc_vscode 目录下。

这里使用git 代理的方式把lvgl 仓库克隆下来到本地，下一步需要把lvgl 的仓库切换到指定的版本，避免因版本不同编译出错。

在vs code 终端中查看git 克隆到本地的git 状态。

• 根据git 仓库的 README 操作安装SDL / X11，这里主要安装 SDL 。

sudo apt-get update && sudo apt-get install -y build-essential libsdl2-dev wget https://kumisystems.dl.sourceforge.net/project/freetype/freetype2/2.13.2/freetype-2.13.2.tar.xz tar -xf freetype-2.13.2.tar.xz cd freetype-2.13.2 make make install git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg cd ffmpeg git checkout release/6.0 ./configure --disable-all --disable-autodetect --disable-podpages --disable-asm --enable-avcodec --enable-avformat --enable-decoders --enable-encoders --enable-demuxers --enable-parsers --enable-protocol='file' --enable-swscale --enable-zlib make sudo make install

安装完成后，在VS CODE 中使用 F5 快捷键进行编译工程，会提示下面的错误。

这个错误是因为git clone 仓库的时候子模块 lv_drivers 目录下的文件没有同步好，这时候我们命令行切换到 lv_drivers 目录，进行下面的操作。

终端中执行下面的命令

cd lv_port_pc_vscode/ git checkout 5a5b4a1

输入git status 命令查看，分支切换是否成功。

此时，再切回到`lv_port_pc_vscode`目录下，按下键盘的F5 快捷键编译工程，一般到此应该可以正常运行lvgl 才对，然而实际运行报了下面一个错误，瞬间不知道咋回事。

这里折腾了不少时间，由于这个错误完全没看懂，实在没有办法，只能尝试wsl2 环境下gui 显示（这里是sdl ）看看功能是否正常。

找到`Run Linux GUI apps with WSL | Microsoft Learn`这个链接，抱着尝试的心态看看能不能运行起来。

在操作之前需要再次确认一下 WSL 环境下linux 环境是使用WSL2 的版本，可以使用

查看WSL 环境下linux 环境是哪个版本 wsl --list -v

确认是WSL 2 版本，然后进行安装相关GUI 软件,在安装gui 软件之前先更新一下wsl ，这里不确定是否有效，不过还是按照官方的推荐操作执行一遍。

按照上面的命令执行（需要退出wsl 环境，这里把vscode 关闭后再在powershell 中执行）。

接下来，正式开始安装gui app.

sudo apt update sudo apt install gedit -y sudo apt install gimp -y 此时gui 界面都能正常显示，但是再次在工程中按下F5 依旧是报错。 后面尝试重新安装gdb，居然可以正常运行了。 apt-get install gdb

所以前面报错的原因竟是没有安装gdb.

运行效果显示：

到此基于wsl 搭建的LVGL 环境搭建完成，下一步开始学习 LVGL 的使用和界面设计。