Jetpack：022-Jetpack中的事件一

我们在上一章回中介绍了Jetpack中滑动列表相关的内容，本章回中主要介绍jetpack compse中的 事件。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

用户在使用手机的过程中经常进行点击或者滑动操作，这些操作统一称作事件，除了这两种事件外还有双击，长按事件。在compose中通过Modifier中的修饰符来响应事件。这些修饰符中名叫xxxable的修饰符为高级事件，名叫xxxGestures的修饰符为低级事件，高级事件是基于低级事件实现的，在使用上相对方便一些，不过功能比低级事件要少一些。

我感觉应该叫高层事件和低层事件比较好一些，不过这是官方文档翻译的结果，我们先这么叫吧，名称不同，本质上是相同的东西。本章回中我们先介绍高级事件，在下一章回中将介绍低级事件。

2. 使用方法

依据事件的操作，可以将其分为单击，双击，长按，滑动这几种类型。接下来我们分别介绍这些事件：

2.1 单击事件

在compose中使用clickable修饰符来响应单击事件，它提供了名叫onClick的参数，通过该参数可以响应单击事件，由于该参数是最后一个参数，因此可以按照尾lambda的语法将其放到函数体中，我们将在稍后小节中通过示例代码来演示。

2.2 双击事件

在compose中使用combinedClickable修饰符来响应双击事件,它提供了名叫onDoubleClick的参数来响应双击事件,我们将在稍后小节中通过示例代码来演示。

2.3 长按事件

在compose中使用combinedClickable修饰符来响应长按事件,它提供了名叫onLongClick的参数来响应长按事件,我们将在稍后小节中通过示例代码来演示。

大家在此注意：双击事件和长按事件使用相同的修饰符，只是修饰符中响应事件的参数名称不同。

2.4 滑动事件

在compose中使用draggable修饰符来响应滑动事件，它提供了名叫onDragStarted和onDragStopped的参数来响应滑动事件，从参数的名称中可以看出来这两个参数响应事件的时间点，我们将在稍后小节中通过示例代码来演示。

3. 示例代码

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

    //用来显示发出的event
    val defaultStr = "default value"
    var str by remember { mutableStateOf(defaultStr) }

    //clickable修饰符可以检测好点击事件，并且产生涟漪效果
    Text(modifier =
        Modifier.clickable { str = "clicked" },
        text = str)

    //combinedClickable修饰符可以检测双击，长按事件,官方文档中没有介绍此接口
    Text(modifier =
        Modifier.combinedClickable(
            onClick = {str = "onClicked"},
            onClickLabel = "clickLabel",
            onDoubleClick = {str = "onDoubleClick"},
            onLongClick = {str = "onLongClick"}
        ),
        text = str)


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

    //响应简单的拖动，在拖动事件中打印偏移值,只能是水平或者垂直方向的拖动
    Text(modifier = Modifier
        .offset {
            IntOffset(offsetX.roundToInt(), offsetY.roundToInt())
        }
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState(onDelta = { offsetX += it }),
            onDragStarted = { offset -> str = offset.toString() },
            onDragStopped = { offset -> str = offset.toString() },
        ),
        text = "Pls Drag")
}

上面的示例代码中，我们演示了单击，双击，长按和滑动这几种事件的响应方法，我们把这些事件绑定到了Text上，当发出不同的事件时Text显示不同的事件名称。

在响应滑动事件时，我们修改了Text的位置，因此它不但会显示偏移的坐标值还会跟着滑动事件一起移动，下面是程序的运行效果图，请大家参考：

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 依据事件的操作类型可以把事件分为单击、双击，长按、滑动这几种；
• 通过modifier中的修饰符来响应事件，不同的事件对应不同的修饰符；
• 单击事件通过clickable修饰符响应，滑动事件通过draggable修饰符响应；
• 双击事件和长按事件通过combinedClickable修饰符响应，不过它们对应不同的参数；

看官们，与Jetpack中事件相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！