如何使用Compose的createRippleModifierNode并实现全局应用？

一、基础用法 #

createRippleModifierNode 是Compose底层API，用于创建自定义涟漪效果的Modifier节点，需配合Modifier.node()绑定到组件上，示例代码：

@Composable
fun CustomRippleButton() {
    val rippleNode = remember {
        createRippleModifierNode(
            rippleColor = Color(0xFF6200EE),
            bounded = true, // 限制涟漪在组件边界内
            radius = Dp.Unspecified // 自动适配组件尺寸
        )
    }
    Button(
        onClick = {},
        modifier = Modifier.node(rippleNode)
    ) {
        Text("自定义涟漪按钮")
    }
}

二、全局应用方案 #

直接在根视图添加该节点无效，因为它是针对单个组件的Modifier节点，无法自动传递给子组件。要实现全局生效，需结合Compose主题系统与LocalIndication替换默认涟漪指示器：

1. 封装自定义全局涟漪指示器 #

基于createRippleModifierNode实现自定义Indication类：

class GlobalCustomRipple(private val rippleColor: Color) : Indication {
    @Composable
    override fun rememberUpdatedInstance(): IndicationInstance {
        return remember(rippleColor) {
            object : IndicationInstance {
                override fun createModifierNode(): ModifierNode {
                    return createRippleModifierNode(
                        rippleColor = rippleColor,
                        bounded = true,
                        radius = Dp.Unspecified
                    )
                }
            }
        }
    }
}

2. 在主题中覆盖默认LocalIndication #

在应用主题的content块内，用CompositionLocalProvider替换全局指示器：

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) DarkColorPalette else LightColorPalette
    val customRipple = remember { GlobalCustomRipple(colors.primary) }

    MaterialTheme(
        colorScheme = colors,
        typography = Typography,
        shapes = Shapes
    ) {
        CompositionLocalProvider(
            LocalIndication provides customRipple,
            content = content
        )
    }
}

此后所有依赖LocalIndication的组件（如Button、Card、ClickableText等）都会自动使用自定义涟漪效果，无需逐个配置。

三、注意事项 #

• createRippleModifierNode是底层API，优先用LocalIndication全局替换更符合Compose设计逻辑，仅需单独定制组件时直接使用该API。
• 需确保Compose版本在1.6.0及以上，该API是随Compose节点系统更新引入的。

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