Orden de recorrido del enfoque

Los usuarios pueden mover el enfoque del teclado entre los elementos de la IU con la tecla Tab o las teclas direccionales (flechas o pad direccional):

• Tab o Mayúsculas + Tab: Mueve el enfoque hacia adelante o hacia atrás en el orden de apariencia unidimensional.
• Teclas de dirección: Mueven el enfoque en dos dimensiones (Arriba, Abajo, Izquierda y Derecha).

Recorrido del enfoque unidimensional

En el recorrido del enfoque unidimensional, la tecla Tab avanza el enfoque por la IU según el orden de apariencia visual en la pantalla.

Por ejemplo, cuando cuatro botones se organizan en filas:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

Si presionas la tecla Tab, el enfoque se mueve de forma secuencial entre los botones en el siguiente orden:

1. 1ᵉʳ botón (parte superior izquierda)
2. 2º botón (extremo superior)
3. 3ᵉʳ botón (parte inferior, al inicio)
4. 4º botón (extremo inferior)

Si presionas Tab en el elemento final, se vuelve al primer objetivo de enfoque. Si presionas Mayúsculas + Tab, el enfoque se mueve en orden inverso.

Recorrido del enfoque bidimensional

Si presionas las teclas de flecha del teclado o usas un pad direccional, se activa el recorrido de enfoque en dos dimensiones.

En el recorrido bidimensional, el sistema inspecciona las coordenadas geométricas y los límites espaciales de los elementos de la IU para determinar el objetivo más cercano en la dirección solicitada.

El recorrido del enfoque en dos dimensiones no se une. Si el usuario presiona la tecla Abajo mientras se enfoca en el elemento inferior, el enfoque permanece en ese elemento en lugar de saltar a la parte superior de la pantalla.

Restablece el recorrido del enfoque con clics del puntero

Cuando cambies entre un teclado físico y un mouse o panel táctil en computadoras o dispositivos de pantalla grande, ten en cuenta lo siguiente:

• Borrar el enfoque al presionar o hacer clic: Hacer clic o presionar en un espacio no interactivo con un mouse o panel táctil libera el enfoque del elemento activo.
• Reiniciar el recorrido: Después de que se borra el enfoque, la siguiente presión de la tecla Tab reinicia el recorrido unidimensional en el primer objetivo de enfoque en orden de apariencia visual, en lugar de reanudar desde el elemento activo anteriormente. Es igual al recorrido del enfoque bidimensional. Las teclas de dirección mueven el enfoque del teclado al objetivo de enfoque más cercano en la dirección solicitada.

Para obtener detalles sobre cómo borrar el enfoque de forma programática, consulta Cómo mover y borrar el enfoque.

Cómo personalizar el orden de recorrido del enfoque

Puedes personalizar el comportamiento de recorrido con el modificador focusProperties.

Cómo personalizar el orden de recorrido unidimensional

Para anular el desplazamiento unidimensional, especifica la propiedad next o previous con un FocusRequester:

1. Crea un objeto FocusRequester con remember { FocusRequester() }.
2. Adjunta el FocusRequester al elemento componible de destino con el modificador focusRequester.
3. Aplica el modificador focusProperties al elemento componible de origen y asigna FocusRequester a next (para Tab) o previous (para Mayúsculas + Tab).

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

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

Cómo personalizar el orden de recorrido bidimensional

De manera similar, puedes anular el recorrido del enfoque bidimensional asignando instancias de FocusRequester a up, down, start, end, left o right dentro de focusProperties:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

Para bloquear la navegación con enfoque en una dirección específica (por ejemplo, en los límites del diseño), asigna FocusRequester.Cancel a esa propiedad (por ejemplo, down = FocusRequester.Cancel). Para conservar de forma explícita el algoritmo de recorrido predeterminado del sistema en una dirección determinada, asigna FocusRequester.Default.