将 RecyclerView 迁移到延迟列表

RecyclerView 是一个 View 组件,可让您轻松高效地显示大量数据。RecyclerView 不会为数据集中的每个项创建视图,而是会保持一个较小的视图池并在滚动浏览这些项时重复利用视图,从而提高应用性能。

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

迁移步骤

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

  1. 注释掉 RecyclerView 或从界面层次结构中移除 RecyclerView,如果层次结构中还没有 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

    LazyColumnLazyRow

    GridLayoutManager

    LazyVerticalGridLazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGridLazyHorizontalStaggeredGrid

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

  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`
        }
    }

    RecyclerView.AdapteronCreateViewHolder()onBindViewHolder() 方法中的逻辑将替换为这些可组合项以及您为其提供的状态。在 Compose 中,为项创建可组合项和将数据绑定到项之间没有分离,这些概念是合并的。

  4. 在延迟列表的 content 槽(尾随 lambda 参数)中,使用 items() 函数(或等效过载)遍历列表的数据。在 itemContent lambda 中,为您的数据调用相应的可组合项项:

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

常见用例

商品装饰

RecyclerView 具有 ItemDecoration 的概念,可用于为列表中的项添加特殊绘图。例如,您可以添加 ItemDecoration 来在内容之间添加分隔线:

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

Compose 没有与商品装饰等效的概念。您可以改为直接在组合中添加列表中的任何界面装饰。例如,如需向列表中添加分隔线,您可以在每项内容后使用 Divider 可组合项:

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

项动画

可以在 RecyclerView 上设置 ItemAnimator,以便在适配器发生更改时为项的外观添加动画效果。默认情况下,RecyclerView 使用 DefaultItemAnimator,它会提供关于移除、添加和移动事件的基本动画。

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

其他资源

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