如何在Jetpack Compose中创建带上下微圆角的自定义形状按钮？

根据你需要的效果，分两种常见实现方式：

方式一：四个角（顶部/底部左右）带轻微圆角 #

这是最常用的场景，直接使用Compose内置的RoundedCornerShape即可快速实现，只需设置统一的圆角大小来控制“轻微”程度：

Button(
    onClick = { /* 这里添加点击逻辑 */ },
    shape = RoundedCornerShape(8.dp), // 数值越小，圆角越轻微
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF2196F3))
) {
    Text(text = "自定义圆角按钮", color = Color.White)
}

如果需要顶部和底部的圆角大小不同，也可以单独设置：

shape = RoundedCornerShape(
    topStart = 8.dp, topEnd = 8.dp,
    bottomStart = 6.dp, bottomEnd = 6.dp
)

方式二：上下边缘整体弧形（左右直边） #

如果你的需求是按钮左右保持直边，仅顶部和底部边缘呈现弧形圆角，需要自定义Shape类来实现：

首先定义自定义Shape：

class TopBottomRoundedShape(private val cornerRadius: Dp) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val radius = with(density) { cornerRadius.toPx() }
        val path = Path().apply {
            // 起点：左上角圆角端点
            moveTo(0f, radius)
            // 绘制顶部弧形
            arcTo(
                rect = Rect(0f, 0f, size.width, radius * 2),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            // 绘制右侧直边
            lineTo(size.width, size.height - radius)
            // 绘制底部弧形
            arcTo(
                rect = Rect(0f, size.height - radius * 2, size.width, size.height),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            // 绘制左侧直边并闭合路径
            lineTo(0f, radius)
            close()
        }
        return Outline.Generic(path)
    }
}

然后在Button中使用这个自定义Shape：

Button(
    onClick = { /* 点击逻辑 */ },
    shape = TopBottomRoundedShape(16.dp),
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF2196F3))
) {
    Text(text = "上下弧形按钮", color = Color.White)
}

你可以根据实际效果调整cornerRadius的数值，来获得想要的“轻微圆角”效果。

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