Jetpack Compose Academy · Lektion

Fremhævning af den valgte route

Synkronisér valget med back stack.

Lektion 2 af 413 trin

Fremhævning af den valgte route er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Markeringen skal afspejle virkeligheden

En fane skal fremhæves på grund af brugerens faktiske placering, ikke på grund af en værdi, du har angivet manuelt. Tilbage-stakken er din sandhedskilde. 🧭

Læs det aktuelle element

Bed NavController om den aktuelle currentBackStackEntryAsState. Den opdateres automatisk, hver gang navigationen ændres.

val entry by navController.currentBackStackEntryAsState()

Hent den aktive rute

Fra dette element læser du den aktive rutetekst fra dets destination. Teksten fortæller dig, hvilken fane der vises.

val route = entry?.destination?.route

Sammenlign for at markere den valgte

Markér nu hvert element som valgt ved at sammenligne den aktive rute med fanens rute. Sammenfaldet bliver den fremhævede valgte fane.

selected = route == tab.route

Hierarki slår lighed

For indlejrede grafer kan en nøjagtig lighedskontrol komme til kort. Hvis du kontrollerer destinationens hierarki, markeres en fane som aktiv, også på dens underskærme.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Navigér ved tryk

I onClick kalder du navController.navigate med fanens rute for at gå derhen. Markeringen følger derefter automatisk tilbage-stakken.

onClick = { navController.navigate(tab.route) }

Undgå at stable kopier

Hvis du trykker gentagne gange på en fane, bør skærme ikke hobe sig op. Brug launchSingleTop, så der kun ligger én kopi af en destination øverst.

navController.navigate(tab.route) {
  launchSingleTop = true
}

Gå tilbage til starten

Når du trykker tilbage fra en fane, bør du vende tilbage til startfanen i stedet for at gå gennem alle de faner, du har besøgt. popUpTo startdestinationen løser det.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Farvelæg den aktive fane

NavigationBarItem farvelægger automatisk det valgte element, men du kan tilpasse det med colors, så den aktive fane passer til dit brand.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Synlighed af etiketter

Brug alwaysShowLabel til at bestemme, om ikke-valgte faner stadig skal vise tekst. Kun at vise etiketten for den aktive fane er et almindeligt, enkelt udtryk.

alwaysShowLabel = false

Én reaktiv løkke

Saml det hele: læs ruten én gang, og sammenlign derefter hver fane med den i din forEach. Markeringen afspejler nu navigationen perfekt.

Hurtigt tjek

Du har koblet markeringen til tilbage-stakken. Ét hurtigt spørgsmål.

Besvar den i den interaktive lektion

Opsummering

Du har synkroniseret fremhævningen med tilbage-stakken: læs den aktuelle rute, sammenlign pr. fane, og navigér med launchSingleTop og popUpTo. Markeringen er nu retvisende. 🎯

Gratis at komme i gang

Lær Kotlin med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Fremhævning af den valgte route” gratis?

Ja — hele teksten til “Fremhævning af den valgte route” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Fremhævning af den valgte route”?

Synkronisér valget med back stack. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Jetpack Compose Academy?

Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Fremhævning af den valgte route”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?

Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Jetpack Compose Academy