Target di messa a fuoco

Un target di selezione è un elemento UI su cui può spostarsi la selezione della tastiera. Gli utenti possono spostare la selezione della tastiera con il tasto Tab o i tasti direzionali (freccia):

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

Gli elementi UI interattivi sono target di attivazione per impostazione predefinita

Un componente interattivo è un target di stato attivo per impostazione predefinita. In altre parole, un elemento UI è un target di selezione se gli utenti possono toccarlo o fare clic su di esso.

Ad esempio, considera tre componenti Card. Se la prima e la terza scheda sono interattive (definiscono un callback onClick), ma la seconda scheda è puramente informativa (non ha una gestione dei clic), premendo il tasto Tab sulla prima scheda si salta la seconda e si passa direttamente alla terza.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Puoi rendere la seconda scheda un target di messa a fuoco fornendo un parametro onClick:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

Il modificatore clickable trasforma anche gli elementi UI personalizzati o standard in target di attivazione. Per maggiori dettagli, consulta Tocca e premi.

Attenzione: non utilizzare contemporaneamente i modificatori focusable e clickable. Questo porta a un comportamento errato perché crea due target di messa a fuoco indipendenti.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Rendi un composable un target di attivazione non cliccabile

Il modificatore focusable rende un componibile un target di stato attivo senza richiedere la semantica dei clic. Gli utenti possono spostare la selezione della tastiera sul composable modificato (ad esempio per ispezionare i contenuti con strumenti di accessibilità o scorrere l'area visibile), ma la pressione dei tasti Invio o Spazio non attiva un'azione di clic:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Rendi un composable non attivabile

In alcuni scenari, potresti voler escludere un elemento interattivo dalla navigazione da tastiera senza disattivare gli eventi di clic o del puntatore. Puoi impedire a un componente di ricevere lo stato attivo impostando canFocus = false all'interno del modificatore focusProperties:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt