android - 在 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
) {
  ...
}

但是我想在点击期间产生链式 react 。我怎么能做到这一点？
默认按钮/表面 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
            })
        }
) {
}