Kotlin RecyclerView 或 ListView 的 Jetpack Compose 是什么

发布于03月20日

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

可以使用for循环将所有组件放置在VerticalScroller中的Column中，但这会导致帧丢失，并且在大量项目上性能不佳.

^{Note: this is intended as a canonical self-answered question to pre-empt/handle similar questions}

推荐答案

Jetpack Compose中RecyclerView或ListView的等效组件为LazyColumn(垂直列表)和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)
    }
}

You can also specify individual items one at a time:

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.

实用课程推荐