焦点(Focus)
焦点需要运行时支持。参见功能支持中的「焦点(Focus)」。
焦点(Focus)决定由哪个元素接收键盘、文本和手柄输入。同一时间只有一个元素拥有主焦点(primary focus),但它的可聚焦祖先元素也被视为处于焦点中。例如,当可聚焦菜单内的某个按钮拥有主焦点时,该菜单也处于焦点中。
用户可以通过点击元素、按 Tab 和 Shift+Tab 或使用方向键来移动焦点;你的状态机也可以通过监听器动作移动焦点。
焦点让你的文件无需指针也能使用。键盘用户、开关控制(switch)用户和手柄玩家都依赖可预期的焦点顺序来访问按钮、输入框和其他交互元素。
让元素可聚焦(Making an element focusable)
为层级中的任意元素添加焦点节点(focus node)后,它就可以接收焦点。
选择要设为可聚焦的元素。
在 Inspector 中,点击 Focus 部分的 +。
配置焦点属性。
提示(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 特征。将焦点与语义结合使用,辅助技术就能描述获得焦点的元素,例如将其播报为带标签的按钮。