Cambiar el orden de recorrido del enfoque

En la sección Orden de recorrido del enfoque predeterminado, se describió cómo Compose agrega automáticamente el comportamiento de recorrido del foco a tus elementos, tanto para La navegación unidimensional (tecla tab) y bidimensional (teclas de flecha) En algunos quizás debas anular este comportamiento predeterminado y ser más explícito acerca del orden de recorrido requerido.

Cómo anular el orden de recorrido unidimensional

Para cambiar el orden de recorrido del enfoque predeterminado para la navegación unidimensional, Crea un conjunto de referencias, una para cada elemento componible enfocable:

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

Luego, usa el modificador focusRequester para asociar cada una con un elemento componible:

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

Ahora puedes usar el modificador focusProperties para especificar un orden de recorrido personalizado:

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

Cómo anular el orden de recorrido bidimensional

También es posible agregar un control detallado sobre el orden de recorrido del enfoque para la navegación bidimensional con las teclas de flecha. Para cada elemento, puedes anular el destino de navegación predeterminado para cada una de las indicaciones agregando el modificador focusProperties y especifica el elemento que surgirá, hacia abajo o en cualquier otra dirección:

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

Esta técnica no solo usa eficazmente las flechas del teclado, sino que también funciona Pad direccional y sticks en controles inalámbricos y con cable.