修改 Jetpack Compose 中 IconButton 的波纹颜色

Question

如何更改 IconButton 的波纹颜色？

我试过这样做，但没有改变：

IconButton(
        onClick = { onClick() },
        modifier = Modifier.clickable(
          onClick = { onClick() },
          indication = rememberRipple(color = MyCustomTheme.colors.primary),
          interactionSource =  remember { MutableInteractionSource() },
        )
      )

Answer 1

目前（1.0.0）您的代码不起作用，因为 Ripple 是在 IconButton.

中定义的 .clickable 修饰符中实现的

涟漪的出现基于RippleTheme and you can define a custom RippleTheme and apply to your composable with the LocalRippleTheme。

类似于：

private object RippleCustomTheme: RippleTheme {

    //Your custom implementation...
    @Composable
    override fun defaultColor() =
        RippleTheme.defaultRippleColor(
            Color.Red, 
            lightTheme = true
        )

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleTheme.defaultRippleAlpha(
            Color.Black,
            lightTheme = true
        )
}

和：

CompositionLocalProvider(LocalRippleTheme provides  RippleCustomTheme) {
    IconButton(
        onClick = { },
    ) {
        Icon(Icons.Filled.Add, "")
    }
}

Answer 2

我不知道您是否找到了让它适用于整个应用程序的方法，但我找到了这样做的方法。所以我发布这个以防其他人有类似的问题。

您可以按照 Gabriele Mariotti 的回答所述设置自定义 RippleTheme 对象，然后您可以将 CompositionLocalProvider() 作为 MaterialTheme 中的内容传递。然后可以将应用 theme 中的内容设置为 CompositionalLocalProvider().

的内容

看这里：

private object JetNewsRippleTheme : RippleTheme {
    // Here you should return the ripple color you want
    // and not use the defaultRippleColor extension on RippleTheme.
    // Using that will override the ripple color set in DarkMode
    // or when you set light parameter to false
    @Composable
    override fun defaultColor(): Color = MaterialTheme.colors.primary

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleTheme.defaultRippleAlpha(
        Color.Black,
        lightTheme = !isSystemInDarkTheme()
    )
}

那么对于您的应用主题，它应该是：

@Composable
fun JetNewsTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        typography = JetNewsTypography,
        shapes = JetNewsShapes
    ) {
        CompositionLocalProvider(
            LocalRippleTheme provides JetNewsRippleTheme,
            content = content
        )
    }
}

此方法应该适用于整个应用程序，除非您明确将另一个 RippleTheme 直接设置为 AppTheme 层次结构下的可组合项。而且它不会与您可以直接设置为其他 Composables.

的其他类型的 ComposableLocalProvider 值冲突

修改 Jetpack Compose 中 IconButton 的波纹颜色

Modify ripple color of IconButton in Jetpack Compose

android

android-jetpack-compose

android-jetpack-compose-button