Jetpack Compose 相當於 RecyclerView 或 ListView 是什么？

Question

在 Jetpack Compose 中，如何在僅布置可見項目的同時顯示大數據列表，而不是在初始布局過程中組合和布置每個項目？ 這類似於View工具包中的RecyclerView和ListView 。

可以使用for循環將Column內的所有組件放置在VerticalScroller ，但這會導致丟幀和大量項目的性能不佳。

---

^{注意：這是一個規范的自我回答問題，以搶先/處理類似的問題}

Answer 1

相當於成分RecyclerView或ListView在Jetpack的撰寫是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)
    }
}

您還可以一次指定單個項目：

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

dev.16 中的更新

• [ScrollableColumn] 用於垂直滾動列表
• [ScrollableRow] 用於水平滾動列表

從ListCardViewTemplate檢查它的實現

---

你可以得到相同的本質RecyclerView或ListView使用JetpackCompose AdapterList是在dev.14預覽版改名。

• [LazyColumnItems]用於垂直滾動列表
• [LazyRowItems]用於水平滾動列表

檢查什么是文檔說：

它也被移動到一個lazy子包中並分成兩個文件。 另外我重命名了參數：

1. 數據 -> 項目。 這似乎比原始data更有意義
2. itemCallback -> itemContent。 這更有意義，我們通常不會在 lambda 名稱中使用單詞回調，尤其是對於可組合的 lambda

檢查如何使用它：

@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)
 }

從我的角度來看，如果您的項目布局很復雜，則LazyColumnItem或LazyRowItem無法正常工作，因為它卡在列表中，作為與VerticalScroller在這種情況下工作正常的比較。