HarmonyOS7 手势综合展示：六种手势类型一网打尽 + Grid 数据看板

发布时间：2026/10/13 19:39:44

HarmonyOS7 手势综合展示：六种手势类型一网打尽 + Grid 数据看板
文章目录前言效果展示方案设计多层手势共存策略详细实现状态变量日志函数Grid 统计看板statCard Builder三层手势绑定滑动方向判定日志面板踩坑记录写在最后前言前面十几篇文章分别讲了 ArkUI 的各种手势类型今天来一个全家桶——把点击、长按、双击、拖拽、缩放、旋转、滑动全部集成到一个界面里用 Grid 布局做数据看板实时显示每种手势的触发次数和状态。这篇文章既是手势系列的总结也是一个手势调试工具的设计参考。效果展示界面分三个区域统计看板6 个 Grid 格子分别显示点击/长按/双击/滑动/拖拽/缩放的计数或状态测试区域一个大色块支持所有手势操作日志面板记录最近 8 条手势操作的时间线方案设计多层手势共存策略一个组件上要同时支持 7 种手势怎么组织答案是分三层层级手势模式第一层双击、单击、长按Exclusive互斥第二层拖拽、缩放、旋转Parallel并行| 第三层 | 快速滑动 | 独立绑定 |三层手势用三个.gesture()调用分别绑定。ArkUI 允许多次调用.gesture()后面的不会覆盖前面的。详细实现状态变量EntryComponentstruct GestureShowcase{StatetapCount:number0StatelongPressCount:number0StateswipeDirection:string-StatepanOffset:string(0, 0)StatescaleValue:number1StateangleValue:number0StatedoubleTapCount:number0StategestureLog:string[][]// ...}每种手势对应一个状态变量gestureLog记录操作日志。日志函数logGesture(name:string){consttimenewDate().toLocaleTimeString()this.gestureLog.unshift([${time}]${name})if(this.gestureLog.length8){this.gestureLog.pop()}}每次手势触发时调用新日志插入数组头部超过 8 条就移除最旧的。unshiftpop组合实现了固定长度的 FIFO 队列。Grid 统计看板Grid(){GridItem(){this.statCard(点击,${this.tapCount},#4D96FF)}GridItem(){this.statCard(长按,${this.longPressCount},#FF6B6B)}GridItem(){this.statCard(双击,${this.doubleTapCount},#9B59B6)}GridItem(){this.statCard(滑动,this.swipeDirection,#6BCB77)}GridItem(){this.statCard(拖拽,this.panOffset,#FFA500)}GridItem(){this.statCard(缩放,${Math.floor(this.scaleValue*100)}%,#4ECDC4)}}.columnsTemplate(1fr 1fr 1fr).rowsTemplate(1fr 1fr).rowsGap(8).columnsGap(8).width(100%).height(160).margin({bottom:16})3 列 2 行的 Grid 布局每个格子用Builder函数statCard统一渲染。statCard BuilderBuilderstatCard(label:string,value:string,color:string){Column(){Text(value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(color)Text(label).fontSize(10).fontColor(#999999).margin({top:2})}.width(100%).height(100%).backgroundColor(#F8F8F8).borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}Builder是 ArkUI 的自定义构建函数可以在组件的build()方法里调用。这里传入标签、数值和颜色生成统一风格的统计卡片。三层手势绑定Column(){Text(手势测试区域).fontSize(16).fontColor(#FFFFFF)Text(点击/长按/双击/拖动/缩放/旋转).fontSize(11).fontColor(#FFFFFF).opacity(0.8)}.width(100%).height(140).backgroundColor(#667eea).borderRadius(16).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).scale({x:this.scaleValue,y:this.scaleValue}).rotate({angle:this.angleValue})// 第一层互斥手势.gesture(GestureGroup(GestureMode.Exclusive,TapGesture({count:2}).onAction((){this.doubleTapCountthis.logGesture(双击)}),TapGesture({count:1}).onAction((){this.tapCountthis.logGesture(单击)}),LongPressGesture({duration:500}).onAction((){this.longPressCountthis.logGesture(长按)})))// 第二层并动手势.gesture(GestureGroup(GestureMode.Parallel,PanGesture({direction:PanDirection.All}).onActionUpdate((event:GestureEvent){this.panOffset(${Math.floor(event.offsetX)},${Math.floor(event.offsetY)})}).onActionEnd((){this.logGesture(拖拽)}),PinchGesture({fingers:2}).onActionUpdate((event:GestureEvent){this.scaleValueevent.scale}).onActionEnd((){this.logGesture(缩放)}),RotationGesture({fingers:2}).onActionUpdate((event:GestureEvent){this.angleValueevent.angle}).onActionEnd((){this.logGesture(旋转)})))// 第三层滑动手势.gesture(SwipeGesture({direction:SwipeDirection.All}).onAction((event:GestureEvent){constangleevent.angle??0if(angle45angle135)this.swipeDirection↑elseif(angle135angle225)this.swipeDirection←elseif(angle225angle315)this.swipeDirection↓elsethis.swipeDirection→this.logGesture(滑动)}))这段代码是手势系列知识的大综合。注意scale和rotate直接绑在组件上缩放和旋转操作能实时看到效果。滑动方向判定constangleevent.angle??0if(angle45angle135)this.swipeDirection↑elseif(angle135angle225)this.swipeDirection←elseif(angle225angle315)this.swipeDirection↓elsethis.swipeDirection→把 360° 分成四个 90° 的扇区每个扇区对应一个方向。比之前的左/右二分法更精细。日志面板Column(){Text(手势日志).fontSize(13).fontWeight(FontWeight.Bold).margin({bottom:8})ForEach(this.gestureLog,(log:string){Text(log).fontSize(11).fontColor(#999999).margin({bottom:2})})}.width(100%).margin({top:16}).padding(12).backgroundColor(#F8F8F8).borderRadius(8)时间戳 手势名称的列表最多 8 条。类似开发者工具的日志面板。踩坑记录问题原因解决双击不触发被单击抢走了双击写在单击前面Exclusive 模式按顺序判定拖拽和滑动冲突两者都是水平/垂直滑动用速度区分SwipeGesture 有速度阈值缩放后面板数字跳动缩放影响了布局只影响测试区域不影响统计面板多次调用.gesture()时手势之间的优先级取决于绑定顺序。先绑定的优先级高。如果发现某种手势死活触发不了检查一下是不是被另一个手势抢了。写在最后这个综合案例把手势系列的所有知识点串在了一起。核心设计思路是分层管理——互斥的放一层并行的放一层独立的放一层。配合 Grid 看板和日志面板不仅能验证手势是否正常工作还能直观看到每种手势的触发情况。做手势密集的界面时建议也做一个类似的调试面板开发效率会高很多。

相关新闻

自动化专业毕业能干什么？制造业、控制、软件、数据怎么选

自动化专业毕业能干什么？制造业、控制、软件、数据怎么选

最近很多自动化大三、大四的同学都在焦虑求职，看着五花八门的就业赛道完全不知道怎么选、怕选错行业踩坑。我本人是自动化专业出身，从业七年，身边全是本专业就业、转行的同学，踩过很多择业误区，今天给大家讲透自动化四…

2026/10/6 20:07:37 阅读更多 →
HarmonyOS7 属性动画基础：animateTo 驱动透明度与位移动画

HarmonyOS7 属性动画基础：animateTo 驱动透明度与位移动画

文章目录前言基础概念animateTo vs .animation()从简到繁透明度动画位移动画组合复位代码详解完整状态管理动画目标组件按钮控制面板实时数值显示Curve 曲线对比常见问题进阶技巧写在最后前言 ArkUI 有两种动画模式：声明式动画（.animation()&#xff09…

2026/10/13 7:01:31 阅读更多 →
FreeRDP曝高危堆缓冲区溢出漏洞：wfreerdp客户端遭弃用，远程代码执行风险急剧上升

FreeRDP曝高危堆缓冲区溢出漏洞：wfreerdp客户端遭弃用，远程代码执行风险急剧上升

开源远程桌面协议实现FreeRDP最近爆出一记重锤。安全研究团队对外公开了完整的漏洞细节，连带概念验证代码也一并放出。这意味着全球范围内依赖这款工具进行日常远程运维的企业和个人，正面临一场实打实的安全风暴。 这个漏洞的棘手之处在于，它…

2026/10/12 4:10:35 阅读更多 →

最新新闻

Nano Banana 2.1降价背后：API账单未减半的三大原因

Nano Banana 2.1降价背后：API账单未减半的三大原因

Nano Banana 2.1降价了，价格直接腰斩。按常理想，原来一个月花100元的API调用费，现在应该50元就够了。可我这几个月盯着账单数据，发现事情远没有这么简单——有些月份总花费只降了10%出头，甚至有一个周五的峰值账单比降…

2026/10/13 19:39:21 阅读更多 →
Git四部曲：add、commit、remote、push的本质与实操

Git四部曲：add、commit、remote、push的本质与实操

1. 项目概述：为什么“四部曲”这个说法在Git实操中如此根深蒂固你刚学Git时，是不是也听过这句话：“上传文件就四步——add、commit、remote、push”？我第一次带某高校开源社团做代码托管训练时，发现92%的新人把这四步当…

2026/10/13 19:39:20 阅读更多 →
数学建模B题穿越沙漠：Matlab动态规划源码拆解与调优

数学建模B题穿越沙漠：Matlab动态规划源码拆解与调优

简介：面向数学建模2020年B题的Matlab源码包，适合正在备战建模竞赛、需要参考完整赛题编程实现的学生和培训团队。资源围绕四关递进式求解展开，重点解决第二关双地图双村庄下的矿山与补给选择、第三四关天气不确定时的路线规划，并对…

2026/10/13 19:39:20 阅读更多 →
dlib 19.20.0 VS2019 预编译包：免编译配置与集成避坑指南

dlib 19.20.0 VS2019 预编译包：免编译配置与集成避坑指南

简介：这是一份针对Windows 64位平台的dlib 19.20.0预编译资源包，采用VS2019（msvc1928）编译的release版本，面向需要在C项目中快速集成dlib的开发者，适用于图像处理、机器学习和计算机视觉等场景。包内共1032…

2026/10/13 19:39:20 阅读更多 →
两堵墙之间：数据不出域与云端协同的六次门禁迁移

两堵墙之间：数据不出域与云端协同的六次门禁迁移

如果你也站在“数据不出域”和“模型效果跟不上”这两堵墙之间犹豫过，那这个标题应该能让你会心一笑。我估计不少同行都有过类似的阶段：本地推理服务器与云端协同，听起来像一句无比正确的废话，真落地起来才知道，单是“…

2026/10/13 19:39:20 阅读更多 →
Cursor额度重置教程：设备指纹清理实现合规续杯

Cursor额度重置教程：设备指纹清理实现合规续杯

简介：本资源是面向软件开发者的 Cursor 编辑器 11 月续杯实战源码包，聚焦解决免费用户模型调用受限、账号续期繁琐等实际痛点，适用于中初级开发者快速提升 AI 编程效率。压缩包共 3 个文件，含 .inscode（Cursor 插件配置…

2026/10/13 19:38:20 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目，我最大的感受是，大部分坑不是出在技术前沿，而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节，最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了，很难不碰到舵机控制这道坎。做智能小车要转方向，做机械臂要抬关节，做云台要偏航俯仰，背后都是同一个东西在干活：舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”？——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台？或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜？又或者，在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/13 16:22:04 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →