如何在Jetpack Compose中实现带半透明背景的圆角Button

问题原因 #

Jetpack Compose Material 库的 Button 组件默认自带 elevation（高度/阴影）效果，使用半透明背景时，底层阴影会透出半透明层，最终呈现出按钮区域颜色不均的效果。

解决方案 #

关闭 Button 所有交互状态下的 elevation 即可，同时 Button 原生支持 shape 配置，无需额外通过 Modifier.clip() 裁剪，修改后代码如下：

MaterialTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Yellow
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Button(
                // 直接配置Button的shape属性即可实现圆角
                shape = CircleShape,
                onClick = { },
                // 关闭所有状态下的阴影高度
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 0.dp,
                    pressedElevation = 0.dp,
                    disabledElevation = 0.dp,
                    hoveredElevation = 0.dp,
                    focusedElevation = 0.dp
                ),
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
            ) {
                Text(
                    text = "My Button",
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

如果你使用的是 Material3 版本，对应参数需要做如下调整：

// Material3 版本适配
colors = ButtonDefaults.buttonColors(containerColor = Color.White.copy(alpha = 0.5f)),
elevation = ButtonDefaults.buttonElevation(
    defaultElevation = 0.dp,
    pressedElevation = 0.dp,
    disabledElevation = 0.dp,
    hoveredElevation = 0.dp,
    focusedElevation = 0.dp
)

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