2、环境搭建与工具链：TouchGFX Designer vs LVGL模拟器、IDE配置、交叉编译环境准备

说实话，很多从 TouchGFX 转过来的朋友，第一反应就是：「LVGL 的开发环境怎么这么散？」

嗯，这确实是事实。TouchGFX 有官方的一站式 Designer，开箱即用。但 LVGL 走的是另一条路——它给你更多自由，也意味着你得自己搭积木。我个人觉得，这种「散」恰恰是 LVGL 的优势，尤其是在嵌入式资源受限的场景下。

这一章，我就带你把这堆积木一块块拼起来。我们从工具对比开始，再到 IDE 配置，最后搞定交叉编译。走完这一遍，你就能在自己的板子上跑起第一个 LVGL 界面了。

核心结论： TouchGFX Designer 适合快速原型，LVGL 模拟器适合调试和验证。迁移过程中，我建议先用模拟器跑通逻辑，再移植到目标硬件。

2.1 工具链全景对比

先看一张总览图，把两个生态的工具链放在一起比一比。这样你心里就有底了。

TouchGFX vs LVGL 工具链全景对比 TouchGFX 生态 TouchGFX Designer（可视化设计） STM32CubeMX + IDE 集成 STM32 HAL / BSP 驱动层 硬件（STM32 + 显示屏） LVGL 生态 SquareLine Studio / NXP GUI Guider LVGL 模拟器（SDL/PC 仿真） CMake / Makefile + 任意 IDE 硬件（MCU/MPU + 显示驱动）

从图上你能看到，TouchGFX 的链路是「设计→配置→驱动→硬件」，一条线走到底。LVGL 则更灵活——你可以用 SquareLine Studio 做 UI，也可以用模拟器在 PC 上调试，最后通过 CMake 或 Makefile 编译到目标平台。

我的建议： 迁移初期，先在 LVGL 模拟器上跑通界面逻辑。模拟器调试效率比反复烧录固件高太多了。等界面稳定了，再切到交叉编译环境。

2.2 LVGL 模拟器搭建（PC 端）

模拟器是 LVGL 生态里最实用的工具之一。说白了，它就是在你的 Windows/Linux 电脑上用 SDL 库模拟一个显示屏，让你直接运行 LVGL 程序。

我记得第一次用模拟器时，心里还嘀咕：「这能跟真机一样吗？」结果跑起来后发现，除了触摸需要鼠标模拟，其他几乎一模一样。调试效率翻倍。

2.2.1 环境依赖

  • 编译器： MinGW（Windows）或 GCC（Linux/macOS）
  • SDL2 库： 用于模拟显示和输入
  • CMake： 版本 3.10 以上
  • Git： 用于拉取 LVGL 源码

2.2.2 快速搭建步骤

  1. 克隆 LVGL 官方模拟器仓库：
git clone https://github.com/lvgl/lv_port_pc_eclipse.git
cd lv_port_pc_eclipse
  1. 安装 SDL2 库（以 Ubuntu 为例）：
sudo apt-get install libsdl2-dev
  1. 用 CMake 构建：
mkdir build && cd build
cmake ..
make -j4
  1. 运行模拟器：
./lv_sim

你会看到一个窗口弹出，里面就是 LVGL 的默认 demo。这时候你就可以用鼠标点击、滑动，体验 LVGL 的交互了。

避坑指南： 我曾经在 Windows 上折腾 SDL2 的路径配置，折腾了整整一下午。后来发现直接用 vcpkg 安装最省事：vcpkg install sdl2。别手动去官网下载 DLL 了，相信我。

2.3 IDE 配置：VS Code + CMake

IDE 这块，我推荐 VS Code + CMake 插件。为什么？因为 LVGL 的官方示例和大多数开源项目都用 CMake 构建，VS Code 对 CMake 的支持非常成熟。

当然，你用 CLion 或 Eclipse 也行。但 VS Code 免费、轻量、插件生态好，适合大多数嵌入式开发者。

2.3.1 必要插件

插件名称 用途
C/C++ (ms-vscode.cpptools) 语法高亮、智能提示、调试
CMake Tools (ms-vscode.cmake-tools) CMake 项目构建、配置切换
GitLens 代码版本管理（可选但推荐）

2.3.2 项目结构示例

一个典型的 LVGL 项目结构如下：

my_lvgl_project/
├── CMakeLists.txt
├── main.c
├── lvgl/
│   ├── lvgl.h
│   └── src/
├── lv_drivers/
│   ├── display/
│   └── indev/
└── build/

CMakeLists.txt 的核心配置：

cmake_minimum_required(VERSION 3.10)
project(my_lvgl_project)

# 添加 LVGL 源码
add_subdirectory(lvgl)

# 添加显示驱动
add_subdirectory(lv_drivers)

# 生成可执行文件
add_executable(my_lvgl_app main.c)

# 链接库
target_link_libraries(my_lvgl_app lvgl lv_drivers)
小技巧： 在 VS Code 中按 Ctrl+Shift+P，输入「CMake: Select Kit」，选择你的交叉编译器。这样 CMake Tools 会自动帮你配置编译选项。

2.4 交叉编译环境准备

模拟器跑通了，下一步就是编译到目标硬件。交叉编译说白了就是「在 PC 上编译，在 MCU 上运行」。这里我以 STM32 为例，因为这是 TouchGFX 用户最熟悉的平台。

2.4.1 工具链安装

ARM GCC 工具链是首选。安装命令（Ubuntu）：

sudo apt-get install gcc-arm-none-eabi binutils-arm-none-eabi

Windows 用户可以去 ARM 官网下载 exe 安装包，或者用 MSYS2 的 pacman 安装。

2.4.2 CMake 交叉编译配置

你需要一个工具链文件（toolchain.cmake），告诉 CMake 使用 ARM GCC：

set(CMAKE_SYSTEM_NAME Generic)
set(CMAKE_SYSTEM_PROCESSOR arm)

set(CMAKE_C_COMPILER arm-none-eabi-gcc)
set(CMAKE_CXX_COMPILER arm-none-eabi-g++)

set(CMAKE_TRY_COMPILE_TARGET_TYPE STATIC_LIBRARY)

然后在构建时指定工具链：

cmake -DCMAKE_TOOLCHAIN_FILE=toolchain.cmake ..
make

2.4.3 链接脚本与启动文件

交叉编译还需要两个关键文件：

  • 启动文件（startup_*.s）： 初始化堆栈、中断向量表
  • 链接脚本（*.ld）： 定义 Flash、RAM 地址空间

这两个文件通常由芯片厂商提供（ST 的 HAL 库中就有）。如果你是从 TouchGFX 项目迁移，可以直接复用原有的 startup 和 ld 文件。

注意： 链接脚本里的 Flash 和 RAM 大小一定要跟你的芯片匹配。我曾经因为用了错误的 ld 文件，程序下载后直接跑飞，查了半天才发现是 RAM 地址设错了。

2.5 从 TouchGFX 到 LVGL 的迁移要点

最后，我总结几个迁移时环境层面的关键点：

维度 TouchGFX LVGL 迁移建议
UI 设计工具 TouchGFX Designer SquareLine Studio / 手写代码 先用模拟器验证布局，再用工具生成代码
构建系统 STM32CubeIDE 内置 CMake / Makefile 统一用 CMake，方便跨平台
显示驱动 HAL + BSP 自动生成 lv_drivers 或手写 复用原有驱动，封装 LVGL 接口
调试方式 硬件调试器（ST-Link） 模拟器 + 硬件调试 模拟器调逻辑，硬件调性能
← 上一章 📖 返回目录 下一章 →