Mudar a ordem de travessia de foco

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() }
FocusSnippets.kt

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") }
    }
}
FocusSnippets.kt

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")
        }
    }
}
FocusSnippets.kt

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
        }
) {}
FocusSnippets.kt

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.