Imposta lo stato attivo in Scrivi

Quando un utente interagisce con la tua app, spesso lo fa toccando elementi della sullo schermo. Tuttavia, questa non è l'unica forma di interazione. Altre forme di interazione potrebbe includere:

• Un utente di ChromeOS potrebbe usare i tasti Freccia sulla tastiera fisica per per spostarti sullo schermo.
• Un utente che partecipa a un gioco potrebbe utilizzare il controller di gioco collegato per navigare nel menu del gioco.
• Un utente di app mobile potrebbe scorrere gli elementi utilizzando la tastiera sullo schermo.

In questi casi, è importante tenere traccia di quale componente è attivo in un determinato momento specifico, che è ciò che chiamiamo attenzione. Gli elementi sullo schermo devono essere concentrate in un ordine logico. Jetpack Compose ha un modo predefinito per gestire lo stato attivo che è corretto nella maggior parte dei casi. Tuttavia, in alcuni casi, potrebbe essere necessario modificare questo comportamento predefinito.

Le pagine seguenti descrivono come utilizzare lo stato attivo nella tua app:

• Modifica dell'ordine di attraversamento dello stato attivo: viene spiegato come modificare l'ordine di impostazione dello stato attivo predefinito, aggiungere i focus group e disattivare lo stato attivo di un componibile.
• Modifica del comportamento dello stato attivo: descrive come richiedere, acquisire e rilasciare lo stato attivo e come reindirizzare lo stato attivo quando si entra in una schermata.
• Reagisci all'elemento attivo: spiega come reagire ai cambiamenti di messa a fuoco, aggiungere segnali visivi agli elementi e comprendere lo stato di messa a fuoco di un elemento.

Ordine di attraversamento dello stato attivo predefinito

Prima di esaminare il comportamento predefinito della ricerca in primo piano, è importante a capire il concetto di livello nella gerarchia: in generale, possiamo diciamo che due Composables sono allo stesso livello quando sono fratelli, il che significa che hanno gli stessi genitori. Ad esempio, gli elementi all'interno di un Column si trovano allo stesso livello. Salire un livello significa passare da un bambino al suo Composable principale o, mantenendo lo stesso esempio, tornando da un elemento a un Column che la contiene. Scendere di un livello è il contrario, dalla Column principale agli elementi contenuti. Questo concetto può essere applicato a ogni Composable che possono contenere altri Composables.

La navigazione nell'UI può avvenire in diversi modi, alcuni dei quali già la maggior parte degli utenti conosci:

• SCHEDE: navigazione unidimensionale, avanti o indietro. SCHEDA La navigazione avanza all'elemento successivo o precedente della gerarchia. Di Per impostazione predefinita, Compose segue la dichiarazione di Composables. Unidirezionale è possibile navigare usando il tasto tab su una tastiera oppure La cornice dell'orologio e questo tipo di ricerca mirata visiterà ogni elemento della schermo.
• Tasti freccia: navigazione bidimensionale con direzione a sinistra, destra, in alto o in basso. La navigazione bidimensionale può essere ottenuta tramite un D-pad su una TV o una freccia. tasti su una tastiera e il suo ordine di attraversamento visita solo gli elementi in un dato livello. Puoi usare il centro del D-pad e il pulsante Indietro per scendere e tornare indietro livello diverso.

Prendi come esempio lo screenshot seguente, in cui sono presenti quattro pulsanti, uno sotto dall'altra e voglia scorrerli tutti in ordine di aspetto. Jetpack Compose offre questo comportamento fin dal primo avvio: il toolkit ti consente scorri ogni componibile in ordine verticale dall'alto verso il basso utilizzando tab o sposta lo stato attivo premendo la Freccia su o giù.

Quando si passa a un tipo di layout diverso, le cose cambiano leggermente. Se le tue ha più di una colonna, come il layout seguente, Jetpack Compose ti consente per esaminarle senza dover aggiungere codice. Se premi il tasto tab chiave, Jetpack Compose evidenzia automaticamente gli articoli in ordine di dichiarazione, dalla prima alla quarta. Usa i tasti freccia sulla tastiera per effettuare la selezione seguire la direzione desiderata nello spazio 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

I valori Composables vengono dichiarati in due Rows e gli elementi su cui è impostato lo stato attivo sono dichiarate in ordine, dalla prima alla quarta. Quando premi il tasto tab, produce il seguente ordine di priorità:

Nello snippet seguente, dichiari gli elementi in Columns anziché in Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Questo layout attraversa gli elementi verticalmente, dall'alto verso il basso, dall'inizio dello schermo verso la fine:

I due esempi precedenti, sebbene differiscono nella navigazione unidirezionale, forniscono che offre la stessa esperienza di navigazione bidimensionale. Di solito perché gli elementi sullo schermo hanno lo stesso posizionamento geografico esempi. Se si parte da destra a partire dal primo Column, lo stato attivo viene spostato su e scendendo dal primo Row sposta lo stato attivo su quello sotto.

Consigliati per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Modificare il comportamento di concentrazione
• Layout del vincolo in Compose
• Layout di flusso in Compose

di Gemini Advanced.