解决TV单页面多组件覆盖焦点走焦混乱的问题
·
介绍
当我们在开发TV端应用时,经常会遇到需要在单页面层叠组件元素的情况。比如说弹出提示框或者退出保留页,此时如果焦点在上层组件,通过默认走焦会遇到焦点从前面组件走到后面组件的情况,本文将介绍如何规避这种情况。
解决方案
我们可以使用组件的focusScopeId属性把焦点的走焦逻辑控制在规定的容器内。
focusScopeId(id: string, isGroup?: boolean, arrowStepOut?: boolean): T
设置当前容器组件的id标识,以及是否为焦点组。新增参数arrowStepOut,用于设置能否使用方向键走焦出当前焦点组。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| id | string | 是 |
设置当前容器组件的id标识。 说明: 单个层级页面下,id标识全局唯一,不可重复。 |
| isGroup | boolean | 否 |
设置当前容器组件是否为焦点组。true表示容器组件为焦点组,false表示容器组件不是焦点组。默认值为false。 说明: 焦点组不可嵌套,不可重复配置。 焦点组不能和tabIndex混用。 配置焦点组的目的是使得容器及容器内的元素可以按照焦点组规则走焦。焦点组走焦规则: 1.焦点组容器内只能通过方向键走焦,tab键会使焦点跳出焦点组容器。 2.通过方向键使焦点从焦点组容器外切换到焦点组容器内时,若焦点组容器内存在优先级为PREVIOUS的组件,则优先级为PREVIOUS的组件获焦,否则,由焦点组容器内上次获焦的组件获焦。 |
| arrowStepOut | boolean | 否 | 设置能否使用方向键走焦出当前焦点组。true表示可以使用方向键走焦出当前焦点组,false表示不能使用方向键走焦出当前焦点组。默认值为true。 |
Column() {
}
.focusScopeId('ComponentId', true, false)
更多推荐
所有评论(0)