更改焦点遍历顺序

“默认焦点遍历顺序”部分描述了 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

此技术不仅有效地利用了键盘箭头，还可以与有线和无线控制器的方向键和摇杆配合使用。

为您推荐

注意：JavaScript 关闭时显示链接文本。
更改焦点行为
Compose 中的焦点

概述

更改焦点行为