Objetivos de enfoque

Un objetivo de enfoque es un elemento de la IU al que se puede mover el enfoque del teclado. Los usuarios pueden mover el enfoque del teclado con la tecla Tab o las teclas direccionales (flechas):

• 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).

Los elementos interactivos de la IU son objetivos de enfoque de forma predeterminada

Un componente interactivo es un objetivo de enfoque de forma predeterminada. En otras palabras, un elemento de la IU es un objetivo de enfoque si los usuarios pueden presionarlo o hacer clic en él.

Por ejemplo, considera tres componentes Card. Si la primera y la tercera tarjeta son interactivas (definen una devolución de llamada onClick), pero la segunda tarjeta es puramente informativa (no tiene control de clics), presionar la tecla Tab en la primera tarjeta omite la segunda y avanza directamente a la tercera.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Puedes hacer que la segunda tarjeta sea un objetivo de enfoque proporcionando un parámetro onClick:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

El modificador clickable también convierte los elementos de la IU personalizados o estándar en objetivos de enfoque. Consulta Cómo presionar y mantener presionado para obtener más detalles.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Cómo hacer que un elemento componible sea un destino de enfoque no apto para clics

El modificador focusable convierte un elemento componible en un objetivo de enfoque sin requerir semántica de clics. Los usuarios pueden mover el enfoque del teclado al elemento componible modificado (por ejemplo, para inspeccionar el contenido con herramientas de accesibilidad o desplazarse por la ventana gráfica), pero presionar las teclas Intro o Espacio no activa una acción de clic:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Cómo hacer que un elemento componible no pueda recibir el enfoque

En algunas situaciones, es posible que desees excluir un elemento interactivo de la navegación con el teclado sin inhabilitar los eventos de puntero o clic. Puedes evitar que un componente reciba el enfoque configurando canFocus = false dentro del modificador focusProperties:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt