![](/img/trans.png)
[英]Jetpack compose onClickLabel for Button and IconButton
[英]Modify ripple color of IconButton in Jetpack Compose
如何更改 IconButton 的波纹颜色?
我试过这样做,但它没有改变:
IconButton(
onClick = { onClick() },
modifier = Modifier.clickable(
onClick = { onClick() },
indication = rememberRipple(color = MyCustomTheme.colors.primary),
interactionSource = remember { MutableInteractionSource() },
)
)
我不知道您是否找到了使其适用于整个应用程序的方法,但我找到了一种方法。 所以我发布这个以防其他人有类似的问题。
您可以按照 Gabriele Mariotti 的回答所述设置自定义RippleTheme
object 然后您可以将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。 并且它不会与您可以直接设置给其他Composables
的其他类型的ComposableLocalProvider
值冲突。
目前( 1.0.0
)您的代码不起作用,因为 Ripple 是在 IconButton 内定义的.clickable
修饰符中IconButton
的。
涟漪的外观基于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, "")
}
}
有点晚了,但也许这段代码会对某人有所帮助。
要使您的代码正常工作,您还需要将interactionSource 应用于按钮本身。
您可以通过这种方式在本地更改颜色。 在调用指示后应用高度以保持正确的按钮和波纹尺寸非常重要。
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)
)
.height(height = 40.dp),
shape = shape,
interactionSource = interactionSource,
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.