Jetpack Compose Academy · Pelajaran

Mempertahankan State Tab saat Beralih

Pertahankan guliran dan state setiap tab.

Mempertahankan State Tab saat Beralih adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mempertahankan State Tab saat Beralih” gratis?

Ya — teks lengkap “Mempertahankan State Tab saat Beralih” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mempertahankan State Tab saat Beralih”?

Pertahankan guliran dan state setiap tab. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mempertahankan State Tab saat Beralih” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy