《HarmonyOS鸿蒙应用开发》电子教案-项目5-05

XX学院教案课程HarmonyOS鸿蒙应用开发课次16课题组合手势及综合案例：随手而动的小球班级授课地点实到人数授课时间备课时间课型□理论□实践√理实一体教学目标知识目标：1.掌握GestureGroup组合手势的三种识别模式（Sequence/Parallel/Exclusive）。2.理解美团商家列表案例中互斥手势的实现原理。3.掌握onTouch事件处理与组件动态定位技术。能力目标：1.能够实现点击/长按互斥识别的商业级交互效果。2.能够完成随手指移动的渐变小球综合案例。3.能够调试手势事件中的坐标参数。素质目标：1.培养复杂交互场景的分析设计能力。2.树立移动端精准触控的工程规范意识。3.培养从商业案例中提炼技术要点的职业素养。教学重点1.Exclusive模式在美团案例中的应用。2.onTouch事件三种状态（Down/Move/Up）处理。3.小球定位与windowX/windowY坐标关联。教学难点1.组合手势模式选择的场景判断。2.触摸事件对象的结构解析。3.动态样式与状态变量的联动控制。教学过程（主要教学内容、教学方式方法、教学时间分配等）主要教学内容教学方式、方法手段等（教师活动/学生活动）教学用时(分钟)一、案例导入二、组合手势精讲三、小球案例实施四、综合训练五、总结提升1.演示美团商家列表原型（图5.34）。2.分解点击查看/长按菜单的交互需求。（案例分析法）1.GestureGroup三大模式对比：-Sequence（订单步骤验证场景）-Parallel（图片缩放+旋转场景）-Exclusive（美团案例场景）2.代码解析GestureGroupExample.ets：-promptAction弹窗配置要点-互斥逻辑的onAction分离（对比教学法，代码逐行调试）1.组件技术分解：-CircleShape裁切原理-linearGradient参数调试2.事件处理精讲：-TouchType三种状态机-windowX/Y与组件定位关联3.实时调试：-console.log输出事件结构-拖拽边界值处理。（任务驱动法，实时编码演示，调试工具使用）1.分组实现美团案例增强版：-添加双击收藏功能-长按菜单项事件处理2.小球案例优化：-拖动时半径变化效果-抬起时位移动画。（小组协作开发，效果对比评审）1.知识图谱梳理：-组合手势选择决策树-触摸事件处理流程图2.行业应用延伸：-高德地图手势交互解析-京东商品长按预览实现。8'25'20'20'7'课程思政教学设计1.工匠精神：在坐标处理环节强调像素级精准要求。2.创新意识：通过商业案例反向工程激发创新思维。3.合规意识：强调用户操作数据的安全处理规范。教学手段教具极域课堂教学课后作业与思考题1.超星在线作业。2.基础作业：（1）实现商品列表项（点击查看详情/长按弹出菜单）。（2）修改小球案例使其在移动时改变颜色。3.提升作业：（1）尝试用Parallel模式实现双击+长按组合。（2）为小球添加移动轨迹动画效果。（3）实现双击图片放大和复原效果。总结分析本次课程通过美团外卖商家列表和动态小球两个商业案例，系统讲解了HarmonyOS组合手势开发技术，使学生掌握了GestureGroup三种识别模式的应用场景和onTouch事件处理机制，培养了商业级交互实现能力，为后续复杂动画和自定义组件开发奠定基础。。教学详案（附页）一、案例导入（8分钟）1.商业案例演示（3分钟）教师操作：全屏展示美团外卖商家列表页面原型（图5.34）。交互演示：点击“商家A”进入详情页面。长按“商家B”展示“找相似/不喜欢”蒙版。提问引导：“大家注意到这两种交互在技术实现上有什么共同点？”。2.需求分解（5分钟）（1）同一组件（Row）需要响应：1.单击→进入店铺2.长按→弹出菜单（2）矛盾点分析：传统方案问题：单独绑定TapGesture和LongPressGesture会导致事件冲突。解决方案引出：需要手势识别系统区分这两种交互方式。学生活动：分组讨论其他类似场景（如微信消息项单击查看/长按撤回）。二、组合手势精讲（25分钟）1.GestureGroup核心理论（10分钟）（1）三维对比表格模式识别方式适用场景美团案例适用性Sequence顺序识别多步骤验证×Parallel并发识别缩放+旋转×Exclusive互斥识别点击/长按√（2）关键代码解析（GestureGroupExample.ets）.gesture(GestureGroup(GestureMode.Exclusive,//互斥模式选择TapGesture().onAction(this.tapOnAction),//点击回调LongPressGesture().onAction(this.longPressOnAction)//长按回调))（3）调试技巧在onAction中添加console.log输出事件时间戳。2.美团案例实现（15分钟）（1）分步骤实现创建商家列表项Row组件。导入promptAction模块。实现tapOnAction（带主按钮的showActionMenu）。实现longPressOnAction（简化版showDialog）。（2）常见问题预警弹窗按钮事件未绑定→演示忘记加primary属性的效果。长按灵敏度调整→修改LongPressGesture的duration参数。（3）拓展思考如何添加第三个手势（如双击收藏）？不同手势的event事件对象差异分析。三、小球案例实施（20分钟）1.组件技术分解（7分钟）（1）圆形实现三要素.clipShape(newCircleShape({width:80,height:80}))//圆形裁切.linearGradient({colors:[[Color.Blue,0.0],[Color.Red,0.5],[Color.Yellow,1.0]],direction:GradientDirection.LeftBottom})//渐变配置.visibility(this.isDragging?Visibility.Visible:Visibility.Hidden)//状态控制（2）动态定位原理position绝对定位与windowX/Y的映射关系。坐标系对比：localX/YvswindowX/Y。2.事件处理实战（10分钟）（1）触摸状态机流程Down→记录坐标，显示小球Move→更新坐标，移动小球Up→隐藏小球（2）关键代码解析if(event.type===TouchType.Down){this.ballX=event.touches[0].windowX;//数组处理多指触摸this.isDragging=true;}（3）调试实践输出完整event对象观察touchs数组结构。添加边界检测（防止小球移出屏幕）。3.实时编码演示（3分钟）先完成静态小球显示。添加Down/Up基础交互。完善Move跟随逻辑。四、综合训练（20分钟）【任务要求】美团案例增强。为商家项添加双击收藏功能。实现长按菜单的“不喜欢”按钮事件。【验收标准】三种手势互不干扰。菜单按钮有实际回调。五、总结提升（7分钟）1.手势处理决策树（3分钟）是否需要多手势→是→是否需要同时识别→是→Parallel↓否→是否需要严格顺序→是→Sequence