视图模型和实例

视图模型定义数据的结构。它是一个可复用的蓝图，包含一组属性，例如汽车的颜色、速度和损坏程度。

每个属性都有一种类型，例如 Number、String、Boolean、Color、Enum 或 List（更多信息，请参阅属性类型）。

视图模型本身不存储值。值会存储在一个或多个由该视图模型创建的视图模型实例中。

例如，如果你正在构建一款赛车游戏，你可以创建一个 Car 视图模型，并包含以下属性：

Car (View Model)
  color: Color
  damage: number
  make: string
  speed: number

一个视图模型可以用来创建多个视图模型实例。每个实例共享相同的结构，但会存储自己的值。

Car1 (View Model Instance)
  color: 0xFFFF0000
  damage: 0
  make: "Subaru"
  speed: 0

Car2 (View Model Instance)
  color: 0xFFFF00FF
  damage: .9
  make: "Honda"
  speed: 0

然后，你可以将实例中的属性绑定到设计中的元素，使文本、图像、颜色、动画、状态机以及其他属性能够自动响应数据变化。

创建视图模型

视图模型定义数据的结构。在创建视图模型实例或设置数据绑定之前，你需要先创建一个视图模型并向其中添加属性。

新的 Rive 文件会附带一个名为 "ViewModel1" 的默认视图模型，并且它已附加到主画板。

1. 添加视图模型
   

   在 Data 面板中，点击 + 图标并选择 View Model 或 Global View Model。

2. 添加属性
   

   在 Data 面板中，点击视图模型名称旁边的 Add View Model Property 按钮，然后选择你的属性类型。

创建和编辑实例

创建视图模型后，你可以创建一个或多个视图模型实例，用于存储这些属性的实际值。

创建视图模型实例

一个视图模型可以拥有多个实例。每个实例都包含自己的一组属性值，同时共享由视图模型定义的相同结构。

创建新的视图模型时，Rive 会自动创建一个名为 "Instance" 的视图模型实例，这样你就可以立即开始测试绑定并预览数据。

1. 查看现有实例
   

   在 Data 面板中选择一个视图模型，然后在 Inspector 中点击实例名称旁边的 Controls 图标。

   💡

   若要一次性查看所有视图模型实例及其值，请点击 Open Table Data 按钮。

   

2. 添加实例
   

   点击 + 图标以添加一个新实例。

3. 命名实例
   

   双击实例名称以重命名它。

4. 更新实例数据
   

   选中实例后，更改它的任意属性。

   请注意，这只会更改所选视图模型实例上的值。

移除实例

点击实例名称旁边的 - 图标即可删除该实例。

删除视图模型实例不会移除视图模型或它的属性。它只会移除该实例及其存储的值。

导出实例

默认情况下，导出的视图模型实例会包含在 .riv 文件中。如果这些数据只在开发期间需要，而不是在应用运行时需要，请禁用 Export Instance。

用例：High Score

假设你正在 Rive 中构建一个高分榜界面。设计时，你会使用假的分数数据；但当游戏上线后，高分榜会使用来自数据库或其他来源的真实数据填充。

在这种情况下，嵌入示例数据只会增加 .riv 文件大小。

将视图模型实例连接到画板

在绑定数据之前，你需要决定数据应该存放在哪里。

Rive 支持以下常见模式：

模式	说明
全局实例	全局视图模型及其属性可被所有画板直接访问
附加到画板的实例	视图模型实例附加到画板上，其值可被该画板及其子级使用
作为嵌套属性的实例	父视图模型实例存储对嵌套视图模型实例的引用
有状态嵌套组件	自包含、可复用的组件，用于存储自己的唯一数据

全局视图模型实例

全局视图模型提供的数据可以在整个 Rive 文件中访问。

在底层实现上，全局视图模型不连接到特定画板。相反，视图模型实例及其属性可被所有画板直接访问。

绑定到全局视图模型属性的绑定始终是相对绑定。这意味着绑定会从最近的 View Model 开始搜索同名属性，而不是直接指向全局属性。

如果更近的 View Model 中存在同名属性，则会使用该属性。例如，绑定到全局 scale 属性时，如果更近的 View Model 中也有一个 scale 属性，绑定会解析到该属性。

了解更多：绝对绑定与相对绑定。

附加到画板的实例

视图模型实例可以附加到特定画板或嵌套组件。当只有该画板及其子级需要访问该数据时，这种方式很有用。

EnemyVM
├─ health

用例：Game

一个 Enemy 视图模型可能包含一个 health 属性。这个属性可能只被敌人自身使用，而不被其父级使用。

作为嵌套属性的实例

视图模型可以拥有作为视图模型实例的属性。

在这种模式中，父视图模型会存储对子实例的引用，可以是直接引用，也可以通过列表引用。

GameVM
├─ health
├─ score
├─ avatar
└─ inventory (stores an instance of InventoryVM)

InventoryVM
├─ Sword
├─ Shield
└─ Potion

当父画板需要管理一组项目，同时仍允许每个组件维护自己的数据时，这种方式很有用。

用例：Inventory Grid

一个物品栏界面可能包含一个 Item 视图模型实例列表，其中每个物品栏槽位组件都绑定到不同的物品。

有状态组件

有状态组件是一个能够维护自身数据的组件实例。

与传统的组件视图模型实例不同，这些实例不需要由父视图模型创建或引用。相反，它们的属性会显示在侧边栏中。

更多信息，请参阅有状态组件。