リストの状態管理

3 つ星の評価アイコン

Jetpack Compose のスクロール可能なリスト（LazyColumn や LazyRow など）は、 大量のデータを効率的に表示できます。ただし、デバイスの回転や折りたたみ式デバイスの折りたたみ/展開などの構成変更により、リストの状態がリセットされ、ユーザーが以前の位置に再びスクロールしなければならない場合があります。

ベスト プラクティス

スクロール可能なリストは、シームレスなユーザー エクスペリエンスを提供するために、すべての構成変更において、状態（特にスクロール位置）と個々のリスト要素（テキスト入力など）の状態を維持する必要があります。

材料

  • rememberLazyListState(): リストのスクロール位置を制御および監視するために使用される LazyListState を作成して記憶します。構成変更後も自動的に保持されます。
  • rememberSaveable: 構成変更後も状態値を記憶します。個々のリスト要素の状態（テキスト フィールドの入力など）を保持する場合に便利です。

手順

Jetpack Compose では、スクロール状態を使用すると、リストのスクロール位置の保持が自動的に処理されます。個々の複雑なリスト要素（TextField の入力など）の状態を保持するには、rememberSaveable を使用します。

1. リストのスクロール状態を保持する

構成変更後もリストのスクロール位置を保存して復元するには、LazyListState を使用して rememberLazyListState() を作成し、LazyColumn などのスクロール可能なリストの state パラメータとして渡します。

スクロール位置は Compose によって自動的に保持されます。

2. 個々のリスト要素の状態を保持する

リストにステートフルな要素（テキスト フィールドを含むアイテムなど）が含まれている場合、それらの個々の要素の状態は、画面外にスクロールしてリサイクルされたときや、構成変更時に失われる可能性があります。

個々の要素の状態を保持するには、リストアイテム スコープ内で rememberSaveable を使用します。これにより、アイテムが再構成されたときや、スクロールして再び表示されたときに、その状態が復元されます。

スクロール状態とアイテム状態の両方の復元を示す、コンパイル可能な完全な実装を次に示します。

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

結果

スクロール可能なリストは、スクロール位置とリスト内のすべての要素の状態を復元できるようになりました。

参考情報