默认焦点遍历顺序部分介绍了 Compose 如何针对一维(tab
键)和二维(箭头键)导航自动为元素添加焦点遍历行为。在某些情况下,您可能需要替换此默认行为,并更明确地说明所需的遍历顺序。
替换一维遍历顺序
如需更改一维导航的默认焦点遍历顺序,您需要创建一组引用,每个可聚焦可组合项对应一个引用:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
然后,使用 focusRequester
修饰符将每个修饰符与可组合项相关联:
Column { Row { TextButton({}, Modifier.focusRequester(first)) { Text("First field") } TextButton({}, Modifier.focusRequester(third)) { Text("Third field") } } Row { TextButton({}, Modifier.focusRequester(second)) { Text("Second field") } TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") } } }
您现在可以使用 focusProperties
修饰符指定自定义遍历顺序:
Column { Row { TextButton( {}, Modifier .focusRequester(first) .focusProperties { next = second } ) { Text("First field") } TextButton( {}, Modifier .focusRequester(third) .focusProperties { next = fourth } ) { Text("Third field") } } Row { TextButton( {}, Modifier .focusRequester(second) .focusProperties { next = third } ) { Text("Second field") } TextButton( {}, Modifier .focusRequester(fourth) .focusProperties { next = first } ) { Text("Fourth field") } } }
替换二维遍历顺序
此外,您还可以使用箭头键添加对二维导航的焦点遍历顺序的精细控制。对于每个元素,您可以替换每个路线的默认导航目的地,只需添加 focusProperties
修饰符并指定出现、向下或任何其他方向的项即可:
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
此方法不仅可以有效使用键盘箭头,还可以与有线和无线控制器上的方向键和摇杆配合使用。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 更改焦点行为
- Compose 中的焦点