更改焦点遍历顺序

默认焦点遍历顺序部分介绍了 Compose 如何 自动将焦点遍历行为添加到您的元素中 一维（tab 键）和二维（箭头键）导航。在某些 则您可能需要替换此默认行为， 所需的遍历顺序。

替换一维遍历顺序

要更改一维导航的默认焦点遍历顺序， 创建一组引用，每个可聚焦可组合项对应一个引用：

val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
FocusSnippets.kt

然后，使用 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") }
    }
}
FocusSnippets.kt

您现在可以使用 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")
        }
    }
}
FocusSnippets.kt

替换二维遍历顺序

还可以添加对焦点遍历顺序的精细控制 用于使用箭头键进行二维导航。对于每个元素，您可以 覆盖每个路线的默认导航目的地，方法是将 focusProperties 修饰符，并指定将出现的项， 向下或其他任何方向：

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

这项技术不仅能有效利用键盘箭头，还能 有线和无线控制器上的方向键和方向键。