LVGL Pro v2.1.0：XML 全面升级、更快的预览与 LVGL 9.6 支持

大家好！我们非常高兴地宣布 LVGL Pro 2.1 正式发布！🎉 🥳 您可能还记得，2.0 版本是一次重大升级。在那之后还能改进什么呢？事实证明：一切都可以……

破坏性变更

本版本包含少量破坏性变更和行为变更，详见本文末尾。

新功能 #

LVGL v9.6 支持 #

在 project.xml 中设置 lvgl_version="9.6.0" 即可启用。新项目默认使用 v9.6，VS Code、Zephyr 和 Linux 模板也已全部更新。

<project name="reference_project" lvgl_version="9.6.0">
	...
</project>

xml

速度 #

我们重做了预览的更新机制，目标是让预览的更新速度跟上您的打字速度。🏎️ 我们认为已经非常接近了。👌🏻

此外，选择许可证现在只需几秒钟，而不再需要 10 秒以上。

对了，CLI 的启动速度也提升了约 3 倍。

矢量图形支持 #

在 LVGL v9.5 和 v9.6 上，预览已启用 SVG、Lottie 和矢量图形（ThorVG）。

提示

我们只是在 Editor 的预览中启用了这些功能，尚未在 XML 中为其提供一流支持。

v2.1 新增：预览运行时可以解码 <file src_path="….svg"> 图像。

lv_image 中的 SVG

颜色 Subject #

Subject 现在可以存储颜色值。任何颜色属性或样式属性都可以绑定到颜色 subject，Subjects 面板也会为其显示取色器。

颜色示例

在 C 代码中：

lv_subject_set_color(subject_accent, lv_color_hex(0x4caf50));

样式过渡与缓动 #

在 <style> 中使用 <transition props="…" duration="…" easing="…"/>。easing 同样适用于 <animation>，可以取内置路径、bezier(x1 y1 x2 y2) 或您自己的缓动回调函数。

components/transition_demo/transition_demo.xml

三个标签分别以 ease_in_out、overshoot 和 bezier 缓动滑动

硬件外框叠加层与键盘输入 #

在预览周围绘制设备外壳，并带有可点击的硬件按键，用于发送按键事件。预览现在还支持键盘输入和 gridnav，无需硬件即可测试键盘和编码器 UI。

这项功能在内部呼声很高，也深受抢先体验的用户喜爱。我们发现，它能帮助产品团队在真实的硬件环境中审视 UI，效果出奇地好。

project.xml

方向键如何在磁贴之间移动（XML + C）

叠加层按键会发送按键事件。为了让方向键能在磁贴之间移动，磁贴所在的行通过几行 C 代码启用 gridnav。XML 在该行创建后立即调用一次：

<!-- screens/hardware_demo.xml -->
<lv_obj flex_flow="row" width="content" height="content">
	<!-- 创建后运行一次 -->
	<event_cb callback="tiles_gridnav_cb" trigger="{true}"/>
 
	<lv_button checkable="true">
		<style name="style_tile"/>
		<style name="style_tile_focus" selector="focus_key"/>
		<style name="style_tile_on" selector="checked"/>
		<lv_label text="Lights" align="bottom_mid"/>
	</lv_button>
	<!-- … Fan、Heat、Music -->
</lv_obj>

xml

/* examples_announce_pro_2_1_0.c */
void tiles_gridnav_cb(lv_event_t * e)
{
    lv_obj_t * row = lv_event_get_current_target_obj(e);
    lv_group_t * group = lv_group_get_default();
    if(group == NULL) return;
 
    lv_gridnav_add(row, LV_GRIDNAV_CTRL_ROLLOVER);
 
    /* gridnav 负责在磁贴之间移动焦点，因此只需将行本身加入组 */
    uint32_t cnt = lv_obj_get_child_count(row);
    for(uint32_t i = 0; i < cnt; i++) lv_group_remove_obj(lv_obj_get_child(row, i));
 
    lv_group_add_obj(group, row);
    lv_group_focus_obj(row);
}

左右按键用于移动焦点，并通过 focus_key 选择器应用 style_tile_focus。Enter 键会传递给获得焦点的磁贴，切换其 checked 状态。

响应式 XML #

可绑定属性 #

<prop bindable="true"> 让组件属性可以从外部跟随某个 subject。为它传入一个表达式，subject 变化时它就会随之更新。

可绑定属性

导出的 C 代码还会为该属性生成公开的 setter 和 getter：

void temp_card_set_temp(lv_obj_t * obj, int32_t temp);
int32_t temp_card_get_temp(lv_obj_t * obj);

普通（不可绑定）属性只在创建时读取一次，因此上例中的 {room} 之后不会更新。

实例级 Subject #

组件和屏幕可以声明自己的 <subjects>。每个实例都会获得一份私有副本，初始值为声明的值。局部 subject 会遮蔽同名的全局 subject。请注意，subject 的最小值 / 最大值限制同样生效。

components/counter/counter.xml

条件样式 #

<style enabled="{…}"> 根据条件开启或关闭样式。条件中的任一 subject 发生变化时，样式都会随之更新。

