android 修改Jetpack合成中IconButton的涟漪颜色

3mpgtkmj  于 2023-02-17  发布在  Android
关注(0)|答案(4)|浏览(164)

如何更改IconButton的涟漪颜色?
我试过这么做,但没什么变化:

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

2wnc66cl1#

我不知道你是否找到了一种方法让它适用于整个应用程序,但我找到了一种方法,所以我发布这个以防其他人有类似的问题。
您可以按照Gabriele Mariotti's answer所述设置自定义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值冲突。

htrmnn0y

htrmnn0y2#

由于Ripple是在IconButton内部定义的.clickable修饰符中实现的,因此您的代码不起作用。
Ripple的外观基于RippleTheme,您可以定义自定义RippleTheme,并使用**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, "")
    }
}

第一节第一节第一节第一节第一次

dw1jzc5e

dw1jzc5e3#

现在说有点晚了,但也许这段代码会对某些人有所帮助。
要使代码正常工作,还需要将interactionSource应用于按钮本身。
你可以用这种方法局部改变颜色。调用指示后应用高度是很重要的,这样可以保持正确的按钮和涟漪尺寸。
此外,您需要应用任意大小的半径,以便将半径包含在按钮形状的内部(这似乎是Compose1.2.0-rc 03中的一个bug。

val interactionSource = remember { MutableInteractionSource() }
val rippleColor = Color.RED
val shape = RoundedCornerShape(size = 16.dp)

Button(
    modifier = Modifier
        .clip(shape = shape)
        .indication(
            interactionSource = interactionSource,
            indication = rememberRipple(
                color = rippleColor,
                radius = 8.dp
            )
        )
        .height(height = 40.dp),
    shape = shape,
    interactionSource = interactionSource,
)
9lowa7mx

9lowa7mx4#

如果只需要覆盖某个位置的涟漪颜色,可以为其创建自己的修改器。

fun Modifier.clickable(
    rippleColor: Color? = null,
    onClick: () -> Unit
) = composed(
    inspectorInfo = debugInspectorInfo {
        name = "clickable"
        properties["rippleColor"] = rippleColor
        properties["onClick"] = onClick
    }
) {
    Modifier.clickable(
        onClick = onClick,
        indication = rippleColor?.let {
            rememberRipple(
                color = it
            )
        } ?: LocalIndication.current,
        interactionSource = remember { MutableInteractionSource() }
    )
}

相关问题