RecyclerView
是一个 View 组件,可让您轻松高效地显示大量数据。RecyclerView
会保留一小部分视图,并在您滚动浏览这些项时回收这些视图,而不是为数据集中的每个项创建视图,从而提升应用的性能。
在 Compose 中,您可以使用延迟列表来实现相同的操作。本页介绍了如何迁移 RecyclerView
实现,以便在 Compose 中使用延迟列表。
迁移步骤
如需将 RecyclerView
实现迁移到 Compose,请按以下步骤操作:
从界面层次结构中注释掉或移除
RecyclerView
,并添加ComposeView
来替换它(如果层次结构中尚无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>
根据
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 } }
在
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.Adapter
的onCreateViewHolder()
和onBindViewHolder()
方法中的逻辑将被这些可组合项和您为其提供的状态替换。在 Compose 中,为项创建可组合项和将数据绑定到项之间没有分离,这些概念是合并的。在延迟列表的
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) { HorizontalDivider() } } }
项动画
您可以在 RecyclerView
上设置 ItemAnimator
,以便在对适配器进行更改时为项添加动画效果。默认情况下,RecyclerView
使用 DefaultItemAnimator
,它会提供关于移除、添加和移动事件的基本动画。
延迟列表通过 animateItemPlacement
修饰符有类似的概念。如需了解详情,请参阅 Item 动画。
其他资源
如需详细了解如何将 RecyclerView
迁移到 Compose,请参阅以下资源:
- 列表和网格:介绍如何在 Compose 中实现列表和网格的文档。
- Jetpack Compose 互操作性:在 RecyclerView 中使用 Compose:介绍如何在
RecyclerView
中高效使用 Compose 的博文。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 列表和网格
- 将
CoordinatorLayout
迁移到 Compose - 其他注意事项