如何移除Jetpack Compose按钮涟漪效果并添加按压时的onSurface颜色

要实现你要的效果，不用纠结RippleAlpha的参数，直接从这几个关键点调整：

1. 直接禁用按钮的涟漪效果 #

给Button添加indication = null参数，这是最直接的方式，只针对当前按钮生效，不会影响其他组件的涟漪效果。

2. 配置按压时的背景色 #

通过ButtonDefaults.buttonColors设置按压状态的容器颜色，用Material主题的onSurface颜色配合半透明值，和默认按钮的按压视觉效果一致。

3. 联动按压状态的缩放效果 #

修改你的bounceClickEffect，利用Button自带的InteractionSource来监听按压状态，避免自己维护状态导致的不一致问题。

修改后的完整代码 #

// 调整缩放点击效果，基于Button的交互状态
fun Modifier.bounceClickEffect(interactionSource: InteractionSource) = composed {
    val isPressed = interactionSource.collectIsPressedAsState().value
    val scale by animateFloatAsState(if (isPressed) 0.98f else 1f, animationSpec = tween(100))

    this.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
}

// 使用示例
val interactionSource = remember { MutableInteractionSource() }
Button(
    modifier = Modifier
        .fillMaxWidth()
        .padding(4.dp)
        .bounceClickEffect(interactionSource),
    onClick = {},
    interactionSource = interactionSource,
    indication = null, // 禁用涟漪效果
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.surface, // 未按压时的背景色，对应你截图里的白色
        pressedContainerColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f), // 按压时的背景色，onSurface半透明
        contentColor = colorResource(id = R.color.black) // 文本颜色
    )
) {
    Text(
        text = "Sign up free",
        fontWeight = FontWeight.Bold,
        fontSize = 16.sp
    )
}

关键说明 #

• indication = null：彻底关闭按钮的涟漪反馈，比修改LocalRippleConfiguration更精准，不会影响页面上其他组件。
• pressedContainerColor：这里用onSurface.copy(alpha = 0.12f)是Material3默认按钮按压时的背景透明度，你可以根据需求调整alpha值，比如改成0.15f加深颜色。
• interactionSource：通过它获取按钮的按压状态，让缩放动画和按钮的点击状态完全同步，避免自己处理指针事件可能出现的冲突或状态不同步问题。

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