Android Compose中如何为LazyColumn的items项添加圆角边框？

单个项独立添加圆角边框 #

这是最直接的方案，给每个items块内的布局（比如你的Row）通过Modifier设置边框和圆角即可。需要注意的是，Compose的border不会自动裁剪内容，所以要配合clip确保内容不超出圆角范围。

示例代码：

LazyColumn {
    items(10) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp) // 项之间的间距
                .border(
                    width = 1.dp,
                    color = Color.Gray,
                    shape = RoundedCornerShape(8.dp)
                )
                .clip(RoundedCornerShape(8.dp)) // 裁剪内容适配圆角
                .padding(16.dp) // 内容与边框的间距
        ) {
            Text("第1组第${it + 1}个项")
            // 你的其他内容
        }
    }

    items(5) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .border(
                    width = 1.dp,
                    color = Color.Blue,
                    shape = RoundedCornerShape(12.dp)
                )
                .clip(RoundedCornerShape(12.dp))
                .padding(16.dp)
        ) {
            Text("第2组第${it + 1}个项")
            // 你的其他内容
        }
    }
}

如果多个项的边框样式一致，可以封装成自定义Modifier简化代码：

fun Modifier.itemBorder(
    shape: Shape = RoundedCornerShape(8.dp),
    color: Color = Color.Gray,
    borderWidth: Dp = 1.dp
) = this
    .border(borderWidth, color, shape)
    .clip(shape)
    .padding(16.dp)

// 使用方式
Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)
        .itemBorder()
) {
    // 内容
}

给整个items块添加统一的圆角边框 #

如果需要把一个items块的所有项包裹在一个完整的圆角边框内（而非每个项单独边框），可以通过判断项的位置，给组内第一个项加顶部圆角、最后一个项加底部圆角，中间项只保留左右边框，避免重复线条。

示例代码：

val group1Count = 10
val group2Count = 5

LazyColumn {
    items(group1Count) { index ->
        val borderShape = when (index) {
            0 -> RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
            group1Count - 1 -> RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp)
            else -> RoundedCornerShape(0.dp)
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp)
                .border(1.dp, Color.Gray, borderShape)
                .padding(16.dp)
                // 中间项覆盖顶部重复边框，避免线条重叠
                .then(
                    if (index != 0) Modifier.drawBehind {
                        drawLine(
                            color = Color.White, // 用背景色覆盖
                            start = Offset(0f, 0.5.dp.toPx()),
                            end = Offset(size.width, 0.5.dp.toPx()),
                            strokeWidth = 1.dp.toPx()
                        )
                    } else Modifier
                )
        ) {
            Text("第1组第${index + 1}个项")
        }
    }

    items(group2Count) { index ->
        // 同理实现第二组的统一边框
        val borderShape = when (index) {
            0 -> RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
            group2Count - 1 -> RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp)
            else -> RoundedCornerShape(0.dp)
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp, vertical = 8.dp)
                .border(1.dp, Color.Blue, borderShape)
                .padding(16.dp)
                .then(
                    if (index != 0) Modifier.drawBehind {
                        drawLine(
                            color = Color.White,
                            start = Offset(0f, 0.5.dp.toPx()),
                            end = Offset(size.width, 0.5.dp.toPx()),
                            strokeWidth = 1.dp.toPx()
                        )
                    } else Modifier
                )
        ) {
            Text("第2组第${index + 1}个项")
        }
    }
}

内容的提问来源于stack exchange，提问作者Bakyt Abdrasulov