Indica el estado de enfoque

Un estado de enfoque proporciona una señal visual clara para ayudar a los usuarios a comprender qué elemento de la IU tiene el enfoque de entrada en un momento determinado. Todos los componentes interactivos de Material 3 proporcionan indicaciones de enfoque integradas de forma predeterminada.

Nota: En esta guía, se explica cómo dibujar indicaciones de enfoque visual. Para escuchar transiciones de enfoque de forma programática, consultar marcas de enfoque (isFocused, hasFocus, isCaptured) o activar cambios en la IU basados en el estado, consulta Cómo reaccionar al enfoque.

Indicación de enfoque del tema de Material

Los componentes de Material usan la función ripple y LocalIndication para dibujar los cambios de estado visual. Para adjuntar comentarios de enfoque de Material estándar a un componente personalizado, haz lo siguiente:

1. Crea un MutableInteractionSource con remember { MutableInteractionSource() }.
2. Pasa la fuente de interacción al modificador indication, junto con ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Implementa indicaciones de enfoque personalizadas

Para las pistas visuales personalizadas (como el ajuste de escala, los bordes o los efectos de resplandor), haz lo siguiente:

1. Crea un IndicationNodeFactory.
2. Observa las interacciones de enfoque que emite el InteractionSource del elemento.
3. Aplica la indicación personalizada con el modificador indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt