Tab-State beim Wechsel bewahren
Bewahren Sie Scrollposition und State jedes Tabs.
Tab-State beim Wechsel bewahren ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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! ✨
Lerne Kotlin mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Tab-State beim Wechsel bewahren“ kostenlos?
Ja — der vollständige Text von „Tab-State beim Wechsel bewahren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Tab-State beim Wechsel bewahren“?
Bewahren Sie Scrollposition und State jedes Tabs. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Tab-State beim Wechsel bewahren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- NavigationBar mit mehreren Tabs
- Die ausgewählte Route hervorheben
- Tab-State beim Wechsel bewahren
- TabRow und wischbare Seiten