Modifica ordine di attraversamento stato attivo

La sezione Ordine di attraversamento dell'elemento attivo predefinito ha descritto in che modo Compose aggiunge automaticamente il comportamento di attraversamento dell'elemento attivo ai tuoi elementi, sia per la navigazione unidimensionale (tasto tab) sia per la navigazione bidimensionale (tasti freccia). In alcuni casi, potrebbe essere necessario eseguire l'override di questo comportamento predefinito e indicare in modo più esplicito l'ordine di attraversamento richiesto.

Esegui l'override dell'ordine di attraversamento unidimensionale

Per modificare l'ordine predefinito di attraversamento dello stato attivo per la navigazione unidimensionale, devi creare un insieme di riferimenti, uno per ogni elemento componibile attivabile:

val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
FocusSnippets.kt

Quindi, utilizza il modificatore focusRequester per associare ciascuno di questi a un elemento componibile:

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

Ora puoi utilizzare il modificatore focusProperties per specificare un ordine di attraversamento personalizzato:

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

Esegui l'override dell'ordine di attraversamento bidimensionale

Puoi anche aggiungere un controllo granulare sull'ordine di attraversamento dello stato attivo per la navigazione bidimensionale con i tasti freccia. Per ogni elemento, puoi eseguire l'override della destinazione di navigazione predefinita per ciascuna delle indicazioni stradali aggiungendo il modificatore focusProperties e specificando l'elemento che salirebbe, scenderebbe o in qualsiasi altra direzione:

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

Questa tecnica non solo utilizza efficacemente le frecce della tastiera, ma funziona anche con D-Pad e stick su controller con cavo e wireless.