Préserver l’état des onglets lors du changement
Conservez le défilement et l’état de chaque onglet.
Préserver l’état des onglets lors du changement est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
The Lost Scroll Problem
By default, leaving a tab and coming back rebuilds it from scratch, so your scroll position and inputs vanish. Annoying, right? 😅
Why It Happens
A plain navigate replaces the destination, so Compose forgets the old screen. Preserving state means telling navigation to save it instead.
Save on the Way Out
When you pop the old tab, add saveState so its UI state is stored rather than thrown away.
popUpTo(startRoute) {
saveState = true
}Restore on the Way In
When you navigate to the tab, set restoreState so its previously saved state comes right back.
navController.navigate(tab.route) {
restoreState = true
}The Three-Flag Combo
Together saveState, restoreState, and launchSingleTop give the classic, smooth tab-switching behavior users expect.
popUpTo(start) { saveState = true }
launchSingleTop = true
restoreState = truerememberSaveable Helps Too
For values inside a screen, rememberSaveable keeps things like text fields alive across recreation, complementing nav state saving.
var query by rememberSaveable { mutableStateOf("") }Lists Need Saved Scroll
A LazyColumn keeps its scroll when you use rememberLazyListState, and saved nav state lets that survive a tab round-trip.
val listState = rememberLazyListState()
LazyColumn(state = listState) { /* ... */ }Watch the Start Route
Always pop up to the same start destination id so the saved-state bundles map back to the correct tab.
popUpTo(navController.graph.findStartDestination().id)Verify by Switching
Test it: scroll one tab, jump to another, then return. With the flags set, the scroll should be exactly where you left it.
When Not to Restore
Sometimes a tab should refresh on entry, like a feed. Then simply skip restoreState for that route and let it rebuild.
State Beyond One Screen
For data that must outlive even the tab, lift it into a shared ViewModel so navigation flags only handle UI, not your real data.
Quick Check
You learned to keep each tab fresh. Time for a check.
Recap
You kept tabs sticky: saveState + restoreState + launchSingleTop preserve scroll and input, with rememberSaveable backing up in-screen values. Smooth! ✨
Questions Fréquemment Posées
La leçon « Préserver l’état des onglets lors du changement » est-elle gratuite ?
Oui — le texte complet de « Préserver l’état des onglets lors du changement » 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 « Préserver l’état des onglets lors du changement » ?
Conservez le défilement et l’état de chaque onglet. 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 3 sur 4.
Combien de temps prend la leçon « Préserver l’état des onglets lors du changement » ?
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
- NavigationBar avec plusieurs onglets
- Mettre en évidence la route sélectionnée
- Préserver l’état des onglets lors du changement
- TabRow et pages balayables