lvgl_editor 0.2.3 发布，LVGL官方开源的可视化 UI 编辑器

作者

什么是 lvgl_editor 0.2.3
先给你捋一捋：lvgl_editor 0.2.3 是基于 LVGL 的可视化 UI 编辑器，不是拖拖拽就完事的那种炫技工具，而是给开发者量身打造的“半可视化”利器。它可以让你用 XML 写组件，用 C 写逻辑，然后瞬间预览，代码和可视化无缝衔接。想省力、想好维护、想快迭代？它都帮你搞定。

为啥要用它？

  • • 组件化思维：把常用的按钮、滑块、图表都当作“可复用组件”来看，写一次就能到处用。

  • • XML 描述：类似 HTML 的语法，结构清晰、易读易改。

  • • 即时预览：一边改 XML，一边看效果，不编译重启，效率直接起飞。

  • • Figma 支持：设计稿直接一键同步，样式、尺寸、间距啥的全自动拉过来，少手贱多屡试不爽。

  • • 在线预览：CI 一跑，自动把 XML 转成网页，给 PM、测试发个链接就能看；哪怕没环境，也能演示。

v0.2.0 的三大杀手锏

  1. 1. 自定义 Widget 玩法

    • • 除了基础组件，还能自己写 C 逻辑，然后重编译编辑器，把新玩意儿直接加到工具里。

  2. 2. 运行时加载 XML

    • • 固件没改动也能加载新组件，想临时换界面、打补丁？稳！

  3. 3. C 代码导出

    • • XML+Widget 全打包成整洁的 C 文件，跟手写代码没区别，和你的项目无缝对接。

快速上手，不踩坑

  1. 1. 安装 Docker：编译后端要它，Win 下记得开 Docker Desktop。

  2. 2. 下编辑器最新版：安装包一键搞定。

  3. 3. Clone 本仓库：配置一下 GitHub Pages，用 CI 做在线预览。

  4. 4. 打开编辑器，载入 examples 目录，点“Generate Code”，再点“Compile Project”，等几秒，预览就能刷新。

  5. 5. 修改组件：打开 button_default.xml，随便改改文字、大小、样式，Ctrl+S，预览即刻更新。

  6. 6. 玩转 Widget：打开 slider_box.xml，改 C 逻辑，重编译后立刻能拖到画布上试效果。

  7. 7. Figma 无缝对接：打开插件，一键同步样式，更新 XML，再也不用手动对齐。

  8. 8. 推到线上：commit、push，等 CI 跑完，分享链接给同事，大家都能在浏览器里看效果。

适用场景 & 核心价值

  • • 嵌入式设备 UI 开发：要快、有范、好维护的场合。

  • • 设计—开发协作：Figma → XML → 代码，设计师专心画界面，开发者专心写逻辑，互不打架。

  • • 中小团队：人手不多功能需求多，组件复用和在线预览让反馈周期瞬间缩短。

总结
用过传统 XML+C 叠 UI，你肯定深有体会：改一处生死考，调一个样式得重编译。LVGL Editor 0.2.0 就是给你来“提速”，一边写代码一边可视化预览，Figma 一键同步，Runtime 加载支持，C 导出零差别。它不完美，但够接地气，把设计、开发这种“你画我写”的摩擦降到最低，让你专注在功能和体验上。要做精致、要做敏捷，赶紧试试吧！

项目地址：https://github.com/lvgl/lvgl_editor

发表评论