HarmonyOS7 长按手势详解：LongPressGesture 的触发机制与应用-北京尧图网络

文章目录前言效果展示实现原理代码详解状态管理长按区域Progress 组件参数完整代码常见问题Q长按和点击能同时绑定吗Qduration 设多少合适Q长按时能不能获取触摸位置进阶玩法长按显示菜单长按录音写在最后前言长按是移动端的隐藏菜单。微信长按消息可以回复、删除、转发相册长按图片可以批量选择。长按手势LongPressGesture在不增加界面元素的前提下给用户提供了额外的操作入口。今天来讲 ArkUI 里LongPressGesture的用法包括触发时长设置、状态反馈、以及与 Progress 组件的配合。效果展示我们做一个红色的方块长按 0.8 秒后方块内文字变为长按中…显示一个环形进度条Progress触发次数 11 秒后自动恢复初始状态实现原理LongPressGesture的核心参数是duration——用户按住多久才算长按。默认是 500ms我们可以自定义。用户按下 ↓ 等待 duration 毫秒 ↓ 触发 onAction 回调 ↓ 如果 duration 没到就松手不触发代码详解状态管理StatelongPressCount:number0StateisPressing:booleanfalseStateprogress:number0三个状态变量longPressCount— 长按触发次数isPressing— 是否处于长按中的视觉状态progress— 环形进度条的进度值长按区域Column(){if(this.isPressing){Text(长按中...).fontSize(18).fontColor(#FFFFFF).margin({bottom:8})Progress({value:this.progress,total:100,type:ProgressType.Ring}).width(60).height(60).color(#FFFFFF)}else{Text(长按我).fontSize(18).fontColor(#FFFFFF)}}.width(140).height(140).backgroundColor(#FF6B6B).borderRadius(20).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).gesture(LongPressGesture({duration:800}).onAction((){this.longPressCountthis.isPressingtruethis.progress100setTimeout((){this.isPressingfalsethis.progress0},1000)}))这段代码有几个值得注意的地方条件渲染isPressing为true时显示长按中…“和进度条为false时显示长按我”。Progress 组件ProgressType.Ring渲染环形进度条。value设为 100等于total进度条就满了。手势绑定用.gesture()而不是.onClick()因为LongPressGesture是一个专门的手势识别器需要通过gestureAPI 绑定。自动恢复setTimeout在 1 秒后把isPressing和progress恢复初始值方块回到默认状态。Progress 组件参数参数说明本例值value当前进度100满total总进度100type样式类型ProgressType.Ring环形color进度条颜色#FFFFFF白色Progress 还支持ProgressType.Linear线性进度条和ProgressType.Eclipse月蚀形。完整代码EntryComponentstruct LongPressGesturePage{StatelongPressCount:number0StateisPressing:booleanfalseStateprogress:number0build(){Column(){Column(){Text(长按手势).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})Text(触发次数${this.longPressCount}).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({bottom:20})Column(){if(this.isPressing){Text(长按中...).fontSize(18).fontColor(#FFFFFF).margin({bottom:8})Progress({value:this.progress,total:100,type:ProgressType.Ring}).width(60).height(60).color(#FFFFFF)}else{Text(长按我).fontSize(18).fontColor(#FFFFFF)}}.width(140).height(140).backgroundColor(#FF6B6B).borderRadius(20).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).gesture(LongPressGesture({duration:800}).onAction((){this.longPressCountthis.isPressingtruethis.progress100setTimeout((){this.isPressingfalsethis.progress0},1000)}))Text(长按 0.8 秒触发).fontSize(12).fontColor(#999999).margin({top:16})}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}常见问题Q长按和点击能同时绑定吗可以。用.gesture()绑定长按用.onClick()绑定点击两者不冲突。用户短触触发onClick按住不放触发LongPressGesture。Qduration 设多少合适系统默认 500ms 是一个不错的基准。如果你希望不容易误触比如删除操作可以设长一点800-1000ms。如果希望灵敏响应比如选中操作可以设短一点300-400ms。Q长按时能不能获取触摸位置LongPressGesture的onAction回调不带位置参数。如果需要触摸位置用onTouch配合TouchType.Down的时间和坐标来判断。进阶玩法长按显示菜单一个常见的场景是长按后弹出一个操作菜单StateshowMenu:booleanfalse.gesture(LongPressGesture({duration:500}).onAction((){this.showMenutrue})).bindPopup(this.showMenu,{builder:this.menuBuilder,placement:Placement.Bottom,onStateChange:(e){if(!e.isVisible)this.showMenufalse}})长按录音社交 App 里长按录音的功能.gesture(LongPressGesture({duration:200}).onAction((){// 开始录音this.isRecordingtrue})).onTouch((event:TouchEvent){if(event.typeTouchType.Upthis.isRecording){// 停止录音并发送this.isRecordingfalse}})写在最后LongPressGesture为界面添加了第二层交互。用户不需要额外的按钮按住就能触发更多功能。配合duration参数可以精确控制触发时机配合 Progress 或 Popup 可以给用户清晰的反馈。在设计长按功能时记得给用户一些提示比如长按试试的引导文字不然很多用户根本不知道这个隐藏功能的存在。

HarmonyOS7 长按手势详解：LongPressGesture 的触发机制与应用

相关推荐

Laravel Echo实现WebSocket实时通信全解析

HarmonyOS7 点击手势入门：onClick 事件的原理与实战

HarmonyOS7 综合表单实战：多种输入组件 + 分组布局 + 验证提交

更多资讯

Arm-2D 深度评测：Cortex-M 上 2D 图形加速库的工程落地指南

okbiye 五大板块功能详解｜开题 + 综述 + 翻译 + 问卷 + 查重，论文前期中期全覆盖

SpringBoot+Vue实现高校食堂点餐配送系统：从架构到部署全解析

断网排查实战指南：从分诊到定位，网络工程师的完整排障思路

AI写SQL实战：喂对表结构和业务口径，生成结果才能直接跑

2026 年门窗智能控制系统的网络安全与数据主权：等保合规、加密传输与零信任架构的十大技术品牌

今日更新

Linux 内核 ARM 虚拟内存布局全解析：从 4GB 地址空间划分到源码级验证

AIGC降重工具测评与教育应用指南

数据容灾核心指标与实战方案解析

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？