Conservar el estado de las pestañas al cambiar
Conserve el desplazamiento y el estado de cada pestaña.
Conservar el estado de las pestañas al cambiar es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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! ✨
Preguntas frecuentes
¿La lección «Conservar el estado de las pestañas al cambiar» es gratis?
Sí — el texto completo de «Conservar el estado de las pestañas al cambiar» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Conservar el estado de las pestañas al cambiar»?
Conserve el desplazamiento y el estado de cada pestaña. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Conservar el estado de las pestañas al cambiar»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- NavigationBar con varias pestañas
- Resaltar la ruta seleccionada
- Conservar el estado de las pestañas al cambiar
- TabRow y páginas deslizables