Focar no Compose

Quando um usuário interage com seu app, ele geralmente toca em elementos na tela. No entanto, essa não é a única forma de interação. Outras formas de interação podem incluir o seguinte:

• Um usuário do ChromeOS pode usar as teclas de seta no teclado físico para navegar na tela.
• Alguém pode usar o controle de jogo conectado para navegar pelo menu do jogo.
• Um usuário de app para dispositivos móveis pode alternar entre elementos usando o teclado na tela.

Nesses casos, é importante acompanhar qual componente está ativo em um determinado momento, o que é o que chamamos de focus. Os elementos da tela precisam estar focados em uma ordem lógica. O Jetpack Compose tem uma maneira padrão de lidar com o foco que está correta na maioria dos casos. No entanto, em alguns casos, pode ser necessário modificar esse comportamento padrão.

As páginas a seguir descrevem como usar o foco no seu app:

• Mudar a ordem de travessia de foco: explica como mudar a ordem de foco padrão, adicionar grupos de foco e desativar o foco de um elemento combinável.
• Mudar o comportamento do foco: descreve como solicitar, capturar e liberar o foco, além de como redirecionar o foco ao entrar em uma tela.
• Reagir ao foco: explica como reagir a mudanças de foco, adicionar indicações visuais aos elementos e entender o estado do foco de um elemento.

Ordem de travessia de foco padrão

Antes de analisar o comportamento padrão da pesquisa de foco, é importante entender o conceito de nível na hierarquia: de modo geral, podemos dizer que dois Composables estão no mesmo nível quando são irmãos, o que significa que eles têm os mesmos pais. Por exemplo, os elementos dentro de uma Column estão no mesmo nível. Subir um nível significa ir de um filho para o pai Composable ou, manter o mesmo exemplo, voltar de um item para uma Column que o contém. O processo de descer um nível é o contrário, do elemento pai Column para os itens contidos nele. Esse conceito pode ser aplicado a cada Composable que possa conter outro Composables.

A navegação pela IU pode acontecer de várias maneiras, das quais a maioria dos usuários já sabe:

• GUIAS: navegação unidimensional, avançar ou retroceder. A navegação por TAB avança o foco para o elemento seguinte ou anterior na hierarquia. Por padrão, o Compose segue a declaração do Composables. A navegação unidirecional pode ser realizada usando a tecla tab no teclado ou a borda rotativa em um relógio, e esse tipo de pesquisa de foco acessa cada elemento na tela.
• Teclas de seta: navegação bidimensional, para a esquerda, para a direita, para cima ou para baixo. A navegação bidimensional pode ser realizada com um D-pad em uma TV ou teclas de seta em um teclado, e a ordem de travessia só visita elementos em um determinado nível. Você pode usar o botão direcional central e o botão "Voltar" para descer e voltar para um nível diferente.

Veja como exemplo a captura de tela abaixo, na qual você tem quatro botões, um abaixo do outro, e quer alternar entre eles em ordem de aparência. O Jetpack Compose oferece esse comportamento pronto para uso: o kit de ferramentas permite percorrer cada elemento combinável em ordem vertical, de cima para baixo, usando a tecla tab, ou mover o foco, pressionando a seta para cima ou para baixo.

Quando você muda para um tipo diferente de layout, as coisas mudam um pouco. Caso seu layout tenha mais de uma coluna, como o layout abaixo, o Jetpack Compose permite navegar por elas sem precisar adicionar código. Se você pressionar a tecla tab, o Jetpack Compose destacará automaticamente os itens na ordem de declaração, do primeiro ao quarto. Usar as teclas de seta no teclado faz com que a seleção siga a direção desejada no espaço 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

As Composables são declaradas em dois Rows, e os elementos de foco são declarados em ordem, do primeiro ao quarto. Ao pressionar a tecla tab, a ordem de foco abaixo é produzida:

No snippet abaixo, você declara os itens em Columns, e não em Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Esse layout atravessa os itens verticalmente, de cima para baixo, do início da tela ao fim:

Os dois exemplos anteriores, embora diferem na navegação unidirecional, oferecem a mesma experiência quando se trata da navegação bidimensional. Isso geralmente ocorre porque os itens na tela têm a mesma localização geográfica nos dois exemplos. Navegar para a direita da primeira Column move o foco para o segundo, e navegar para baixo do primeiro Row move o foco para o abaixo.

Recomendados para você

• Observação: o texto do link aparece quando o JavaScript está desativado.
• Mudar o comportamento do foco
• ConstraintLayout no Compose
• Layouts de fluxo no Compose