Jetpack Compose：OutlinedButton边框边缘出现黑色异常问题

OutlinedButton的设计初衷是透明容器加描边，强制设置containerColor = Color.Black后，圆角边框的抗锯齿渲染会让容器黑色与白色边框产生颜色混合，进而出现边缘发黑的视觉问题——本质是组件默认的边框绘制逻辑和自定义容器颜色的冲突。

推荐两种可行的实现方式：

方式一：用基础Button组件替代（更适配需求） #

既然需要黑色背景加白色边框，直接用基础Button组件搭配边框设置，完全避开OutlinedButton的默认渲染逻辑：

@Composable
fun SaveButton() {
    Button(
        onClick = {},
        modifier = Modifier.padding(16.dp),
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Black,
            contentColor = Color.White,
            disabledContainerColor = Color.Transparent,
            disabledContentColor = Color.Gray
        ),
        border = BorderStroke(2.dp, Color.White)
    ) {
        Text(text = "Save")
    }
}

方式二：保留OutlinedButton，手动修正边框渲染 #

如果一定要用OutlinedButton，可通过Modifier.drawBehind手动绘制白色边框，覆盖默认边框，同时保留黑色容器：

@Composable
fun SaveButton() {
    OutlinedButton(
        onClick = {},
        modifier = Modifier
            .padding(16.dp)
            .drawBehind {
                // 手动绘制白色圆角边框
                drawRoundRect(
                    color = Color.White,
                    style = Stroke(width = 2.dp.toPx()),
                    cornerRadius = CornerRadius(50.dp.toPx())
                )
            },
        shape = RoundedCornerShape(50),
        border = BorderStroke(0.dp, Color.Transparent), // 隐藏默认边框
        colors = ButtonDefaults.outlinedButtonColors(
            contentColor = Color.White,
            disabledContentColor = Color.Gray,
            containerColor = Color.Black,
            disabledContainerColor = Color.Transparent,
        )
    ) {
        Text(text = "Save")
    }
}

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