Ordine di attraversamento dello stato attivo

Gli utenti possono spostare la selezione della tastiera tra gli elementi UI utilizzando il tasto Tab o i tasti direzionali (freccia / D-pad):

• Tab / Maiusc+Tab: sposta lo stato attivo in avanti o indietro nell'ordine di visualizzazione unidimensionale.
• Tasti direzionali: spostano lo stato attivo in modo bidimensionale (Su, Giù, Sinistra e Destra).

Attraversamento dello stato attivo monodimensionale

Nell'attraversamento dello stato attivo unidimensionale, il tasto Tab sposta lo stato attivo nell'interfaccia utente in base all'ordine di visualizzazione sullo schermo.

Ad esempio, quando quattro pulsanti sono disposti in righe:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

Premendo il tasto Tab, lo stato attivo si sposta in sequenza tra i pulsanti nel seguente ordine:

1. 1° pulsante (in alto a sinistra)
2. 2° pulsante (estremità superiore)
3. 3° pulsante (in basso a sinistra)
4. 4° pulsante (in basso)

Se premi Tab sull'ultimo elemento, torni al primo target di selezione. Se premi Maiusc+Tab, lo stato attivo si sposta in ordine inverso.

Attraversamento dello stato attivo bidimensionale

La pressione dei tasti Freccia della tastiera o l'utilizzo di un D-pad attiva l'attraversamento dello stato attivo bidimensionale.

Nella navigazione bidimensionale, il sistema ispeziona le coordinate geometriche e i confini spaziali degli elementi UI per determinare il target più vicino nella direzione richiesta.

L'attraversamento dello stato attivo bidimensionale non va a capo. Se l'utente preme il tasto Giù mentre lo stato attivo è sull'elemento più in basso, lo stato attivo rimane su quell'elemento anziché passare alla parte superiore dello schermo.

Reimposta l'attraversamento dello stato attivo con i clic del puntatore

Quando passi da una tastiera fisica a un mouse o un touchpad su computer o dispositivi con schermi di grandi dimensioni:

• Cancella lo stato attivo con un tocco o un clic: se fai clic o tocchi uno spazio non interattivo con un mouse o un touchpad, lo stato attivo viene rimosso dall'elemento attivo.
• Riavvia l'attraversamento: dopo aver cancellato lo stato attivo, la pressione successiva del tasto Tab riavvia l'attraversamento unidimensionale sul primo target attivo nell'ordine di aspetto visivo, anziché riprendere dall'elemento precedentemente attivo. È lo stesso della navigazione con lo stato attivo bidimensionale. I tasti direzionali spostano la selezione della tastiera sul target di selezione più vicino nella direzione richiesta.

Per maggiori dettagli sulla cancellazione dello stato attivo in modo programmatico, vedi Spostare e cancellare lo stato attivo.

Personalizza l'ordine di attraversamento dello stato attivo

Puoi personalizzare il comportamento di attraversamento con il modificatore focusProperties.

Personalizza l'ordine di attraversamento unidimensionale

Per eseguire l'override dell'attraversamento unidimensionale, specifica la proprietà next o previous con un FocusRequester:

1. Crea un oggetto FocusRequester con remember { FocusRequester() }.
2. Collega il FocusRequester al composable di destinazione utilizzando il modificatore focusRequester.
3. Applica il modificatore focusProperties al composable di origine e assegna FocusRequester a next (per Tab) o previous (per Maiusc+Tab).

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

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

Personalizza l'ordine di attraversamento bidimensionale

Analogamente, puoi eseguire l'override dell'attraversamento del focus bidimensionale assegnando istanze FocusRequester a up, down, start, end, left o right all'interno di focusProperties:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

Per bloccare la navigazione dello stato attivo in una direzione specifica (ad esempio, ai limiti del layout), assegna FocusRequester.Cancel a questa proprietà (ad esempio, down = FocusRequester.Cancel). Per mantenere esplicitamente l'algoritmo di attraversamento predefinito del sistema per una determinata direzione, assegna FocusRequester.Default.