RecyclerView 或 ListView 的 Jetpack Compose 等价物是什么？

Question

在 Jetpack Compose 中，如何在仅对可见项目进行布局的同时显示大量数据，而不是在初始布局过程中对每个项目进行组合和布局？这类似于 View 工具包中的 RecyclerView 和 ListView。

可以使用 for 循环将 Column 中的所有组件放置在 VerticalScroller 中，但这会导致丢帧和较大数量的性能不佳项目数。

Answer 1

Jetpack Compose 中 RecyclerView 或 ListView 的等效组件是水平列表的 LazyColumn for a vertical list and LazyRow。这些仅构成和布置当前可见的项目。

您可以通过将数据格式化为列表并将其与 @Composable 回调一起传递来使用它，该回调会为列表中的给定项目发出 UI。例如：

val myData = listOf("Hello,", "world!")
LazyColumn {
    items(myData) { item ->
        Text(text = item)
    }
}

val myData = listOf("Hello,", "world!")
LazyRow { 
    items(myData) { item ->
        Text(text = item)
    }
}

您也可以一次指定一项：

LazyColumn {
    item {
        Text("Hello,")
    }
    item {
        Text("world!")
    }
}

LazyRow { 
    item {
        Text("Hello,")
    }
    item {
        Text("world!")
    }
}

还有索引变体，除了项目本身外，它还提供集合中的索引：

val myData = listOf("Hello,", "world!")
LazyColumn {
    itemsIndexed(myData) { index, item ->
        Text(text = "Item #$index is $item")
    }
}

val myData = listOf("Hello,", "world!")
LazyRow { 
    itemsIndexed(myData) { index, item ->
        Text(text = "Item #$index is $item")
    }
}

这些 API 在以前的版本中称为 AdapterList、LazyColumnItems/LazyRowItems 和 LazyColumnFor/LazyRowFor.

Answer 2

Update in dev.16

[ScrollableColumn] 用于垂直滚动列表
[ScrollableRow] 用于水平滚动列表

从 ListCardViewTemplate

检查它的实现

您可以使用在 dev.14 预览版中重命名的 AdapterList 在 JetpackCompose 中获得与 RecyclerView 或 ListView 相同的本质。

[LazyColumnItems] 垂直滚动列表
[LazyRowItems] 水平滚动列表

查看文档中的内容：

It was also moved into a lazy sub-package and split into two files. Plus I renamed params:

data -> items. this seems to be more meaningful then just raw data

itemCallback -> itemContent. this is more meaningful and we generally don't use word callback in the lambda names, especially for composable lambdas

查看使用方法：

@Composable
fun <T> LazyColumnItems(
  items: List<T>,
  modifier: Modifier = Modifier,
  itemContent: @Composable (T) -> Unit
) {
    LazyItems(items, modifier, itemContent, isVertical = true)
}

在.KT

LazyColumnItems(items = (0..50).toList()) { item ->
    cardViewImplementer(item)
 }

From my perspective LazyColumnItem or LazyRowItem is not working properly if your item layout is complex because it's stuck the list as a comparison to VerticalScroller working fine in this scenario.

RecyclerView 或 ListView 的 Jetpack Compose 等价物是什么？

What is the Jetpack Compose equivalent of RecyclerView or ListView?

android

kotlin

android-jetpack

androidx

android-jetpack-compose