如何在Jetpack Compose的LazyColumn中按需添加分隔符？

1. 实现可复用的分隔符组件 #

先定义通用的分隔符Composable，方便统一样式与复用：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp

@Composable
fun ListSeparator(
    modifier: Modifier = Modifier,
    color: Color = Color.Gray.copy(alpha = 0.3f),
    height: Dp = 1.dp
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(height)
            .background(color)
    )
}

2. 修改MessageList实现条件分隔符 #

通过itemsIndexed获取列表项索引，结合参数控制顶部/底部分隔符的显示：

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.runtime.Composable

@Composable
fun MessageList(
    messages: List<Message>,
    showTopBottomSeparators: Boolean = false
) {
    LazyColumn {
        // 顶部分隔符：仅当开启开关且列表非空时显示
        if (showTopBottomSeparators && messages.isNotEmpty()) {
            item { ListSeparator() }
        }

        itemsIndexed(messages) { index, message ->
            MessageRow(message)
            // 中间分隔符：非最后一项时显示
            if (index != messages.lastIndex) {
                ListSeparator()
            }
        }

        // 底部分隔符：仅当开启开关且列表非空时显示
        if (showTopBottomSeparators && messages.isNotEmpty()) {
            item { ListSeparator() }
        }
    }
}

使用示例 #

• 不显示顶部/底部分隔符：

MessageList(messages = yourMessageList)

• 显示顶部/底部分隔符：

MessageList(messages = yourMessageList, showTopBottomSeparators = true)

实现说明 #

• 用itemsIndexed替代items，通过索引判断是否为最后一项，避免列表末尾出现多余分隔符
• 新增showTopBottomSeparators参数，灵活切换两种显示场景
• 可复用的ListSeparator支持自定义颜色、高度和修饰符，便于全局统一调整样式

内容的提问来源于stack exchange，提问作者Compose Learner