What is the Jetpack Compose equivalent of RecyclerView or ListView?
Update in dev.16
- [ScrollableColumn] for vertically scrolling list
- [ScrollableRow] for horizontally scrolling list
Check it's implementation from ListCardViewTemplate
You can get the same essence of RecyclerView
or ListView
in JetpackCompose using AdapterList
that's renamed in dev.14 preview version.
[LazyColumnItems]
for vertically scrolling list[LazyRowItems]
for horizontally scrolling list
Check what's documentation says:
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
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
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.
The equivalent component to RecyclerView
or ListView
in Jetpack Compose is LazyColumn
for a vertical list and LazyRow
for a horizontal list. 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. 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
.