將 RecyclerView 遷移至 Lazy 清單

RecyclerView 是 View 元件，可輕鬆有效地顯示大型資料集。RecyclerView 不會為資料集中的每個項目建立檢視區塊，而是保留一小組檢視區塊，並在您捲動瀏覽這些項目時回收檢視區塊，藉此提升應用程式效能。

在 Compose 中，您可以使用延遲清單完成相同操作。本頁面說明如何遷移 RecyclerView 實作項目，改用 Compose 中的 Lazy 清單。

遷移步驟

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

  1. 從 UI 階層中註解掉或移除 RecyclerView，並新增 ComposeView 取代 (如果階層中尚未有 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) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

項目動畫

您可以在 RecyclerView 上設定 ItemAnimator，在轉接程式變更時，為項目外觀製作動畫。根據預設，RecyclerView 會使用 DefaultItemAnimator，在移除、新增和移動事件時提供基本動畫。

延遲清單透過 animateItemPlacement 修飾符提供類似概念。 詳情請參閱「項目動畫」。

其他資源

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