Compose按钮设置半透明背景时内部出现异常方块

问题原因 #

Compose的Button组件内部默认包含状态层（如按压、悬停效果）、elevation阴影绘制逻辑，当设置半透明背景色时，这些内部绘制层与自定义背景叠加，容易出现异色方块异常。

解决方案 #

方案1：自定义Button替代默认组件（推荐）

完全通过Box+clickable实现按钮，避开默认Button的内部绘制冲突：

@Preview(showBackground = true)
@Composable
fun NextButtonPreview() {
    Box(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .height(60.dp)
            .background(
                color = colorPrimaryDarkHalfOpactiy,
                shape = RoundedCornerShape(8.dp)
            )
            .border(
                width = 2.dp,
                color = colorPrimaryDark,
                shape = RoundedCornerShape(8.dp)
            )
            .clickable(
                onClick = {},
                enabled = true,
                indication = rememberRipple(color = colorPrimary) // 自定义涟漪效果
            )
            .testTag(GENERIC_NEXT_BUTTON_TEST_TAG),
        contentAlignment = Alignment.Center
    ) {
        // 放置按钮文本或图标内容
    }
}

方案2：修复默认Button的绘制冲突

如果坚持使用默认Button组件，尝试以下调整：

1. 排查elevation影响：移除或自定义阴影颜色，避免与半透明背景叠加

elevation = ButtonDefaults.elevation(
    defaultElevation = 8.dp,
    pressedElevation = 8.dp,
    disabledElevation = 0.dp,
    shadowColor = colorPrimaryDark.copy(alpha = 0.2f) // 降低阴影透明度
)

2. 消除内部留白异常：设置contentPadding = PaddingValues(0.dp)，避免内部留白区域与背景叠加产生异色
3. 检查颜色定义：确保半透明颜色是直接在色值中设置alpha通道（如Color(0x80FF9800)，其中0x80对应50%透明度），而非通过color.copy(alpha = 0.5f)（部分场景下会触发叠加绘制问题）

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