将 RecyclerView 迁移到延迟列表

RecyclerView 是一个 View 组件，可让您轻松高效地显示 大型数据集。您无需为数据集中的每个项目创建视图， RecyclerView 可通过保留一个小池 并且在您滚动浏览这些项目时再循环浏览这些项目。

在 Compose 中，您可以使用延迟列表来完成相同的操作。当前页面 介绍了如何迁移 RecyclerView 实现以使用延迟列表 。

迁移步骤

如需将 RecyclerView 实现迁移到 Compose，请按以下步骤操作：

  1. 注释掉或移除RecyclerView界面层次结构中的 ，然后添加一个 如果层次结构中还没有任何样式，则使用 ComposeView 进行替换。本次 是您要添加的延迟列表的容器：

          <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. 根据 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 子类，但不一定总是如此。这些 可组合项将用作不同类型 元素：

    @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. 在延迟列表（尾随 lambda 形参）的 content 槽中， 使用 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 没有与商品装饰等效的概念。相反， 可以直接在组合中添加列表中的任何界面装饰。例如： 要向列表中添加分隔线，您可以在每项内容后使用 Divider 可组合项 商品：

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

项动画

可以在 RecyclerView 上设置 ItemAnimator，以便为 在适配器发生更改时更新项。默认情况下，RecyclerView 会使用 DefaultItemAnimator，用于在移除、添加和添加操作时提供基本动画 移动事件。

延迟列表通过 animateItemPlacement 修饰符有类似的概念。 如需了解详情，请参阅项动画。

其他资源

如需详细了解如何将 RecyclerView 迁移到 Compose，请参阅 以下资源：