components/battery_badge/battery_badge.xml

它取代了只能判断相等的 <bind_style name="style_low" subject="subject_battery" ref_value="…"/>。

AND 与 OR #

您可以在任意 { } 表达式中组合条件。在 XML 属性中，& 和 < 必须转义。为了避免转义，LVGL 9.6 还支持大写关键字 AND、OR、LT、LE、GT、GE、EQ 和 NE。

AND 与 OR

两侧总是都会求值（不存在短路求值）。

set_subject_event 中的表达式 #

写在 { } 中的 value 会在每次事件触发时求值，结果受 subject 的 min_value/max_value 限制。因此，一个事件就可以设置、切换、步进或循环一个值。它取代了 <subject_set_int_event>、<subject_toggle_event> 和 <subject_increment_event>。

set_subject_event

表达式触发器 #

任何事件都可以用 trigger="{expr}" 代替事件名称。每当表达式从 false 变为 true 时，动作就会执行；如果创建时表达式已经为 true，也会立即执行。

components/alarm_banner/alarm_banner.xml

不包含任何 subject 的表达式只求值一次。如果表达式的结果是一个名称而不是 true 或 false，该名称会被用作事件，例如 trigger="{compact ? long_pressed : clicked}"。

其他值得一提的改进 #

CLI 此前不支持 Intel 芯片的 Mac，现在已支持。
CLI 截图命令可以指定 target 和 language：lvglpro screenshot --target … --language …。
您可以使用自己安装的 emsdk（版本必须为 4.0.6），而不是 Editor 托管的版本。
- 只需将 emsdk 加入 PATH，Editor 就会自动识别。这在网络受限的环境中很有用。
<project>.h 中的 <PROJECT>_COMPILE_TARGET 用于设置默认的响应式目标。现有项目会保留原有的 <project>.h；如需选择目标，请在 #include "<project>_gen.h" 上方添加 #define <PROJECT>_COMPILE_TARGET ...。
更全面的 XML 校验：
- 缺失的资源会在每个引用它的属性中报告
- 无效枚举值的错误信息会列出所有有效值
- 属性默认值和 #const 值会进行类型检查
- 修复了大量 { } 表达式问题
预览重新加载时会保留 subject 的值，而不是重置为初始值。
如前所述，预览现已支持键盘输入。

破坏性变更与迁移步骤 #

Editor 与 CLI #

CLI 命令现在是 lvglpro（原为 lved），旧的 CLI 令牌在 lvglpro v2.1+ 中不再有效。 请在 lvgl.io/pro/account 生成新令牌，并替换所有使用旧令牌的地方：--token、LVGLPRO_CLI_TOKEN、CI 密钥等。
macOS 和 Linux 需要在 PATH 中提供 ninja 才能构建预览（brew install ninja / sudo apt-get install ninja-build）。此前，Editor 在这些系统上使用 make。您仍需安装 git 和 cmake。
新的下载格式： macOS 使用 .dmg，Linux 使用 .AppImage（无需 libfuse2），取代原来的 .zip。
- AppImage 采用 zstd 压缩和新的静态 AppImage 运行时，AppImageLauncher 2.x 不支持该格式。如果您使用 AppImageLauncher，请升级到 3.x 或将其卸载，否则 Editor 启动时会报错 "Squashfs image uses (null) compression"。Gear Lever 等工具可以正常使用。
预览只渲染有效的项目。 只要有任何文件存在错误，预览就会保留上一次的渲染结果并指出错误。测试同样遵循此规则。

XML #

在 LVGL v9.6 上，表达式关键字只支持大写：AND / OR。 小写的 and / or 仅适用于 v9.5。
在 LVGL v9.6 上，@{ } 绑定已被移除。 请改用 { }，它会在所读取的任一 subject 变化时重新应用。校验器会标记旧的 @{ } 用法并给出替换写法。
在 LVGL v9.6 上，<lv_image bind_src> 已被移除。 请改用 src="{subject}"，它同样适用于编译进固件的图像。v9.4 和 v9.5 保留 bind_src。
从外部绑定组件自身的属性需要 <prop bindable="true">。 否则，该值只在创建实例时使用，校验器也会报告该绑定。

生成的 C 代码 #

在 LVGL v9.6 上，全局 subject 以指针形式导出（extern lv_subject_t * temperature;），因为它们是通过 lv_subject_create() 创建的。在您自己的 C 代码中使用时，请去掉 &：用 lv_subject_set_int(temperature, 25) 代替 lv_subject_set_int(&temperature, 25)。v9.4 和 v9.5 项目不受影响。

结语 #

以上就是全部内容！写这篇文章让我个人非常兴奋。我的团队长期以来一直在努力工作，听取用户和同事的反馈，不断打磨、创造、调整……我真的没有想到这个版本会进化得如此之多。我们不断提高标准来支持用户，这让我由衷地开心！干杯！🍻

获取 LVGL Pro 2.1

下载适用于 Windows、macOS 和 Linux 的 Editor 与 CLI。

下载 LVGL Pro

获取 LVGL Pro 2.1

关于作者

认识博客背后的作者们