【Android-Compose】手势检测实现按下、单击、双击、长按事件，以及避免频繁单击事件的简单方法

许多仙

已于 2024-02-04 06:36:50 修改

阅读量751

点赞数 9

文章标签： android compose 频繁单击事件手势检测事件

于 2024-02-04 01:47:35 首次发布

本文链接：https://blog.csdn.net/zhinengxiong6/article/details/136018871

版权

1 `不需要`双击事件 + `规避`频繁单击事件

var firstClickTime by remember { mutableStateOf(System.currentTimeMillis()) }
Icon(
   Icons.Default.Settings,
   contentDescription = "Localized description",
   //tint = settingTextColor,// 图标颜色
   modifier = Modifier.pointerInput(this) {// 手势输入处理
       detectTapGestures(// 检测点击类型的手势
           onDoubleTap = null,
           onTap = {
               // 当不需要使用双击事件的时候，应该避免频繁点击单击按钮，
               // 此时，需要先将双击事件的代码onDoubleTap = {...} 全都注释或者设置为null
               // 如果要触发单击事件的时间 减去 本次第一次按下的时间 大于 800ms，则才认为是合理的单击事件
               // 避免急速点击时，触发多次单击事件
               if (System.currentTimeMillis() - firstClickTime > 800) {
               	   // 实现单击事件：
                   Toast.makeText(context, "合理单击", Toast.LENGTH_SHORT).show()
               }
           },
           onPress = {
               this.awaitRelease() // 等待手指抬起
               // 本次按下的第一时间：
               firstClickTime = System.currentTimeMillis()
               //Toast.makeText(context, "每次按下都优先触发", Toast.LENGTH_SHORT).show()
           },
           onLongPress = {
               Toast.makeText(context, "长按", Toast.LENGTH_SHORT).show()
           }
       )
   }
)

2 需要双击事件（常规写法）

Icon(
   Icons.Default.Settings,
   contentDescription = "Localized description",
   //tint = settingTextColor,// 图标颜色
   modifier = Modifier.pointerInput(this) {// 手势输入处理
       detectTapGestures(// 检测点击类型的手势
           onDoubleTap = {
               Toast.makeText(context, "双击", Toast.LENGTH_SHORT).show()
           },
           onTap = {
               Toast.makeText(context, "单击", Toast.LENGTH_SHORT).show()
           },
           onPress = {
               Toast.makeText(context, "每次按下都优先触发", Toast.LENGTH_SHORT).show()
           },
           onLongPress = {
               Toast.makeText(context, "长按", Toast.LENGTH_SHORT).show()
           }
       )
   }
)

3 后记：不建议使用上面的代码自定义按钮

上面的代码，在最新的 M3 中，点击按钮不会带有涟漪小动画，可以尝试使用以下：

modifier = Modifier.padding(PaddingValues(bottom = 2.dp))
				.combinedClickable(
				     onClick = {
				         onTap()// 自定义单击事件
				     },
				     onLongClick = {
				         onLongPress()// 自定义长按事件
				     },
				     onLongClickLabel = stringResource(R.string.app_name)
				 )