0Pricing
Jetpack Compose Academy · Leçon

Mettre en évidence la route sélectionnée

Synchronisez la sélection avec la pile de retour.

Mettre en évidence la route sélectionnée est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Selection Must Be Real

A tab should light up because of where the user actually is, not a value you set by hand. The back stack is your source of truth. 🧭

Read the Current Entry

Ask the NavController for the live currentBackStackEntryAsState. It updates automatically every time navigation changes.

val entry by navController.currentBackStackEntryAsState()

Get the Active Route

From that entry you read the active route string off its destination. That string tells you which tab is showing.

val route = entry?.destination?.route

Compare to Mark Selected

Now set each item selected by comparing the active route to that tab route. The match becomes the highlighted selected tab.

selected = route == tab.route

Hierarchy Beats Equality

For nested graphs, exact equality can miss. Checking the destination hierarchy marks a tab active even on its sub-screens.

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

Navigate on Tap

In onClick, call navController.navigate with the tab route to move there. The selection then follows the back stack on its own.

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

Avoid Stacking Copies

Tapping a tab repeatedly should not pile up screens. Use launchSingleTop so only one copy of a destination stays on top.

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

Pop to the Start

Pressing back from any tab should return to your home tab, not walk every tab you visited. popUpTo the start destination fixes that.

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

Tint the Active Tab

NavigationBarItem auto-tints the selected item, but you can theme it with colors so the active tab matches your brand.

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

Label Visibility

Use alwaysShowLabel to decide if unselected tabs still show text. Showing only the active label is a common clean look.

alwaysShowLabel = false

One Reactive Loop

Put it together: read the route once, then in your forEach compare each tab to it. Selection now mirrors navigation perfectly.

Quick Check

You wired selection to the back stack. One quick question.

Recap

You synced highlighting to the back stack: read the current route, compare per tab, navigate with launchSingleTop and popUpTo. Selection now stays honest. 🎯

Questions Fréquemment Posées

La leçon « Mettre en évidence la route sélectionnée » est-elle gratuite ?

Oui — le texte complet de « Mettre en évidence la route sélectionnée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mettre en évidence la route sélectionnée » ?

Synchronisez la sélection avec la pile de retour. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Mettre en évidence la route sélectionnée » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. NavigationBar avec plusieurs onglets
  2. Mettre en évidence la route sélectionnée
  3. Préserver l’état des onglets lors du changement
  4. TabRow et pages balayables
← Retour à Jetpack Compose Academy