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

Question

我有一个类似于这样的LazyColumn：

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

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

- Cameron

Answer 1

目前还没有内置的方法来添加分隔线。但是，您可以在LazyListScope中添加一个Divider。

类似于：

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

如果您不想让最后一项后面跟随一个Divider，您可以根据它们的索引为项目添加分隔线。

如果您不希望最后一项后面跟随一个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)
    }
}

- Gabriele Mariotti

---

这是我的第一个想法，但我希望有一种更优雅/内置的方法来实现它。暂时，这个方法应该可以实现，谢谢！ - Cameron

提示：你可以使用 index < itemsList.lastIndex 代替 index < itemsList.size-1。 - or_dvir

或者Compose核心团队本应提供接受Composable的分隔符参数，而不是强制我们像这样做糟糕的解决方法。 - Farid

提示：在满足条件 index>0 的项目之前添加分隔符。 - undefined

Answer 2

简单：

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

- Wilson Tran

---

这样做会在最后一本书之后添加一个分隔符，不是吗？我认为提问者只想要它们在元素之间。 - Arthur Kasparian

在LazyColumn中，它在最后一个项目后添加了一行。 - undefined