数据绑定 (Data Binding)
数据绑定概览 (Data Binding Overview)
通过视图模型 (View Models) 将编辑器元素连接到数据和代码。
什么是数据绑定?
数据绑定是一种在编辑器元素、数据和代码之间建立“响应式连接”的强大方式。例如,你可以:
- 将图标的颜色绑定到一个“颜色数据属性”,以便开发者在运行时进行调整。
- 绑定动画对象的 X 轴位置,以便另一个对象能以一定的偏移量跟随它。
- 监听两个按钮的点击事件,从而增加或减少一个计数器。
为什么要使用数据绑定?
数据绑定通过引入“中间数据(即契约)”来解耦设计和代码。一旦这个“契约”建立,设计师和开发者就可以独立迭代,从而加快交付速度。 在编辑器内部,数据绑定能让你的设计具备极强的“反应能力”。你可以建立对象间的关联,并确保无论画板处于何种状态,特定的对应关系始终成立。数据绑定系统将确保这些关系在动画或代码调用改变值时始终保持最新。 此外,它还允许你将更多的逻辑从代码转移到 Rive 文件中。虽然你需要决定某段逻辑是留在代码中还是放在数据绑定里,但一个核心优势是:数据绑定逻辑在所有运行时中都是通用的,不需要针对不同平台(如 iOS 和 Web)重复实现。
术语表 (Glossary)
数据绑定引入了几个你需要熟悉的术语。这些名称借鉴了软件开发中的 MVVM (Model, View, Viewmodel) 模式。
编辑器元素 (Editor Element)
指编辑器中任何可编辑的 UI 元素,其属性值可以挂载绑定。
视图模型 (View Model)
视图模型是数据的蓝图。开发者可以将其理解为面向对象编程中的“类 (Class)”。视图模型通常描述了特定用例(通常是每个画板一个)的所有关联数据。视图模型本身不含具体数值,包含具体数值的是 实例 (Instance)。
视图模型属性 (View Model Property)
视图模型中的单个数据项,类似于类中的“字段 (Field)”。属性在创建时会选择数据类型,并赋予一个可在代码中引用的名称。
视图模型实例 (View Model Instance)
视图模型的“活”样本,带有实际数值。一个视图模型可以创建无数个实例。例如,如果你有一个包含三个按钮的菜单:🏠 首页、👤 个人资料、❓ 关于,你可以只有一个画板(菜单项模板),但创建三个对应不同图标和文字的“视图模型实例”。
绑定 (Binding)
属性与编辑器元素之间的关联。
- 默认绑定 (Source to Target):属性值的变化驱动元素更新(如:XPos 属性更新位置)。
- 反向绑定 (Target to Source):元素值的变化驱动属性更新。
- 双向绑定 (Bidirectional):双向同步,任何一方改变都会更新另一方。
转换器 (Converter)
转换器用于在应用绑定时对值进行转换。例如,使用“转换为字符串”转换码,将数字位置信息转换为文本显示在文本框中。
与现有功能对比
数据绑定是输入 (Inputs) 和事件 (Events) 的更强大替代方案。我们建议在未来的大多数用例中采用它。
| 特性支持 | 输入 (Inputs) | 事件 (Events) | 视图模型属性 |
|---|---|---|---|
| 浮点数/布尔值 | ✅ | ✅ | ✅ |
| 触发器 (Triggers) | ✅ | ❌ | ✅ |
| 字符串 (Strings) | ❌ | ✅ | ✅ |
| 枚举 (Enums)/颜色 | ❌ | ❌ | ✅ |
| 嵌套/列表/图像 | ❌ | ❌ | ✅ |
状态机输入
在数据绑定之前,输入是主要的交互方式。但输入只能驱动状态机过渡,而数据绑定可以驱动 Rive 中的绝大多数编辑器元素(如颜色、透明度、位置等)。
事件
事件主要是为了让设计向代码发送“信号(输出)”。数据绑定提供了一个更丰富的通道。虽然事件依然支持播放音效(数据绑定暂不支持),但在大多数逻辑层面,视图模型属性更具优势。
运行时 API
要了解如何在代码中与数据绑定交互,请参阅 运行时概览 页面。