Indicar estado de foco

Um estado em foco fornece uma indicação visual clara para ajudar os usuários a entender qual elemento da IU está em foco 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 visuais de foco. Para detectar programaticamente as transições de foco, consultar as flags de foco (isFocused, hasFocus, isCaptured) ou acionar mudanças na interface orientadas por estado, consulte Reagir ao foco.

Indicação de foco do tema do Material Design

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

1. Crie um MutableInteractionSource usando remember { MutableInteractionSource() }.
2. Transmita a origem da interação para o 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 indicadores visuais personalizados (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