[英]What is the Jetpack Compose equivalent of RecyclerView or ListView?
In Jetpack Compose, how can I display a large list of data while laying out only the visible items, instead of composing and laying out every item on the initial layout pass?在 Jetpack Compose 中,如何在仅布置可见项目的同时显示大数据列表,而不是在初始布局过程中组合和布置每个项目? This would be similar to
RecyclerView
and ListView
in the View
toolkit.这类似于
View
工具包中的RecyclerView
和ListView
。
One could use a for
loop to place all of the components inside of a Column
in a VerticalScroller
, but this would result in dropped frames and poor performance on larger numbers of items.可以使用
for
循环将Column
内的所有组件放置在VerticalScroller
,但这会导致丢帧和大量项目的性能不佳。
Note: this is intended as a canonical self-answered question to pre-empt/handle similar questions注意:这是一个规范的自我回答问题,以抢先/处理类似的问题
The equivalent component to RecyclerView
or ListView
in Jetpack Compose is LazyColumn
for a vertical list and LazyRow
for a horizontal list.相当于成分
RecyclerView
或ListView
在Jetpack的撰写是LazyColumn
用于垂直列表和LazyRow
用于水平列表。 These compose and lay out only the currently visible items.它们仅组成和布置当前可见的项目。
You can use it by formatting your data as a list and passing it with a @Composable
callback that emits the UI for a given item in the list.您可以通过将数据格式化为列表并使用
@Composable
回调传递它来使用它,该回调为列表中的给定项目发出 UI。 For example:例如:
val myData = listOf("Hello,", "world!")
LazyColumn {
items(myData) { item ->
Text(text = item)
}
}
val myData = listOf("Hello,", "world!")
LazyRow {
items(myData) { item ->
Text(text = item)
}
}
You can also specify individual items one at a time:您还可以一次指定单个项目:
LazyColumn {
item {
Text("Hello,")
}
item {
Text("world!")
}
}
LazyRow {
item {
Text("Hello,")
}
item {
Text("world!")
}
}
There are also indexed variants, which provide the index in the collection in addition to the item itself:还有索引变体,除了提供项目本身之外,还提供集合中的索引:
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")
}
}
These APIs were, in previous releases, known as AdapterList
, LazyColumnItems
/ LazyRowItems
, and LazyColumnFor
/ LazyRowFor
.在以前的版本中,这些 API 被称为
AdapterList
、 LazyColumnItems
/ LazyRowItems
和LazyColumnFor
/ LazyRowFor
。
Update in dev.16
dev.16 中的更新
Check it's implementation from ListCardViewTemplate从ListCardViewTemplate检查它的实现
You can get the same essence of RecyclerView
or ListView
in JetpackCompose using AdapterList
that's renamed in dev.14 preview version.你可以得到相同的本质
RecyclerView
或ListView
使用JetpackCompose AdapterList
是在dev.14预览版改名。
[LazyColumnItems]
for vertically scrolling list [LazyColumnItems]
用于垂直滚动列表[LazyRowItems]
for horizontally scrolling list [LazyRowItems]
用于水平滚动列表Check what's documentation says:检查什么是文档说:
It was also moved into a
lazy
sub-package and split into two files.它也被移动到一个
lazy
子包中并分成两个文件。 Plus I renamed params:另外我重命名了参数:
- data -> items.
数据 -> 项目。 this seems to be more meaningful then just raw
data
这似乎比原始
data
更有意义- itemCallback -> itemContent.
itemCallback -> itemContent。 this is more meaningful and we generally don't use word callback in the lambda names, especially for composable lambdas
这更有意义,我们通常不会在 lambda 名称中使用单词回调,尤其是对于可组合的 lambda
Check how to use it:检查如何使用它:
@Composable
fun <T> LazyColumnItems(
items: List<T>,
modifier: Modifier = Modifier,
itemContent: @Composable (T) -> Unit
) {
LazyItems(items, modifier, itemContent, isVertical = true)
}
In .KT在.KT
LazyColumnItems(items = (0..50).toList()) { item ->
cardViewImplementer(item)
}
From my perspective
LazyColumnItem
orLazyRowItem
is not working properly if your item layout is complex because it's stuck the list as a comparison toVerticalScroller
working fine in this scenario.从我的角度来看,如果您的项目布局很复杂,则
LazyColumnItem
或LazyRowItem
无法正常工作,因为它卡在列表中,作为与VerticalScroller
在这种情况下工作正常的比较。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.