清單狀態管理

三顆星評等圖示

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") }
        )
    }
}

結果

現在可捲動的清單可以還原捲動位置，以及清單中各項目的狀態。

其他資源