Android中滑动操作误触发点击手势问题排查

我正在开发一款包含动画角色的应用，用户点击角色时触发摇头动画，滑动角色时触发爱心动画。但目前存在问题：滑动操作会被同时识别为点击操作，导致两种动画同时触发。

import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.tooling.preview.Preview
import com.airbnb.lottie.compose.*
import com.lumen.tomo.R
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun ChatView() {
    val initialAnimation = R.raw.cat_idle  // 初始动画资源ID
    val tapAnimation = R.raw.cat_headshake // 点击触发的动画资源ID
    val swipeAnimation = R.raw.cat_heart   // 滑动触发的动画资源ID

    var animationRes by remember { mutableIntStateOf(initialAnimation) }
    val idleAnimationComposition by rememberLottieComposition(LottieCompositionSpec.RawRes(initialAnimation))
    val tapAnimationComposition by rememberLottieComposition(LottieCompositionSpec.RawRes(tapAnimation))
    val swipeAnimationComposition by rememberLottieComposition(LottieCompositionSpec.RawRes(swipeAnimation))
    val coroutineScope = rememberCoroutineScope()  // 绑定Composable生命周期的协程作用域

    LottieAnimation(
        composition = when(animationRes) {
            initialAnimation -> idleAnimationComposition
            tapAnimation -> tapAnimationComposition
            else -> swipeAnimationComposition
        },
        iterations = LottieConstants.IterateForever,
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTapGestures(onTap = {
                    coroutineScope.launch {
                        animationRes = tapAnimation
                        delay(5000)
                        animationRes = initialAnimation
                    }
                })
                detectDragGestures { _, _ ->
                    coroutineScope.launch {
                        animationRes = swipeAnimation
                        delay(5000)
                        animationRes = initialAnimation
                    }
                }
            }
    )
}

问题根源在于detectTapGestures和detectDragGestures会并行接收指针事件，滑动时两个回调都会被触发。需要在同一个指针作用域内，通过判断触摸移动的距离来区分点击和滑动操作。

修改后的pointerInput代码如下：

.pointerInput(Unit) {
    awaitPointerEventScope {
        while (true) {
            // 等待首次按下事件
            val downEvent = awaitFirstDown()
            val startPos = downEvent.position
            // 等待触摸抬起事件
            val upEvent = awaitPointerEvent(PointerEventPass.Main)
            val endPos = upEvent.changes.first().position
            // 计算触摸移动的距离
            val moveDistance = startPos.minus(endPos).getDistance()
            // 设定阈值：小于10dp判定为点击，否则为滑动
            val tapThreshold = 10.dp.toPx()

            coroutineScope.launch {
                if (moveDistance < tapThreshold) {
                    animationRes = tapAnimation
                    delay(5000)
                    animationRes = initialAnimation
                } else {
                    animationRes = swipeAnimation
                    delay(5000)
                    animationRes = initialAnimation
                }
            }
        }
    }
}

说明 #

• 使用awaitPointerEventScope统一管理指针事件，确保同一时间只处理一种手势
• 通过计算触摸起始和结束位置的距离，区分点击和滑动操作
• 可根据需求调整tapThreshold的数值，优化手势识别的灵敏度

内容的提问来源于stack exchange，提问作者Dayem Saeed