A seção Ordem de travessia de foco padrão descreve como o Compose
adiciona automaticamente o comportamento de travessia de foco aos elementos para
navegação unidimensional (tecla tab
) e bidimensional (teclas de seta). Em alguns
casos, pode ser necessário substituir esse comportamento padrão e ser mais explícito
sobre a ordem de travessia necessária.
Substituir a ordem de travessia unidimensional
Para mudar a ordem de travessia de foco padrão para a navegação unidimensional, crie um conjunto de referências, uma para cada elemento combinável focalizável:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
Em seguida, use o modificador focusRequester
para associar cada um deles a um
elemento combinável:
Column { Row { TextButton({}, Modifier.focusRequester(first)) { Text("First field") } TextButton({}, Modifier.focusRequester(third)) { Text("Third field") } } Row { TextButton({}, Modifier.focusRequester(second)) { Text("Second field") } TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") } } }
Agora você pode usar o modificador focusProperties
para especificar uma ordem de travessia personalizada:
Column { Row { TextButton( {}, Modifier .focusRequester(first) .focusProperties { next = second } ) { Text("First field") } TextButton( {}, Modifier .focusRequester(third) .focusProperties { next = fourth } ) { Text("Third field") } } Row { TextButton( {}, Modifier .focusRequester(second) .focusProperties { next = third } ) { Text("Second field") } TextButton( {}, Modifier .focusRequester(fourth) .focusProperties { next = first } ) { Text("Fourth field") } } }
Substituir a ordem de travessia bidimensional
Também é possível adicionar controle refinado sobre a ordem de travessia de foco
para navegação bidimensional com as teclas de seta. Para cada elemento, você pode
substituir o destino de navegação padrão para cada uma das rotas adicionando
o modificador focusProperties
e especificando o item que vem para cima,
para baixo ou em qualquer outra direção:
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
Essa técnica não só usa efetivamente as setas do teclado, mas também funciona com D-pads e sticks em controles com e sem fio.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Mudar o comportamento de foco
- Foco no Compose