如何解决Jetpack Compose Surface 点击波纹不会根据其形状进行裁剪?
当我点击涟漪效应传播时,我有 3 个表面,可以在 gif 中看到,而没有考虑表面的形状。
创建于
@Composable
fun SurfaceClickPropagationExample() {
// Provides a Context that can be used by Android applications
val context = AmbientContext.current
// ? Offset moves a component in x and y axes which can be either positive or negative
// ?? When a component inside surface is offset from original position it gets clipped.
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clipToBounds()
.clickable(onClick = {})
) {
Surface(
modifier = Modifier
.preferredSize(150.dp)
.padding(12.dp)
.clickable(onClick = {
})
.clipToBounds(),elevation = 10.dp,shape = RoundedCornerShape(10.dp),color = (Color(0xFFFDD835))
) {
Surface(
modifier = Modifier
.preferredSize(80.dp)
.clipToBounds()
.offset(x = 50.dp,y = (-20).dp)
.clickable(onClick = {
}),elevation = 12.dp,shape = CircleShape,color = (Color(0xFF26C6DA))
) {
}
}
Surface(
modifier = Modifier
.preferredSize(110.dp)
.padding(12.dp)
.offset(x = 110.dp,y = 20.dp)
.clickable(onClick = {}),shape = CutCornerShape(10.dp),color = (Color(0xFFF4511E)),elevation = 8.dp
) {}
}
}
我添加了 Modifier.clipToBounds()
来检查它是否可以使用它,但无论有没有它都不起作用。
解决方法
撰写版本 1.0.0-beta08 的更新:
使用接受 onClick 的 Surface 新实验性重载。
@ExperimentalMaterialApi
@Composable
fun Surface(
onClick: () -> Unit,modifier: Modifier = Modifier,shape: Shape = RectangleShape,color: Color = MaterialTheme.colors.surface,contentColor: Color = contentColorFor(color),border: BorderStroke? = null,elevation: Dp = 0.dp,interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },indication: Indication? = LocalIndication.current,enabled: Boolean = true,onClickLabel: String? = null,role: Role? = null,content: () -> Unit
): @ExperimentalMaterialApi @Composable Unit
尝试在 Modifier.clickable
之前应用 Modifier.clip(shape: Shape)
。
在撰写中使用修饰符时,顺序很重要。首先出现的修饰符元素将首先被应用。 (documentation)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。