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 unidimensionale.
• Tasti direzionali: spostano lo stato attivo in due dimensioni (Su, Giù, Sinistra e Destra).

Gli elementi interattivi della UI sono target di messa a fuoco per impostazione predefinita

Per impostazione predefinita, un componente interattivo è un target di messa a fuoco. In altre parole, un elemento dell'interfaccia utente è un target di messa a fuoco se gli utenti possono toccarlo o farci clic sopra.

Ad esempio, considera tre componenti Scheda. Se la prima e la terza scheda sono interattive (definiscono un callback onClick), ma la seconda è puramente informativa (non gestisce i 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 impostare la seconda carta come 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 dell'interfaccia utente standard o personalizzati in destinazioni di messa a fuoco. Per maggiori dettagli, consulta la sezione Tocca e premi.

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

Rendere un elemento componibile una destinazione attiva non cliccabile

Il modificatore focusable rende un elemento componibile un target di messa a fuoco senza richiedere la semantica del clic. Gli utenti possono spostare la selezione della tastiera sul composable modificato (ad esempio, per esaminare i contenuti con gli 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

Rendere un composable non selezionabile

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