• 一、前言
• 二、下载并安装VS Code(方法很多，总之装好VS Code就行了)
• 三、 获取源码
  • 3.2 方法一：从Github拉取源码（有梯子）
  • 3.3 方法二：从Gitee码云拉取源码（无梯子）
• 四、安装Linux SDL2驱动
• 五、编译源码

一、前言

​ LVGL是一个可高度可裁剪、低资源占用、界面美观且易用的C语言嵌入式系统图形库，是当下最流行的嵌入式图形库之一。你可以通过调用该库提供的函数，创建出自己想要的图形界面，然后移植到你自己的嵌入式开发板上。使用LVGL的嵌入式开发者很多，在网上也比较容易找资源，遇到问题大部分也可以在网上找到答案。

​ 图1-LVGL官方演示例程：

​

​ LVGL支持模拟器，模拟器支持Windows、Linux或macOS系统，你也可以先在电脑上先运行你的LVGL项目，当你觉得界面设计的差不多的时候，再把源码移植到嵌入式开发板上。

​ 官方列出了支持LVGL模拟器的IDE如下表：

​ 大多数开发者都使用Windows平台下的VisualStudio运行LVGL模拟器，网上的环境搭建教程也很多。但是在Linux上使用LVGL模拟器的教程相对较少，难免有些就喜欢折腾Linux的人，所以本文选择上表中的第四个IDE——“VSCode + SDL/X11 驱动”的方式，在Ubuntu系统上运行LVGL模拟器。

二、下载并安装VS Code(方法很多，总之装好VS Code就行了)

• 方法一：也可以通过Ubuntu内置的Firfox浏览器下载VS Code的.deb安装包（https://code.visualstudio.com/Download）：

  

• 执行dpkg指令安装VS Code：

  sudo dpkg -i code_1.85.1-1702462158_amd64.deb
  

  

• 方法二：在较新版本的Ubuntu内，你甚至可以直接在应用商店搜索安装VS Code：

  

  

• 方法三：使用wget指令下载VS Code安装包（版本可能会变化，下载链接可能会变化）：

  wget https://vscode.download.prss.microsoft.com/dbazure/download/stable/0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2/code_1.85.1-1702462158_amd64.deb
  

  

• 执行dpkg指令安装VS Code：

  sudo dpkg -i code_1.85.1-1702462158_amd64.deb
  

三、 获取源码

3.2 方法一：从Github拉取源码（有梯子）

• 步骤1：通过git clone指令拉取LVGL模拟器源码，GitHub网址：https://github.com/lvgl/lv_port_pc_vscode。

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

• 但是由于国内访问github很不稳定，如果你没有梯子的话，上面这条指令大概率会拉取失败，这时你可以直接去看第3.3小节。

  

• 步骤2：切换分支

  由于上一条指令我们递归拉取的lv_port_pc_vscode源码包含lv_drivers和lvgl两个子分支，这两个子分支默认是最新版本的lvgl库，我们不要最新的，要切换成最稳定的。

  ![](/i/l/?n=24&i=blog/2757723/202401/2757723-20240113183904864-1252658460.png)
  

  通过如下指令切换分支：

  cd lv_port_pc_vscode/lvgl/
  git checkout origin/release/v8.3
  
  cd ../lv_drivers/
  git checkout origin/release/v8.3
  

3.3 方法二：从Gitee码云拉取源码（无梯子）

• 步骤1：我在国内的码云上传了这份源码（v8.3稳定版），可以通过如下指令拉取到自己的本地：

  git clone https://gitee.com/bi_an_gitee/lv_port_pc_vscode_8.3.git
  

  

四、安装Linux SDL2驱动

• 步骤1：执行下方指令安装Linux SDL2驱动

  sudo apt-get update && sudo apt-get install -y build-essential libsdl2-dev
  

• 检查SDL2版本：

  sdl2-config --version
  

  

五、编译源码

• 步骤1：使用VS Code打开源码

  cd ~/01_lvgl/lv_port_pc_vscode #注意替换成自己的lv_port_pc_vscode源码根目录路径
  code ./
  

  

• 步骤2：在VS Code内新建一个终端，方便修改源码和编译。

  

• 步骤3：修改源码Makefile，把模拟器的显示驱动切换成SDL2，使用默认的X11驱动会提示找不到头文件，如下图。

  

  *注意：编译时如果提示“找不到不到make命令”，通过如下指令安装make和gcc：

  sudo apt install make
  sudo apt install gcc
  

• 步骤4：编译成功如下图所示。

  

欢迎大家留言讨论，关注我，后面会出更多和LVGL、嵌入式相关文章。