HarmonyOS7 手势系统:Tap/LongPress/Pan 组合拳
文章目录前言Tap点一下代码实现LongPress长按核心代码Pan拖动完整示例组合多个手势代码解析手势冲突怎么办实现拆解常见误区小白必踩完整可运行示例三种基础手势代码清单写在最后前言手势是触屏 app 的灵魂。点一下、长按、拖动——这些手势背后是 HarmonyOS 一套统一的手势系统。这篇文章我把最基础也最常用的三种手势——点击(Tap)、长按(LongPress)、拖拽(Pan)——拆开讲再告诉你它们怎么组合到一个组件上。学会这三个大部分交互都能搞定。Tap点一下最简单的点击用.onClick其实也是 Tap 的一种。但要用更细的手势控制比如双击用TapGesture代码实现Text(点我).gesture(TapGesture({count:1})// count1 单击2 双击.onAction((){console.info(被点击了)}))count: 1是单击count: 2是双击。.onAction在手势识别成功时触发。小知识普通.onClick()底层就是 TapGesture日常点击用onClick更直观需要双击/多击才上TapGesture。LongPress长按长按常用于弹出菜单“拖拽启动”。用LongPressGesture核心代码Image($r(app.media.icon)).gesture(LongPressGesture({duration:500})// 按住 500ms 触发.onAction((){this.showMenu()// 弹出操作菜单}))duration: 500默认按住 500 毫秒算长按可调。常用于长按删除长按预览等场景。Pan拖动拖拽要用PanGesture前面拖拽回弹那篇详细讲过这里复习骨架完整示例.gesture(PanGesture().onActionUpdate((e:GestureEvent){this.offsetXe.offsetX// 实时跟手}).onActionEnd((){/* 松手处理 */}))onActionUpdate里拿offsetX/offsetY实时位移配合animateTo做跟手和回弹。组合多个手势一个组件上能同时绑多个手势用GestureGroup或链式.gesture()代码解析.gesture(TapGesture({count:2}).onAction((){this.like()})// 双击点赞).gesture(LongPressGesture({duration:600}).onAction((){this.showMenu()})// 长按菜单)两个.gesture()链式调用组件既能双击又能长按互不冲突。系统会按手势特征自动识别用户想做哪个。手势冲突怎么办当父子组件都有手势比如外层可滚动、内层可拖动可能抢。用priority指定优先级实现拆解.gesture(PanGesture().onActionUpdate(...),GesturePriority.High// 高优先级优先识别这个)GesturePriority.High/low控制谁先抢到手势。复杂嵌套场景才需要普通页面用默认的就行。常见误区小白必踩误区说明onClick和TapGesture混用混乱日常点击用onClick最直观需要双击/多击才上TapGesture别滥用。手势冲突不priority父子都有手势时可能抢用GesturePriority指定谁优先。长按duration不对默认 500ms想要更灵敏或更迟钝自己调。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例三种基础手势Tap / LongPress / Pan 组合响应。代码清单// 组合 Tap / LongPress / PanEntryComponentstruct Gestures{Stateinfo:string试试手势build(){Column(){Text(this.info).padding(40).backgroundColor(#E8F0FE).gesture(TapGesture().onAction((){this.info单击了})).gesture(LongPressGesture({repeat:false}).onAction((){this.info长按了}))}.padding(20)}}你会看到什么点一下文字变「单击了」长按变「长按了」。gesture可以链式叠加多个手势识别器。动手改一改加PanGesture().onActionUpdate让文字跟手移动。给LongPressGesture设repeat: true体验长按连续触发。用PriorityGesture设置手势优先级解决冲突。写在最后三种基础手势Tap 点、LongPress 按、Pan 拖。日常 90% 的交互都是它们的组合。记忆法单击.onClick、双击/多击TapGesture、长按LongPressGesture、拖动PanGesture、多个手势链式.gesture()叠加。你现在的任务找个项目里只有点击的组件给加个长按弹出菜单——这一下子就让交互丰富起来了。