Jetpack：023-Jetpack中的事件二_android jetpack compose detecttapgestures-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/134130098

本文介绍了Jetpack库中如何在Compose中使用pointerInput修饰符处理单击、双击、长按和滑动等低级事件，通过detectTapGestures和detectDragGestures参数实现事件响应，并提供了示例代码和总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 知识回顾
2. 使用方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了 Jetpack中事件相关的内容，本章回中继续介绍这方面的内容。闲话休提，让我们一起Talk Android Jetpack吧！

1. 知识回顾

我们在上一章回中介绍了事件的概念，主要介绍的是高级事件，本章回中将介绍低级事件，与高级事件相比，低级事件的功能更别强大一些，比如可以获取到事件的坐标偏移值。

低级事件的分类和高级事件相同，也分为单击，双击，长按和滑动这几种。本章回中将介绍如何在程序中响应这些事件。

2. 使用方法

低级事件通过Modifier的pointerInput修饰符来响应，该修饰符中包含detectTapGestures和detectDragGestures两种参数，前者用来响应各种点击事件，后者用来响应滑动事件，接下来我们将依据事件的种类来介绍如何响应不同的事件。

2.1 单击事件

在compose中，单击事件通过detectTapGestures中的onPress和onTap参数来响应，其中onPress先触发,onTap后触发，它们类似View事件中的Event_Down和Event_Up事件，分别表示单击事件中的落下与弹起。我们将在稍后的小节中通过具体的代码来演示它们的用法。

2.2 双击事件

在compose中，双击事件通过detectTapGestures中的onDoubleTap参数来响应，它的用法类似Button中的onClick参数，我们将在稍后的小节中通过具体的代码来演示它的用法。

2.3 长按事件

在compose中，长按事件通过detectTapGestures中的onLongPress参数来响应，它的用法类似Button中的onClick参数，我们将在稍后的小节中通过具体的代码来演示它的用法。
大家注意一下：上面介绍的这三种事件都使用了相同的修饰符：detectTapGestures，只是修饰符中的参数名称不同。

2.4 滑动事件

在compose中，滑动事件通过detectDragGestures修饰符来响应，该修饰中包含的参数如下：

suspend fun PointerInputScope.detectDragGestures(
    onDragStart: (Offset) -> Unit = { },
    onDragEnd: () -> Unit = { },
    onDragCancel: () -> Unit = { },
    onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit
)

大家从参数的名称就可以看出各个参数的作用来，我们重点介绍一下onDrag参数，它主要用来响应滑动事件，它包含两个参数,详细的功能如下：

change参数：主要用来计算滑动过程的各种数值；
dragAmount参数：主要用来获取滑动过程中的坐标偏移值；

关于滑动的理论内容先介绍这些，我们将在稍后的小节中通过具体的代码来演示它们的用法。

3. 示例代码

Column(
    modifier = Modifier
        .padding(paddingValue)
        .fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(24.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {

    //pointerInput修饰符用来检测tap和drag手势
    Text(modifier = Modifier.pointerInput(Unit) { detectTapGestures(
        //先运行onPress再运行onTap,onPress相当于View中的EventDown,onTap相当于Up
        //通过参数offset可以获取到偏移值
        onTap = { offset -> str = "onTap: $offset" },
        onDoubleTap = {str = "onDoubleTap"},
        onPress = {offset -> str = "onPress: $offset"},
        onLongPress = {str = "onLongPress"}
    ) },
        text = str)



    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }

    //响应复杂的拖动
    Box(modifier = Modifier
        .size(200.dp)
        .background(color = Color.Yellow)
    ) {
        Text(modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
            .size(60.dp)
            .background(color = Color.Green)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    //change中包含的全是偏移值，原始坐标值如何查看
                    Log.d(TAG, "EventMainScreen: $change")
                    offsetX += dragAmount.x
                    offsetY += dragAmount.y
                }
            },
            text ="Drag"
        )
    }
}