[英]No ripple effect in Jetpack Compose
There is no ripple effect when I click on MyBox()
I've added MyTheme(){} to main @Composable screen but it doesn't work.当我单击MyBox()
时没有涟漪效应我已将 MyTheme(){} 添加到主 @Composable 屏幕,但它不起作用。 Is something missing?有什么遗漏吗?
@Composable
private MyBox(onClickInvoked: () -> Unit) {
MyAppTheme(isSystemInDarkTheme()) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.onBackground)
.clickable(onClick = { onClickInvoked.invoke() })
.padding(horizontal = 10.dp, vertical = 15.dp)
) {
Text(
text = "My text",
modifier = Modifier
.align(Alignment.CenterStart)
.padding(end = 95.dp)
.wrapContentWidth()
.wrapContentHeight(),
color = MaterialTheme.colors.primary
)
Image(
painter = painterResource(R.drawable.icon),
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp)
.size(60.dp)
)
}
}
}
With compose 1.0.5, I see the default indication
after set clickable
is LocalIndication.current
.使用 compose 1.0.5,我看到设置clickable
后的默认indication
是LocalIndication.current
。 And LocalIndication.current
is PlatformRipple
.而LocalIndication.current
是PlatformRipple
。 Therefore, after you set clickable
to your Box
, it will have ripple effect.因此,将clickable
设置为Box
后,它会产生连锁反应。
In your case, I think the ripple effect won't display because your Box background is too dark (normally MaterialTheme.colors.onBackground
is black on Light theme)在您的情况下,我认为不会显示波纹效果,因为您的 Box 背景太暗(通常MaterialTheme.colors.onBackground
在 Light 主题上是黑色的)
I think you can change the ripple effect color to make it easy to see.我认为您可以更改波纹效果颜色以使其易于查看。
Surface(
onClick = { onClickInvoked.invoke() },
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(10.dp),
color = MaterialTheme.colors.onBackground, // normally it is black on Light theme
indication = rememberRipple(color = Color.White) // color for your ripple, you can use other suitable MaterialTheme.colors for your case to support Light/Dark mode
) {
Box(modifier = Modifier.padding(horizontal = 10.dp, vertical = 15.dp)) {
// your Box content
...
}
}
There is a Modifier.indication
but after testing I see it not working with Modifier.clickable
so I use Surface
有一个Modifier.indication
但测试后我发现它不能与Modifier.clickable
一起使用,所以我使用Surface
I don't really know if there is a problem with your theme.我真的不知道你的主题是否有问题。 I try to pass the material theme, and the ripples will display normally我尝试通过材质主题,涟漪会正常显示
MaterialTheme() {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.secondary)
.clickable(onClick = { t = "My text" })
.padding(horizontal = 10.dp, vertical = 15.dp)
) {
Text(
text = t,
modifier = Modifier
.align(Alignment.CenterStart)
.padding(end = 95.dp)
.wrapContentWidth()
.wrapContentHeight(),
color = MaterialTheme.colors.primary
)
Image(
painter = painterResource(R.drawable.ic_launcher_foreground),
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp)
.size(60.dp),
contentDescription = ""
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.