Rive 101 logoRive 101
关于项目📋 变更总览EN
0%
进度0/88
8.11

列表

10m 27s
Rive 101 - Lists

本视频核心教学目标是掌握 Rive 中列表 (Lists)的核心概念及其在视图模型 (View Model)架构下的应用。通过解决 UI 设计中动态组件复用、独立交互响应及自动化布局的痛点,展示了如何利用数据绑定 (Data Binding) 与实例 (Instances) 管理,在不需要编写任何前端代码的前提下,构建出可自适应文本长度、具备独立悬停 (Hover) 状态机、且完全由数据流驱动的动态游戏/应用菜单 UI。这显著提升了设计师与开发端在跨端运行时 (Runtime) 交付中的协作效率和逻辑闭环。

  • 实例化的底层逻辑: 在 Rive 中,任何画板 (Artboard) 想要作为动态元素塞进列表 (List) 中,必须拥有至少一个关联的视图模型 (View Model)。即使该画板内部没有任何需要动态改变的数据(例如视频中的 Title),也需要为其挂载一个空的视图模型,以促使系统分配一个有效的实例 ID。
  • 三层布局嵌套避坑指南 (Shift + L): 视频中构建自适应按钮时使用了三层嵌套:Text Run -> Text Layout -> Row (Button) -> Row (Parent)。这种结构的精妙之处在于将“尺寸自适应(Hug)”、“定位控制(Center)”与“外部边界限制(Fill)”完全解耦。如果直接在 Button 行上设置 Fill 空间,会导致按钮本身的背景图被迫撑满,失去按钮原有的视觉比例。
  • 数据流向闭环: 数据驱动 UI 的核心路径是:修改 View Model 实例属性 -> 驱动绑定的 Text Run/State Machine Condition -> 反映在 Artboard List 组件的渲染中。通过在数据面板直接修改特定实例的 String 值,可以批量定义诸如“开始游戏”、“游戏设置”、“退出”等具体菜单项,而完全不需要复制多个画板物理源文件,极大优化了运行时的内存占用。