在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() }

Surface(
    modifier = Modifier
        .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
            })
        }
) {
}

这篇关于在Jetpack Compose中为自定义手势添加涟漪效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！