在 Jetpack Compose 中向自定义手势添加波纹效果

Question

我尝试在 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合适，因为它只处理按下输入，但不处理点击。

Answer 1

您可以使用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
            })
        }
) {
}