Indicar estado de foco

Um estado em foco fornece uma dica visual clara para ajudar os usuários a entender qual elemento da interface está com o foco de entrada no momento. Todos os componentes interativos do Material 3 fornecem indicações de foco integradas por padrão.

Observação: este guia mostra como desenhar indicações de foco visual. Para ouvir transições de foco de forma programática, consulte flags de foco (isFocused, hasFocus, isCaptured) ou acione mudanças na interface com base no estado. Consulte Reagir ao foco.

Indicação de foco do tema Material

Os componentes do Material usam a função ripple e LocalIndication para desenhar mudanças de estado visual. Para anexar um feedback de foco padrão do Material a um componente personalizado:

1. Crie um MutableInteractionSource usando remember { MutableInteractionSource() }.
2. Transmita a origem da interação ao modificador indication, junto com 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

Implementar indicações de foco personalizadas

Para dicas visuais personalizadas (como dimensionamento, bordas ou efeitos de brilho):

1. Crie um IndicationNodeFactory.
2. Observe as interações de foco emitidas pelo InteractionSource do elemento.
3. Aplique a indicação personalizada usando o modificador indication.

var interactionSource = remember { MutableInteractionSource() }

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