跳到主要内容

焦点(Focus)

焦点需要运行时支持。参见功能支持中的「焦点(Focus)」。

焦点(Focus)决定由哪个元素接收键盘、文本和手柄输入。同一时间只有一个元素拥有主焦点(primary focus),但它的可聚焦祖先元素也被视为处于焦点中。例如,当可聚焦菜单内的某个按钮拥有主焦点时,该菜单也处于焦点中。

用户可以通过点击元素、按 Tab 和 Shift+Tab 或使用方向键来移动焦点;你的状态机也可以通过监听器动作移动焦点。

焦点让你的文件无需指针也能使用。键盘用户、开关控制(switch)用户和手柄玩家都依赖可预期的焦点顺序来访问按钮、输入框和其他交互元素。

让元素可聚焦(Making an element focusable)​

为层级中的任意元素添加焦点节点(focus node)后,它就可以接收焦点。

  1. 选择要设为可聚焦的元素。

  2. 在 Inspector 中,点击 Focus 部分的 +。

  3. 配置焦点属性。

提示(Tip):文本输入和其他元素需要先获得焦点,才能接收输入的文本或按键。如果 Keyboard 或 Text Input 监听器没有触发,请检查其目标是否有焦点节点。

焦点属性(Focus properties)​

属性说明
Focusable开启或关闭该元素的焦点。关闭后,该元素完全无法获得焦点。
Traversable将该元素纳入 Tab、Shift+Tab 和方向键导航。关闭后,该元素仍可通过点击或 Focus 动作获得焦点,但用户无法用 Tab 切换到它。
Behavior控制当焦点到达该元素内部的第一个或最后一个元素时会发生什么。参见焦点作用域。

Focusable 和 Traversable 可以在时间轴上打关键帧,也可以进行数据绑定,因此你可以随文件状态变化开启或关闭焦点。例如,在模态框打开时,关闭其背后按钮的 Focusable。

焦点顺序(Focus order)​

Tab 将焦点移到下一个可遍历元素,Shift+Tab 移到上一个。顺序遵循层级,从上到下。要改变顺序,请在层级中重新排列元素。

方向键按方向移动焦点:移到画布上该方向最近的可聚焦元素。

元素隐藏时无法保持焦点。如果拥有焦点的元素被折叠(collapsed)、隐藏或不透明度为 0,焦点会移到最近的可聚焦祖先元素。

焦点作用域(Focus scopes)​

当一个带焦点节点的元素包含其他可聚焦元素时,它就成为一个作用域(scope):其子元素在焦点顺序中构成一个组。作用域的 Behavior 决定焦点到达组边缘时会发生什么。

Behavior说明
Parent Scope焦点离开该组,继续移到组外的下一个元素。这是默认值。
Closed Loop焦点从最后一个元素循环回第一个,或从第一个循环回最后一个。无法通过 Tab 离开该组。
Stop焦点停留在第一个或最后一个元素上。

响应焦点(Reacting to focus)​

使用状态机来显示焦点并作出响应。

  • Focus 和 Blur 监听器在元素获得或失去焦点时触发。由于祖先元素共享焦点,容器上的 Focus 监听器会在焦点首次进入容器时触发,其 Blur 监听器会在焦点离开容器时触发。焦点在容器内的子元素之间移动时,容器上的这两个监听器都不会触发。可用它们来显示焦点环、高亮或其他可见的焦点指示。
  • Focus 过渡条件用于检查某个特定元素当前是否拥有焦点。当该元素或其任一可聚焦后代拥有主焦点时,条件为真。
  • Keyboard 和 Text Input 监听器响应拥有主焦点的元素上的输入。如果该元素不处理某个按键,按键会向上传递给最近的可聚焦祖先元素。
⚠️

始终为获得焦点的元素提供可见的焦点指示。否则键盘用户无法知道自己当前所在的位置。

用监听器动作移动焦点(Moving focus with listener actions)​

为监听器添加 Focus 动作,即可从状态机移动焦点。在下拉菜单中选择一种模式:

模式说明
target将焦点移到特定元素。目标必须有焦点节点。
traverse按方向移动焦点:next、previous、up、down、left 或 right。
clear移除当前元素的焦点。

例如,用 target 在点击搜索按钮时聚焦搜索框,或用 clear 在菜单关闭时移除焦点。

在编辑器中预览焦点(Previewing focus in the editor)​

播放文件时,编辑器会在拥有焦点的元素周围绘制括号标记。在视口选项中切换 Focus Indicator 可显示或隐藏它们。

若要把按键发送给文件而不是触发编辑器快捷键,请按 Option+Space 以开启键盘捕获的方式播放,或点击播放栏中的 Toggle Keyboard Capture。

焦点与屏幕阅读器(Focus and screen readers)​

带焦点节点的元素会在语义面板中自动获得 Focusable 特征。将焦点与语义结合使用,辅助技术就能描述获得焦点的元素,例如将其播报为带标签的按钮。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群