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 na 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 (definirem um callback onClick), mas o segundo for puramente informativo (não tiver 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)")
}

Para tornar o segundo card um alvo de foco, forneça um parâmetro onClick:

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

O modificador clickable também transforma elementos da 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")
}

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

O modificador focusable torna um elemento combinável 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")
}

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

Em alguns cenários, talvez você queira excluir um elemento interativo da navegação por teclado sem desativar os eventos de ponteiro ou clique. Para impedir que um componente receba foco, defina canFocus = false dentro do modificador focusProperties:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)

Anterior
Visão geral
Avançar
Focus traversal order (ordem de apresentação do foco)