將 RecyclerView 遷移至 Lazy 清單

RecyclerView 是 View 元件，可讓您輕鬆有效率地顯示 龐大的資料集您不必為資料集中的每個項目建立資料檢視， RecyclerView 可讓您縮減一小部分數量，藉此提升應用程式效能 並回收這些事件

在 Compose 中，您可以使用 Lazy 清單完成相同動作。這個頁面 說明如何遷移 RecyclerView 實作以使用 Lazy 清單 。

遷移步驟

如要將 RecyclerView 實作遷移至 Compose，請按照下列步驟操作：

  1. 從 UI 階層中對 RecyclerView 加註或移除，並加入 如果階層中仍未顯示任何資訊，可使用 ComposeView 替換。這個 是您要新增的 Lazy 清單容器：

          <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

  <!--    <androidx.recyclerview.widget.RecyclerView-->
  <!--            android:id="@+id/recycler_view"-->
  <!--            android:layout_width="match_parent"-->
  <!--            android:layout_height="match_parent />"-->

          <androidx.compose.ui.platform.ComposeView
              android:id="@+id/compose_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

      </FrameLayout>

  2. 依據下列項目判斷需要哪種 Lazy 清單可組合項類型 RecyclerView 的版面配置管理工具 (請參閱下表)。您選取的可組合函式 您將是此處新增的 ComposeView 的頂層可組合函式 上一個步驟

    LayoutManager

    可組合項目

    LinearLayoutManager

    LazyColumn 或 LazyRow

    GridLayoutManager

    LazyVerticalGrid 或 LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid 或 LazyHorizontalStaggeredGrid

    		 

    // recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}
    MigrationCommonScenariosSnippets.kt

  3. 為每個檢視畫面類型建立對應的可組合函式 RecyclerView.Adapter 實作。每種檢視畫面類型通常會對應至 ViewHolder 子類別，但並非一律如此。這些 可組合函式將用來做為不同類型的 UI 表示法 清單中的元素：

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    RecyclerView.Adapter 的 onCreateViewHolder() 和 這些可組合項將取代 onBindViewHolder() 方法 常態性程序在 Compose 中， 建立項目的可組合項並將資料繫結至該項目，這些概念 以漸進方式處理

  4. 在 Lazy 清單的 content 位置 (結尾的 lambda 參數) 中 使用 items() 函式 (或同等的超載) 反覆執行 然後建立一份清單在 itemContent lambda 中，叫用適當的 可組合資料項目：

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

，瞭解如何調查及移除這項存取權。

常見用途

商品裝飾

RecyclerView 具備 ItemDecoration 的概念，可用來新增 系統特別為清單中的項目繪製出特別的繪圖舉例來說，您可以將 ItemDecoration 可在項目之間加入分隔線：

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose 沒有關於項目裝飾的對等概念。而是 可以直接在組合中將任何 UI 裝飾加入清單中。例如： 如要在清單中新增分隔線，您可以逐一呼叫每個分隔線後面使用 Divider 可組合函式。 項目：

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            Divider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

項目動畫

您可以在 RecyclerView 上設定 ItemAnimator，以動畫方式呈現 項目。根據預設，RecyclerView 會使用 DefaultItemAnimator，提供移除、新增和移除基本動畫 移動事件。

Lazy 清單透過 animateItemPlacement 修飾符具有相同的概念。 詳情請參閱「項目動畫」。

其他資源

如要進一步瞭解如何將 RecyclerView 遷移至 Compose，請參閱 下列資源：