Android 中滑动时触发点击手势

Question

我正在开发一个使用动画角色的应用程序，当用户点击它时会触发不同的动画，而当用户在其上滑动时会触发另一个动画。问题是视图将滑动手势注册为点击，如下所示。

这是处理指针输入的代码：

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  // Initial animation resource ID
    val tapAnimation = R.raw.cat_headshake          // Tap specific animation resource ID
    val swipeAnimation = R.raw.cat_heart      // Swipe specific animation resource 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()  // Remember a CoroutineScope tied to the Composable's lifecycle

    LottieAnimation(
        composition = if (animationRes == initialAnimation) idleAnimationComposition else if (animationRes == tapAnimation) tapAnimationComposition else swipeAnimationComposition,  // Choose based on animationRe
        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
                    }
                }
            }
    )
}

Answer 1

查看官方文档：

在内部，

detectTapGestures

方法会阻塞协程，并且永远不会到达第二个检测器。如果您需要向可组合项添加多个手势侦听器，请改用单独的pointerInput 修饰符实例。

请按如下方式更新您的代码：

modifier = Modifier
    .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(onTap = {
                coroutineScope.launch {
                    animationRes = tapAnimation
                    delay(5000)
                    animationRes = initialAnimation
                }
            })
        }
        .pointerInput(Unit) {
            detectDragGestures { _, _ ->
                coroutineScope.launch {
                    animationRes = swipeAnimation
                    delay(5000)
                    animationRes = initialAnimation
                }
            }
        }