【LVGL学习手札】（1）VSCode+GuiGuider搞定UI设计与调试

最新推荐文章于 2025-10-23 10:39:23 发布

原创

最新推荐文章于 2025-10-23 10:39:23 发布 · 2.4w 阅读

169 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ui

文章介绍了如何使用LVGL图形库配合GuiGuider在VSCode环境下进行UI设计与调试。通过GuiGuider的拖拽式编辑器创建UI，然后在VSCode中配置CMakeList文件，实现与GuiGuider的结合，从而进行代码调试。作者提供了环境准备、开发流程及步骤，包括创建UI工程、编写事务代码、调试和移植到目标平台的过程。此外，还提供了一个简单的按钮计数器例子来展示使用方法。

Alt

LVGL学习手札

（1）VSCode+GuiGuider搞定UI设计与调试

笔者：Coolouba Alt

根植开源，学无止境

1、引子

LVGL（Light and Versatile Graphics Library）

LVGL is the most popular free and open-source embedded graphics library to create beautiful UIs for any MCU, MPU and display type.

LVGL是最受欢迎的免费开源嵌入式图形库，可为任何MCU、MPU和显示器类型创建漂亮的UI。

GuiGuider

GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。

在这里插入图片描述

VSCode

大名鼎鼎，无需多言。

在这里插入图片描述

通过GuiGuider可以很方便的进行拖拽式UI设计，工程架构主要包括了界面代码（generated文件夹）和事务代码（custom文件夹），移植到最后的目标平台非常方便，是LVGL辅助开发利器。
GuiGuider自带模拟器，可以脱离目标平台完成先期开发工作，提高效率；然而并 未集成调试功能 ，事务代码开发调试困难。
还好，LVGL官方支持VSCode下的仿真环境，经过一小番折腾，配置好了CMakeList文件，顺利将GuiGuider与VSCode结合，实现UI设计与仿真调试。笔者完成的工作只是将GuiGuider和VSCode结合，方便UI设计与事务代码调试穿插迭代。
当然，LVGL在PC端的仿真环境包括多种，理论上均可实现类似需求（也有可能有大佬已经用上了更便捷的方法），不中意VSCode的同学也可参考笔者的思路尝试匹配自己喜欢IDE：

LVGL Simulator on PC

Eclipse with SDL driver: Recommended on Linux and Mac

CodeBlocks: Recommended on Windows

VisualStudio: with SDL driver: For Windows

VSCode with SDL driver: Recommended on Linux and Mac

PlatformIO with SDL driver: Recommended on Linux and Mac