鸿蒙开发:单一手势实现长按事件

程序员一鸣
• 阅读 19

前言

本文基于Api13

上一篇文章,我们通过单一手势实现了单击和多次点击事件,在实际的开发中,除了点击事件之外,还有常见的长按事件,那么,在鸿蒙当中,如何去实现呢?在上篇文章中,关于点击事件我们列举了三种方式,其实关于长按事件也有多种方式实现,首先,关于长按事件,系统Api并没有一个通用的事件,需要自己来实现。

首先第一种方式,我们肯定能够想到使用onTouch方法,在手指按下的时候记录一个时间值,在手指抬起的时候再记录一个时间值,后者减去前者,如果大于我们定义的长按时间,那么就是一次长按事件,基本代码如下:

Button("长按")
        .onTouch((event) => {
          if (event.type == TouchType.Down) {
            this.mDownTime = new Date().getTime()
          } else if (event.type == TouchType.Up) {
            let upTime = new Date().getTime()
            if ((upTime - this.mDownTime) > this.mLongClickTime) {
              //大于一秒就是长按
              console.log("===长按事件")
            }
          }
        })

以上的代码,虽然能够实现一个长按事件,但是是在每次手指抬起的时候才去触发,如果我不抬起呢?显然就不能触发,这明显是一个bug存在,所以,我们再去优化一下。

显然就不能在手指抬起的时候去执行一个长按事件,能不能在手指移动的时候呢?显然也是不可以的,毕竟如果手指不动呢,就无法触发移动,这里针对长按事件的实现,最终只能在手指按下,也就是down事件中。

在一个down事件中,如何大于长按的触发时间值呢?这里,我们可以采用延时setTimeout,按下的时候就直接启动延时,当大于所定义的长按时间后,就是一个长按事件,这里有一个注意事项,那就是如果未大于长按的时间,需要清除掉这个延时,否则,手指抬起了,等时间到了也会去执行。

Button("长按")
        .onTouch((event) => {
          if (event.type == TouchType.Down) {
            this.mDownTime = new Date().getTime()
            this.mLongClickId = setTimeout(() => {
              console.log("===长按事件")
            }, this.mLongClickTime)
          } else if (event.type == TouchType.Up) {
            clearTimeout(this.mLongClickId)
          }
        })

日志输出

鸿蒙开发:单一手势实现长按事件

以上呢,是通过onTouch手势也实现了一个组件的长按事件,除此之外呢,我们也可以使用单一手势中的长按手势LongPressGesture来实现。

长按手势LongPressGesture

鸿蒙开发:单一手势实现长按事件

三个参数概述分别如下:

参数名称 参数类型 必填 参数描述
fingers number 触发长按的最少手指数,最小为1指, 最大取值为10指。默认值:1
repeat boolean 是否连续触发事件回调。默认值:false
duration number 触发长按的最短时间,单位为毫秒(ms)。默认值:500

简单案例如下:

Button("长按")
        .gesture(LongPressGesture()
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===长按事件")
            }
          })
        )

和单击一样,都是通过gesture来绑定手势,通过onAction来触发事件。

通过repeat参数,我们可以实现连续触发事件回调。

Button("长按")
        .gesture(LongPressGesture({ repeat: true })
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===长按事件")
            }
          })
        )

当然了,你也可以,通过duration来设置触发长按的最短时间,这里就不举例了。

相关总结

虽然说我们可以通过onTouch来实现一个长按事件,但是如果想要实现连续,多指那么就比较麻烦,远远没有LongPressGesture实现起来简单,所以在实际的开发中,大家还是以LongPressGesture为主。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
STM32使用HAL库实现按键的单击、双击、长按
STM32使用HAL库实现按键的单击、双击、长按目录STM32使用HAL库实现按键的单击、双击、长按前言具体思路工程配置代码实现实验效果前言编程开发环境:STM32
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Stella981 Stella981
3年前
Android零基础入门第41节:使用SimpleAdapter
  通过ArrayAdapter实现Adapter虽然简单、易用,但ArrayAdapter的功能比较有限,它的每个列表项只能给一个TextView动态填充内容。如果开发者需要实现更复杂的列表项,则可以考虑使用SimpleAdapter。!(http://si1.go2yd.com/getimage/0FtTjblBPiy)一、使用Simp
Stella981 Stella981
3年前
Android ListView长按事件弹出菜单并获取选中的item
看了很多listview的长按事件,但几乎都是只给出弹出菜单的代码,没有给出选中的某个项的代码,我贴个全的吧,免得摸索麻烦思路就是listview在父窗口先注册一个长按弹出菜单registerReceiver》设置一个长按的listener,保存好选中item数据》onCreateContextMenu添加菜单》onContextItemSel
Stella981 Stella981
3年前
HarmonyOS应用开发项目实战
鸿蒙2.0已经发布了有段时间了,目前网上也有些小demo了,但是缺乏稍微大点的项目代码。我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。我会陆续更新连载此贴,一步步从0基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误
京东云开发者 京东云开发者
4个月前
Taro 鸿蒙技术内幕系列(四):JDImage 自研鸿蒙图片库
作者:京东零售何骁基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景2024年初,京东正式启动了鸿蒙APP的开发工作。由于电商APP大量依赖图片来展示商品信息,对图
京东云开发者 京东云开发者
5个月前
Taro 鸿蒙技术内幕系列(一):如何将 React 代码跑在 ArkUI 上
作者:京东零售朱鸣辉基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景随着鸿蒙操作系统的快速发展,开发者们期待将现有跨平台应用迁移到鸿蒙平台。Taro作为一个流行的
少湖说 少湖说
4个月前
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha
少湖说 少湖说
4个月前
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter实战:混合开发鸿蒙Flutter混合开发主要有两种形式。1.基于har将fluttermodule打包成har包,在原生鸿蒙项目中,以har包的方式引入。其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环
京东云开发者 京东云开发者
4个月前
Taro 鸿蒙技术内幕系列(三) - 多语言场景下的通用事件系统设计
作者:京东零售朱天健基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景在鸿蒙生态系统中,虽然原生应用通常基于ArkTS实现,但在实际研发过程中发现,使用C可以显