Orden de recorrido del enfoque

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

• Tab / 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 aparición visual en la pantalla.

Por ejemplo, cuando se organizan cuatro botones en filas, ocurre lo siguiente:

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 por los botones en el siguiente orden:

1. Primer botón (arriba a la izquierda)
2. Segundo botón (extremo superior)
3. Tercer botón (abajo a la izquierda)
4. Cuarto 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 moverá 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 que se encuentra más abajo, el enfoque permanecerá 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 dispositivos de escritorio o con pantalla grande, ten en cuenta lo siguiente:

• Borrar el enfoque cuando se presiona o se hace clic: Cuando se hace clic o se presiona un espacio no interactivo con un mouse o un panel táctil, se quita el enfoque del elemento activo.
• Reiniciar el recorrido: Después de que se borra el enfoque, la siguiente vez que se presiona la tecla Tab, se reinicia el recorrido unidimensional en el primer objetivo de enfoque en el orden de apariencia visual, en lugar de reanudarse desde el elemento activo anterior. Es igual que el 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 manera programática, consulta Cómo mover y borrar el enfoque.

Personaliza el orden de recorrido del enfoque

Puedes personalizar el comportamiento de recorrido con el modificador focusProperties.

Personaliza el orden de recorrido unidimensional

Para anular el recorrido 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

Del mismo modo, 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 de 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 retener de forma explícita el algoritmo de recorrido predeterminado del sistema para una dirección determinada, asigna FocusRequester.Default.