Cambiar el orden de recorrido del enfoque

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

Anula el orden de recorrido unidimensional

A fin de 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 uno de ellos 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

Anula el orden transversal 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 de cada una de las instrucciones sobre cómo llegar agregando el modificador focusProperties y especificando el elemento que aparecería, 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 de manera eficaz las flechas del teclado, sino que funcionaría con pads direccionales y sticks de controles inalámbricos y con cable.