Alvos de foco

Um alvo de foco é um elemento da interface para que o foco do teclado pode se mover. Os usuários podem mover o foco do teclado com a tecla Tab ou as teclas direcionais (setas):

• Tab ou Shift+Tab: move o foco para frente ou para trás em uma ordem de aparência unidimensional.
• Teclas direcionais: movem o foco em duas dimensões (Para cima, Para baixo, Para a esquerda e Para a direita).

Os elementos da interface interativos são alvos de foco por padrão

Um componente interativo é alvo de foco por padrão. Em outras palavras, um elemento da interface é um alvo de foco se os usuários podem tocar ou clicar nele.

Por exemplo, considere três componentes Card. Se o primeiro e o terceiro cards forem interativos (definem um callback onClick), mas o segundo for puramente informativo (não tem processamento de cliques), pressionar a tecla Tab no primeiro card vai pular o segundo e avançar diretamente para o terceiro.

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

Você pode tornar o segundo card um alvo de foco fornecendo um parâmetro onClick:

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

O modificador clickable também transforma elementos de interface personalizados ou padrão em alvos de foco. Consulte Tocar e pressionar para mais detalhes.

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

Transformar um elemento combinável em um destino de foco não clicável

O modificador focusable transforma um elemento combinável em um alvo de foco sem exigir semântica de clique. Os usuários podem mover o foco do teclado para o elemento combinável modificado (por exemplo, para inspecionar o conteúdo com ferramentas de acessibilidade ou rolar a janela de visualização), mas pressionar as teclas Enter ou Espaço não aciona uma ação de clique:

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

Tornar um elemento combinável não focalizável

Em alguns casos, talvez seja necessário excluir um elemento interativo da navegação por teclado sem desativar eventos de ponteiro ou clique. Para impedir que um componente receba foco, defina canFocus = false no 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