Jetpack：022-Jetpack中的事件一_combinedclickable-优快云博客

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

本文介绍了JetpackCompose中的事件处理机制，包括单击、双击、长按和滑动事件，以及对应的Modifier修饰符（clickable,combinedClickable,draggable）。通过实例代码展示了如何在Compose中响应这些事件。

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

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了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")
}