Jetpack Compose Academy · レッスン

切り替え時にタブの状態を保持する

各タブのスクロール位置と状態を保持します。

「切り替え時にタブの状態を保持する」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「切り替え時にタブの状態を保持する」で何を学びますか？

各タブのスクロール位置と状態を保持します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「切り替え時にタブの状態を保持する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る