[英]Add ripple effect to a custom gesture in Jetpack Compose
我尝试在 Jetpack Compose 中创建一个可点击的表面,当用户点击表面时,高度会发生变化。 以下代码已经有效:
var tapped by remember { mutableStateOf(false) }
val elevation by animateDpAsState(
targetValue = if (tapped) 0.dp else 5.dp,
animationSpec = tween(50)
)
Surface(
shape = RoundedCornerShape(20.dp),
modifier = Modifier
.padding(16.dp)
.requiredSize(150.dp)
.pointerInput(Unit) {
detectTapGestures(onPress = {
tapped = true
tryAwaitRelease()
tapped = false
})
},
elevation = elevation
) {
...
}
但是,我希望在点击过程中产生涟漪效应。 我怎么能做到这一点?
默认的按钮/表面onClick
和clickable
不适合,因为它只处理按下输入而不处理点击。
您可以使用Modifier.indication
添加涟漪效果,并通过interactionSource
传递事件以更新它的状态,如下所示:
var tapped by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }
val elevation by animateDpAsState(
targetValue = if (tapped) 0.dp else 5.dp,
animationSpec = tween(50)
)
Surface(
shape = RoundedCornerShape(20.dp),
modifier = Modifier
.padding(16.dp)
.requiredSize(150.dp)
.indication(interactionSource, LocalIndication.current)
.pointerInput(Unit) {
detectTapGestures(onPress = { offset ->
tapped = true
val press = PressInteraction.Press(offset)
interactionSource.emit(press)
tryAwaitRelease()
interactionSource.emit(PressInteraction.Release(press))
tapped = false
})
},
elevation = elevation
) {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.