如何在Jetpack Compose中禁用Ripple效果时消除黑色阴影？

禁用Jetpack Compose中可点击组件的Ripple点击效果后，常遇到点击时仍出现黑色阴影的问题——这是因为默认的可点击修饰符或组件自带了按压时的elevation（阴影）反馈，仅移除Ripple无法消除阴影。以下是可行的解决方法：

针对Button组件 #

Button默认自带elevation样式，需同时禁用Ripple和清除按压时的阴影：

@Composable
fun NoRippleNoShadowButton() {
    val interactionSource = remember { MutableInteractionSource() }
    Button(
        onClick = { /* 执行点击逻辑 */ },
        interactionSource = interactionSource,
        indication = null, // 禁用Ripple波纹
        elevation = ButtonDefaults.buttonElevation(
            defaultElevation = 0.dp,
            pressedElevation = 0.dp // 清除按压时的阴影
        )
    ) {
        Text(text = "无波纹无阴影按钮")
    }
}

针对普通布局（如Box、Column等） #

普通可点击布局需通过clickable修饰符禁用Ripple，同时确保没有额外的按压背景/阴影设置：

@Composable
fun NoRippleNoShadowLayout() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null, // 禁用Ripple波纹
                onClick = { /* 执行点击逻辑 */ }
            )
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(text = "无波纹无阴影布局")
    }
}

关键注意点 #

• indication = null是彻底关闭Ripple效果的核心，但仅这一步无法消除组件自带的按压阴影；
• 对于自带elevation的组件（如Button、Card），必须显式将pressedElevation设为0dp，才能清除点击时的黑色阴影；
• 如果使用combinedClickable处理长按等多点击事件，同样需要设置indication = null并处理对应的elevation。

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