如何在 LazyColumn Jetpack Compose 中的项目之间添加分隔符？

Posted 2023-04-13

【中文标题】如何在 LazyColumn Jetpack Compose 中的项目之间添加分隔符？

【英文标题】：How to add dividers between items in a LazyColumn Jetpack Compose?

【发布时间】：2021-07-12 08:20:25

【问题描述】：

我有一个像这样的 LazyColumn：

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) 
    items(bookList)  book ->
        InProgressBookItem(book = book)
    

如何在列表中的每个项目之间添加一条线，类似于在旧的 RecyclerView 上使用项目装饰？

【参考方案1】：

目前，1.0.x 没有内置方法来添加分隔符。但是，您可以在LazyListScope 中添加Divider。

类似：

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) 
    items(itemsList)
        Text("Item at  $it")
        Divider(color = Color.Black)
    

如果您不希望最后一个项目后跟 Divider，您可以根据项目的索引为项目添加分隔符：

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) 
    itemsIndexed(itemsList)  index, item ->

        Text("Item at index $index is $item")

        if (index < itemsList.lastIndex)
            Divider(color = Color.Black, thickness = 1.dp)
    

【讨论】：

这是我的第一个想法，但我希望有一种更优雅/内置的方式来做到这一点。现在，这应该可以了，谢谢！

提示：你可以写index < itemsList.lastIndex而不是index < itemsList.size-1

【参考方案2】：

简单：

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) 
    items(bookList)  book ->
        InProgressBookItem(book = book)
        Divider(color = Color.Black, thickness = 1.dp)