リストの状態管理

3 つ星評価のアイコン

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

ベスト プラクティス

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

材料

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

手順

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

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

構成変更時にリストのスクロール位置を保存して復元するには、rememberLazyListState() を使用して LazyListState を作成し、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") }
        )
    }
}

結果

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

参考情報