Evidenziare la route selezionata
Sincronizzi la selezione con il back stack.
Evidenziare la route selezionata è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
La selezione deve riflettere la realtà
Una scheda dovrebbe evidenziarsi in base alla posizione effettiva dell'utente, non a un valore impostato manualmente. La back stack è la fonte attendibile. 🧭
Leggere la voce corrente
Chieda al NavController la currentBackStackEntryAsState aggiornata. Viene aggiornata automaticamente ogni volta che cambia la navigazione.
val entry by navController.currentBackStackEntryAsState()Ottenere la route attiva
Da quella voce legga la stringa della route attiva dalla sua destination. La stringa indica quale scheda è visualizzata.
val route = entry?.destination?.routeConfrontare per impostare selected
Ora imposti selected per ogni elemento confrontando la route attiva con quella della scheda. La corrispondenza diventa la scheda selected evidenziata.
selected = route == tab.routeLa gerarchia è più importante dell'uguaglianza
Con i grafi annidati, un'uguaglianza esatta può non bastare. Controllare la hierarchy della destinazione mantiene attiva la scheda anche nelle relative sottoschermate.
selected = entry?.destination?.hierarchy?.any {
it.route == tab.route
} == trueNavigare al tocco
In onClick, chiami navController.navigate con la route della scheda per raggiungerla. La selezione seguirà poi automaticamente la back stack.
onClick = { navController.navigate(tab.route) }Evitare di accumulare copie
Premere ripetutamente una scheda non dovrebbe accumulare schermate. Usi launchSingleTop, così in cima rimane una sola copia della destinazione.
navController.navigate(tab.route) {
launchSingleTop = true
}Tornare all'inizio
Premendo Indietro da una scheda qualsiasi si dovrebbe tornare alla scheda iniziale, senza attraversare tutte quelle visitate. Usare popUpTo sulla destinazione iniziale risolve il problema.
popUpTo(navController.graph.startDestinationId) {
saveState = true
}Colorare la scheda attiva
NavigationBarItem applica automaticamente una tinta all'elemento selezionato, ma può personalizzarlo con colors in modo che la scheda attiva rispecchi il suo brand.
colors = NavigationBarItemDefaults.colors(
selectedIconColor = MaterialTheme.colorScheme.primary
)Visibilità delle etichette
Usi alwaysShowLabel per decidere se le schede non selezionate debbano continuare a mostrare il testo. Mostrare solo l'etichetta attiva è una scelta pulita e comune.
alwaysShowLabel = falseUn unico ciclo reattivo
Metta tutto insieme: legga la route una volta, poi nel suo forEach la confronti con ogni scheda. La selezione rispecchierà perfettamente la navigazione.
Controllo rapido
Ha collegato la selezione alla back stack. Una domanda rapida.
Riepilogo
Ha sincronizzato l'evidenziazione con la back stack: legga la route corrente, la confronti per ogni scheda e navighi con launchSingleTop e popUpTo. Ora la selezione riflette sempre la realtà. 🎯
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Evidenziare la route selezionata» è gratuita?
Sì — il testo completo di «Evidenziare la route selezionata» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Evidenziare la route selezionata»?
Sincronizzi la selezione con il back stack. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Evidenziare la route selezionata»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- NavigationBar con più schede
- Evidenziare la route selezionata
- Preservare lo stato delle schede al cambio
- TabRow e pagine scorrevoli