LVGL Pro 使用指南 [01] - XML 编辑器

本文介绍LVGL Pro的XML 编辑器使用方法。

概述 链接到标题

在XML 编辑器中使用 XML 开发 LVGL UI 能简化和加速构建嵌入式 UI，具有实时像素级渲染预览功能。除了支持组件和 Screen 的创建和预览外，还支持 UI 测试，动画，多语言翻译等。XML 编辑器可以将 XML 转换为 C 代码，转换出来的 C 代码可直接用于 C 的项目中。在 XML 编辑中直接用 C 编写自定义的 widgets 也可以实时预览。

XML 编辑器的优点（为什么不是直接手写 XML)

  • 可以在预览中实时看到组件的渲染效果
  • 可以使用检查 (inspector) 工具查看和调整 Widgets 的组成
  • 自动补全
  • 支持 Figma 插件
  • 支持编写和运行 UI 测试
  • 通过调整subject来测试数据绑定

可以通过下面方法使用 XML 编辑器：

  • 在 Windows，Linux，Mac 上均有独立的运行程序
  • 在线编辑器

安装 链接到标题

各个 OS 下的安装包都可以在 https://pro.lvgl.io/#download 下载到，目前是 1.0-rc2 版本，还不是最终的正式发布版本。

Linux 和 MacOS 需要在安装运行前先安装 Podman，后续文章都是基于 Linux 的 Ubuntu 发行版进行，因此所有的命令都是基于 Linux。首先安装 Podman

sudo apt-get install podman

Windows 链接到标题

下载后可直接执行安装程序。

Linux 链接到标题

下载 AppImage、添加可执行权限 chmod +x LVGL_Pro_Editor.AppImage，双击 AppImage 既可运行

排除故障 链接到标题

如果双击没有反应，就尝试通过终端运行，如果看到下面错误提示：

(process:3943): Gtk-ERROR **: 11:45:01.301: GTK 2/3 symbols detected.
Using GTK 2/3 and GTK 4 in the same process is not supported
Trace/breakpoint trap (core dumped)

使用 --gtk-version=3 指定应用程序的 gtk 版本来解决

`./path/to/x LVGL_Pro_Editor.AppImage --gtk-version=3`

Mac 链接到标题

下载适用于 Apple Silicon 的 ARM 版本，并将应用程序拖到 Finder 中的应用程序文件夹中

用户界面 链接到标题

首次运行 链接到标题

首次运行 XML 编辑器时，会弹出窗口提示 XML 编辑器正在下载 LVGL 的容器镜像，其中包含构建 LVGL 的所有工具和依赖项，该动作只会执行一次。

“Pulling Container image for LVGL, this may take a few minutes…”.

当容器有新版本时（工具链更新，构建逻辑发生变化等），XML 编辑器会自动检查并拉取最新的版本。

登录 链接到标题

首次使用时会弹框提示要求输入邮箱地址，LVGL 以该邮箱地址为你创建账号，输入后邮箱会收到 OTP(On Time Password)

login

将 OPT 输入到后续的密码要求

otp

输入密码后登录完成

License 选择 链接到标题

1.0-rc2 只有 Demo License

license

XML 编辑器的配置信息都放在~/.config/lvgl-editor 下，删除后就需要重新登录和选择 License

启动界面 链接到标题

start

每次启动 XML 编辑器都会呈现该界面，可以

  • Open UI Project：打开已有项目
  • Create UI Project：创建新项目
  • Recent： 打开最近的项目

项目开发 链接到标题

下面是 XML 编辑器做项目开发时的界面

editor

菜单 链接到标题

在最顶端具有 File/View/Edit 等应用菜单

项目文件面板 链接到标题

左侧面板是经典的项目树导航面板，可以进行创建/打开/重命名等项目文件的管理操作。

其目录和 UI 组件 (Screen,Widgets,Components,Fonts,Images) 对应

编辑器窗口 链接到标题

中间是编辑器窗口，在此处查看和编辑项目中文件的内容。通过 XML 撰写 UI 或组件库。

在编辑 XML 时，编辑器提供功能强大且支持​​自动补全​​的用户界面，让定义、编辑和验证 UI 组件变得轻松。与其它“智能编辑器”中提供的​​上下文敏感辅助​​功能类似，编辑器主工作区在键入的每一步骤都提供自动提示，从而降低使用 XML 编辑器的学习曲线。

右侧面板 链接到标题

右上是预览窗口/检查器 (inspector)

预览窗口对编辑窗口中正在编辑的 XML 文件进行实时预览，该预览通过真实的 LVGL 渲染引擎驱动，因此其成果将与最终固件所生成的效果完全一致。​ 预览窗口中也可以对 UI 进行交互操作，例如点击按键，拖动滑动条。

​按住 [Ctrl] 键，预览窗格切换为检查器模式。​ 检查器支持以下操作

  • 可视化组件边界框 (bounding box)、内边距 (padding)、外边距 (margins) 及点击区域​(click area) inspector
  • 通过拖拽调整尺寸和位置
  • 对组件进行精确测量​
  • 双击可跳转至对应 XML 文件​
  • 单击可将编辑器焦点切换至匹配的 XML 元素

右下是输出面板

输出面板包含多个选项卡，是开发的信息中枢。呈现项目运行结果、内部状态及关键组件列表

  • Console Tab 控制台：提供内部操作及其结果的"日志输出"，例如编译信息等
  • Subjects Tab：数据绑定的列表，XML 源文件中实现的观察者模式（Observer-Pattern）的 subjects 列表
  • Translations: 列出多语言的条目

目前选项卡还未最终定型，后续将推出其它选项卡：测试、动画

热键 链接到标题

编辑器中支持下面热键：

  • 激活自动补全，在编辑器窗口中：
    • Ctrl+Space ：弹出自动补全列表
  • 修改值，光标位于属性的值上时
    • Ctrl+Up/Ctrl+Down: 值改变 1
    • Ctrl+Shift+Up/Ctrl+Shift+Down: 值改变 10
  • 导出和构建
    • Ctrl+E: 只导出代码
    • Ctrl+B: 导出代码和重编译
    • Ctrl+Shift+B: 清除后重编译
  • 预览窗口中
    • Ctrl+鼠标滚轮 放大和缩小
    • Ctrl++ 放大
    • Ctrl+- 缩小
    • Ctrl+O 重置大小到默认
    • Ctrl+Shift+O 适合屏幕

参考 链接到标题

https://docs.lvgl.io/master/details/xml/editor/index.html