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 aparición 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

Para hacer que la segunda tarjeta sea un objetivo de enfoque, proporciona 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 Presiona y mantén 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 foco que no admita 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 desplazar el viewport), 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 se pueda enfocar

En algunas situaciones, es posible que quieras excluir un elemento interactivo de la navegación con el teclado sin inhabilitar los eventos de puntero o de clic. Para evitar que un componente reciba el enfoque, configura 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