如何在Jetpack Compose中移除Button按钮的点击水波纹效果

Material 风格的 Button 默认自带的水波纹点击效果属于系统提供的 indication 指示效果，你可以通过以下两种方式移除，全程保留必填的 onClick 参数，不影响点击事件触发：

方案1：单按钮修改（最简便） #

直接在 Button 的 Modifier 中配置 indication 为 null，搭配你已传入的 interactionSource 即可生效，修改后的代码如下：

@Composable
fun MyButton() {
    Button(
        shape = RoundedCornerShape(4.dp),
        enabled = isEnabled,
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            disabledBackgroundColor = getButtonDisableColor(style.styleMode),
            backgroundColor = getButtonColor(isPressed, style.styleMode)
        ),
        border = getButtonBorderColor(isEnabled, isPressed, style.styleMode),
        modifier = Modifier
            .fillMaxWidth()
            .height(style.buttonHeight)
            .padding(4.dp)
            // 新增这行即可移除水波纹
            .indication(interactionSource, null),
        onClick = onClick
    ) {
        Text(text = "content", fontSize = 16.sp, style = TextStyle(), color = Color.Red)
    }
}

注意：原代码中Text的fontSize单位错误，应该是sp而非dp，上面示例已同步修正。

方案2：批量修改多按钮 #

如果你需要给多个按钮统一移除水波纹效果，可以自定义透明的RippleTheme，在父布局层级覆盖全局配置：

// 自定义无波纹主题
private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0f, 0f, 0f, 0f)
}

// 使用时在父布局包裹即可
@Composable
fun ParentScreen() {
    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
        // 内部所有Button都不会出现水波纹
        MyButton()
        OtherButton()
    }
}

内容的提问来源于stack exchange，提问作者Shin Dong Hwi