Jetpack Compose中点击按钮无法保持透明的问题

你设置了按钮的容器色为透明，但点击时出现的灰色是Material3 Button默认的按压涟漪效果，仅修改containerColor无法去除该效果，需要额外配置按钮的交互相关参数来处理。

以下是两种可行解决方案：

方案一：完全禁用按压反馈效果 #

通过设置indication = null和自定义interactionSource，彻底关闭按钮的按压交互视觉反馈：

Button(
    onClick = onStartQuiz,
    modifier = Modifier.size(buttonWidth, buttonHeight).align(Alignment.Center),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Transparent,
        contentColor = Color.White,
        disabledContainerColor = Color.Transparent,
        disabledContentColor = Color.White
    ),
    contentPadding = PaddingValues(0.dp),
    indication = null,
    interactionSource = remember { MutableInteractionSource() }
) {
    Text("Start Quiz")
}

方案二：保留交互逻辑但隐藏涟漪效果 #

如果需要保留按钮的交互状态监听，仅隐藏灰色涟漪，可以将涟漪颜色设为透明：

Button(
    onClick = onStartQuiz,
    modifier = Modifier.size(buttonWidth, buttonHeight).align(Alignment.Center),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Transparent,
        contentColor = Color.White,
        disabledContainerColor = Color.Transparent,
        disabledContentColor = Color.White
    ),
    contentPadding = PaddingValues(0.dp),
    indication = rememberRipple(color = Color.Transparent),
    interactionSource = remember { MutableInteractionSource() }
) {
    Text("Start Quiz")
}

注意事项 #

• 完全禁用按压反馈可能削弱用户对交互的感知，建议仅在明确不需要视觉反馈的场景使用；
• 方案二中的rememberRipple可通过调整radius等参数，实现更贴合需求的透明交互效果。

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