Android Compose中如何为按钮底部添加曲线边框？

你的问题出在原代码中圆弧的位置计算错误，以及线条和圆弧的衔接方式不对，导致底部角落出现尖锐角。下面是修正后的实现方案：

问题分析 #

原代码的drawArc参数设置不准确，圆弧的topLeft和size没有和按钮的圆角半径、边框宽度正确对齐，加上使用了StrokeCap.Round，反而导致衔接处出现异常，无法匹配设计图的圆角效果。

修正后的Modifier实现 #

使用Path来组合左圆角弧、底部直线和右圆角弧，确保各部分无缝衔接，同时考虑边框宽度的偏移量，避免边框超出按钮范围：

fun Modifier.bottomBorder(strokeWidth: Dp, color: Color, cornerRadiusDp: Dp) = composed(
    factory = {
        val density = LocalDensity.current
        val strokeWidthPx = density.run { strokeWidth.toPx() }
        val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }
        val halfStroke = strokeWidthPx / 2

        Modifier.drawBehind {
            val width = size.width
            val height = size.height

            val borderPath = Path().apply {
                // 绘制左下角圆角弧
                arcTo(
                    rect = Rect(
                        left = halfStroke,
                        top = height - cornerRadiusPx * 2 - halfStroke,
                        right = cornerRadiusPx * 2 + halfStroke,
                        bottom = height - halfStroke
                    ),
                    startAngleDegrees = 90f,
                    sweepAngleDegrees = 90f,
                    forceMoveTo = false
                )
                // 绘制底部直线
                lineTo(width - cornerRadiusPx - halfStroke, height - halfStroke)
                // 绘制右下角圆角弧
                arcTo(
                    rect = Rect(
                        left = width - cornerRadiusPx * 2 - halfStroke,
                        top = height - cornerRadiusPx * 2 - halfStroke,
                        right = width - halfStroke,
                        bottom = height - halfStroke
                    ),
                    startAngleDegrees = 180f,
                    sweepAngleDegrees = 90f,
                    forceMoveTo = false
                )
            }

            drawPath(
                path = borderPath,
                color = color,
                style = Stroke(width = strokeWidthPx)
            )
        }
    }
)

关键调整说明 #

1. 路径组合：用Path连贯绘制圆弧和直线，确保衔接处没有断点，彻底解决尖锐角问题。
2. 边框偏移量：通过halfStroke调整路径位置，让边框居中绘制，避免超出按钮的圆角范围。
3. 圆弧参数：精确设置arcTo的rect参数，让圆弧的半径和按钮的圆角半径完全匹配，和设计图一致。

使用示例 #

将该Modifier和按钮的阴影、背景结合使用，还原设计效果：

Button(
    onClick = {},
    modifier = Modifier
        .shadow(elevation = 4.dp, shape = RoundedCornerShape(8.dp))
        .bottomBorder(strokeWidth = 2.dp, color = Color(0xFF333333), cornerRadiusDp = 8.dp),
    colors = ButtonDefaults.buttonColors(containerColor = Color.White),
    shape = RoundedCornerShape(8.dp),
    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp)
) {
    Text(text = "Button", fontSize = 16.sp, color = Color(0xFF333333))
}

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