跳到主要内容

列表

列表是一种基于您在视图模型中设置的绑定数据值动态生成项目集的方式。这允许您构建能够根据这些值的更新实时变化的 Rive 文件。您可以使用列表创建:

  • 具有动态选项数量的菜单
  • 产品列表
  • 通知或活动流
  • 聊天消息
  • 下拉菜单
  • 联系人、好友或关注者列表
  • 高分榜、表格等

画板列表

画板列表使您能够通过使用一个画板来表示列表中的每个项目,从而生成多个列表项目。画板列表必须作为画板或布局的子项添加。

要将画板列表添加到舞台,首先选择一个画板或布局。在编辑器右侧的检查器中,您会看到一个添加画板列表的按钮。单击它即可将列表添加到层级结构中。它将作为您之前选择的画板或布局的子项出现。

Image

将画板列表添加到层级结构后,您可以选中它并查看其检查器。

Image

下一步是使用数据绑定将数据绑定到它。这将决定列表的内容和项目数量。有两种生成列表内容的方式:

  • 使用视图模型列表属性
  • 使用视图模型数字属性与数字到列表转换器

视图模型列表属性

在继续之前,理解数据绑定的基础非常重要,特别是什么是视图模型、如何创建它以及如何将其绑定到对象的属性。请参阅数据绑定概述了解更多。

视图模型列表是一个属性,可以包含动态数量的项目,每个项目代表一个视图模型实例。要在列表中使用它,必须将视图模型绑定到一个画板。

要创建视图模型列表并将其绑定到画板列表:

  1. 创建列表项目视图模型

    导航到编辑器中的数据选项卡。点击视图模型旁边的 + 按钮创建一个视图模型(这将代表您的列表项目)

  2. 将列表项目视图模型绑定到您的项目画板

    将该视图模型绑定到您想要用于渲染列表项目的画板。您可能还希望在此处创建额外的视图模型属性,并将其绑定到该画板上的对象属性。

  3. 创建主视图模型

    点击视图模型旁边的 + 按钮创建另一个视图模型(这将包含您的列表的视图模型,并应绑定到您希望列表渲染的画板)

  4. 添加列表属性

    选择新创建的视图模型,点击其旁边的 + 按钮。从弹出菜单中选择列表。这将向视图模型添加一个列表属性 Image

  5. 添加列表项目

    选择列表属性,在右侧的检查器中,您可以通过点击"添加列表项目"来添加项目 Image 添加列表项目后,您可以点击其名称左侧的设置按钮,为该项目设置视图模型和视图模型实例

  6. 将列表属性绑定到您的画板列表

    添加列表项目后,返回层级选项卡,选择画板列表,然后从画板列表属性下拉菜单中选择您上面创建的视图模型列表属性。

运行状态机,您应该会看到列表项目。请记住,布局将由画板列表的父级决定,因此请修改父级的设置以调整列表的布局。

Rive 运行时提供了在运行时修改列表和列表项目的 API(例如,添加或删除项目)。

带转换器的视图模型数字

填充列表的第二种方式是指定列表中项目的数量以及您想要实例化的视图模型(画板)。这可以通过使用视图模型数字属性配合新的数字到列表转换器来实现。

要创建视图模型数字到列表转换器并将其绑定到画板列表:

  1. 创建列表项目视图模型

    导航到编辑器中的数据选项卡。点击视图模型旁边的 + 按钮创建一个视图模型(这将代表您的列表项目)

  2. 将列表项目视图模型绑定到您的项目画板

    将该视图模型绑定到您想要用于渲染列表项目的画板。您可能还希望在此处创建额外的视图模型属性,并将其绑定到该画板上的对象属性。

  3. 创建主视图模型

    点击视图模型旁边的 + 按钮创建另一个视图模型(这将包含您的数字属性的视图模型,并应绑定到您希望列表渲染的画板)

  4. 添加数字属性

    选择新创建的视图模型,点击其旁边的 + 按钮。从弹出菜单中选择数字。选择新创建的数字,在检查器中设置您想要在列表中的项目数量

  5. 添加数字到列表转换器

    点击 + 按钮,选择转换器 > 列表 > 数字到列表Image

  6. 设置要在转换器中使用的视图模型

    选择创建的转换器,在检查器中,选择您之前创建的表示列表项目的视图模型。转换器会将项目数量转换为实际的画板项目 Image

  7. 将数字属性和转换器绑定到您的画板列表

    添加数字属性和转换器后,返回层级选项卡,选择画板列表,然后从画板列表属性下拉菜单中选择您上面创建的视图模型数字属性。组合框将显示黄色轮廓。右键单击组合框并选择"更新绑定"。在转换器字段中,选择您创建的数字到列表转换器。黄色轮廓应变为绿色。

运行状态机,您应该会看到列表项目。请记住,布局将由画板列表的父级决定,因此请修改父级的设置以调整列表的布局。

视图模型列表项目索引

有时,画板需要知道它在父级列表中的索引位置。这可以通过视图模型列表项目索引属性实现。

可以通过点击 + 按钮并选择列表属性 > 索引,将其添加到项目的视图模型中。

Image

然后,此属性可以绑定到对象的属性并直接使用(例如,根据索引更改对象的位置),与转换器一起使用(将索引值显示为字符串),或作为状态机中的条件(根据项目索引提供不同的行为)。

当将项目索引与列表属性和列表项目一起使用时,请注意,如果多个列表项目绑定到同一个视图模型实例,它们将共享相同的索引值。

列表与滚动

如果将画板列表添加为布局的子项,列表项目将作为父布局的子项行为。这意味着方向、换行、内边距、间距、对齐等都由父布局的属性决定。

此外,如果对父布局应用了滚动约束,列表项目将无需额外设置即可实现滚动。

滚动列表时还可以应用其他滚动属性。详情请参阅列表滚动