Jetpack Compose实现单侧开放圆角矩形边框并移除单元格间竖线

你用不同Shape处理首尾和中间单元格的思路没问题，现在单元格之间的竖线是因为每个单元格默认绘制了完整边框导致的。给你两个实用的解决办法：

方法1：精准控制每个单元格的边框绘制边 #

通过Modifier.border的drawBorder参数，指定每个单元格只绘制需要的边框边，避免中间竖线出现：

// 左侧圆角单元格
Modifier.border(
    border = BorderStroke(1.dp, Color.Gray),
    shape = RoundedCornerShape(topStartPercent = 50, bottomStartPercent = 50),
    drawBorder = { canvas, rect, paint ->
        // 只画左、上、下三条边
        drawBorder(canvas, rect, paint, edges = EdgeSet(left = true, top = true, bottom = true))
    }
)

// 中间单元格
Modifier.border(
    border = BorderStroke(1.dp, Color.Gray),
    shape = RectangleShape,
    drawBorder = { canvas, rect, paint ->
        // 只画上下两条边
        drawBorder(canvas, rect, paint, edges = EdgeSet(top = true, bottom = true))
    }
)

// 右侧圆角单元格
Modifier.border(
    border = BorderStroke(1.dp, Color.Gray),
    shape = RoundedCornerShape(topEndPercent = 50, bottomEndPercent = 50),
    drawBorder = { canvas, rect, paint ->
        // 只画右、上、下三条边
        drawBorder(canvas, rect, paint, edges = EdgeSet(right = true, top = true, bottom = true))
    }
)

方法2：整体绘制边框（更简洁） #

如果这些单元格是横向排列成一个整体，直接给外层容器加自定义边框，单元格内部不用单独加边框，从根源避免竖线问题：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(56.dp) // 根据你的需求调整高度
        .drawBehind {
            val borderWidth = 1.dp.toPx()
            // 50%圆角的半径等于容器高度的一半
            val cornerRadius = size.height / 2
            // 绘制单侧圆角的完整边框（如果要单侧开放，比如只左圆角，把topEnd和bottomEnd设为0f即可）
            drawRoundRect(
                color = Color.Gray,
                topLeft = Offset(borderWidth / 2, borderWidth / 2),
                size = Size(size.width - borderWidth, size.height - borderWidth),
                cornerRadius = CornerRadius(cornerRadius, cornerRadius),
                style = Stroke(width = borderWidth)
            )
        }
) {
    // 这里放置你的单元格组件，无需额外加边框
    Text("单元格1", modifier = Modifier.weight(1f).wrapContentHeight())
    Text("单元格2", modifier = Modifier.weight(1f).wrapContentHeight())
    Text("单元格3", modifier = Modifier.weight(1f).wrapContentHeight())
}

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