0Pricing
Jetpack Compose Academy · Урок

Сохранение состояния вкладок при переключении

Сохраняйте прокрутку и состояние каждой вкладки.

«Сохранение состояния вкладок при переключении» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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 = true

rememberSaveable 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! ✨

Часто задаваемые вопросы

Урок «Сохранение состояния вкладок при переключении» бесплатный?

Да — полный текст урока «Сохранение состояния вкладок при переключении» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение состояния вкладок при переключении»?

Сохраняйте прокрутку и состояние каждой вкладки. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Сохранение состояния вкладок при переключении»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. NavigationBar с несколькими вкладками
  2. Выделение выбранного маршрута
  3. Сохранение состояния вкладок при переключении
  4. TabRow и страницы с перелистыванием
← Назад к Jetpack Compose Academy