跳到主要内容

状态化组件

状态化组件允许你把特定视图模型属性直接暴露在嵌套组件上,让每个组件实例拥有自己的值。这会让复用同一个组件但使用不同内容或样式的设计更容易迭代,而不必为每个实例手动连接单独的嵌套视图模型实例。

设置可状态化使用的组件

组件可以以状态化方式使用之前,它的画板需要一个包含待暴露属性的视图模型。

  1. 创建或打开要作为组件使用的画板。
  2. 添加一个视图模型,并将相关属性绑定到画板中的元素,例如把 label 字符串绑定到文本运行,或把背景颜色绑定到填充。
  3. 使用 Inspector 中的组件开关,或按 Shift + N,将画板标记为组件。
  4. 在 Inspector 中找到 Properties 区域。点击 + 添加要暴露的视图模型属性。
  5. 对每个属性选择它是 Input 还是 Output:
    • Input:组件嵌套后,每个实例都可以设置该值。
    • Output:组件嵌套后该值只读,用于向父级报告。

输入与输出属性

使用状态化组件

嵌套组件时(按 N 并从菜单中选择组件),默认会作为无状态组件加入。你可以在 Inspector 中将它切换为状态化组件。

状态化选择图标

切换为状态化后,嵌套视图模型实例选择器会消失,你会看到暴露出来的属性。可以直接在 Inspector 中设置覆盖值。组件的每个实例都可以为这些属性拥有自己的值。

由于这些值由组件实例自身持有,你不需要为每个实例单独创建视图模型实例。

嵌套状态化组件

状态化组件可以继续嵌套在其他组件中。例如,一个卡片组件可以包含一个状态化按钮组件。

如果希望卡片的父级能够覆盖按钮属性,可以把这些属性添加到卡片的视图模型中,并将它们数据绑定到按钮的状态化属性。把这些属性作为输入加入卡片的 Properties 面板后,它们在卡片被嵌套时就可以覆盖。

Output 属性

Output 属性会在组件嵌套时向外报告一个值。它们在 Inspector 中带有锁图标,并标记为只读:你可以与组件交互,但不能从外部设置这个值。

锁定的输出属性

若要在父画板中读取输出值,请在父级视图模型中添加一个属性,并以 target to source 方式把它数据绑定到组件的 output 属性。状态机运行时,该值会实时更新。

在时间线上为 Input 属性打关键帧

Input 属性可以在时间线上打关键帧。选中状态化组件并打开时间线视图后,你会在每个暴露的 input 属性旁边看到关键帧指示器。你可以在时间线不同位置为这些值打关键帧来制作动画。

关键帧输入属性