XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次16課題組合手勢(shì)及綜合案例：隨手而動(dòng)的小球班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握GestureGroup組合手勢(shì)的三種識(shí)別模式（Sequence/Parallel/Exclusive）。2.理解美團(tuán)商家列表案例中互斥手勢(shì)的實(shí)現(xiàn)原理。3.掌握onTouch事件處理與組件動(dòng)態(tài)定位技術(shù)。能力目標(biāo)：1.能夠?qū)崿F(xiàn)點(diǎn)擊/長(zhǎng)按互斥識(shí)別的商業(yè)級(jí)交互效果。2.能夠完成隨手指移動(dòng)的漸變小球綜合案例。3.能夠調(diào)試手勢(shì)事件中的坐標(biāo)參數(shù)。素質(zhì)目標(biāo)：1.培養(yǎng)復(fù)雜交互場(chǎng)景的分析設(shè)計(jì)能力。2.樹(shù)立移動(dòng)端精準(zhǔn)觸控的工程規(guī)范意識(shí)。3.培養(yǎng)從商業(yè)案例中提煉技術(shù)要點(diǎn)的職業(yè)素養(yǎng)。教學(xué)重點(diǎn)1.Exclusive模式在美團(tuán)案例中的應(yīng)用。2.onTouch事件三種狀態(tài)（Down/Move/Up）處理。3.小球定位與windowX/windowY坐標(biāo)關(guān)聯(lián)。教學(xué)難點(diǎn)1.組合手勢(shì)模式選擇的場(chǎng)景判斷。2.觸摸事件對(duì)象的結(jié)構(gòu)解析。3.動(dòng)態(tài)樣式與狀態(tài)變量的聯(lián)動(dòng)控制。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、組合手勢(shì)精講三、小球案例實(shí)施四、綜合訓(xùn)練五、總結(jié)提升1.演示美團(tuán)商家列表原型（圖5.34）。2.分解點(diǎn)擊查看/長(zhǎng)按菜單的交互需求。（案例分析法）1.GestureGroup三大模式對(duì)比：-Sequence（訂單步驟驗(yàn)證場(chǎng)景）-Parallel（圖片縮放+旋轉(zhuǎn)場(chǎng)景）-Exclusive（美團(tuán)案例場(chǎng)景）2.代碼解析GestureGroupExample.ets：-promptAction彈窗配置要點(diǎn)-互斥邏輯的onAction分離（對(duì)比教學(xué)法，代碼逐行調(diào)試）1.組件技術(shù)分解：-CircleShape裁切原理-linearGradient參數(shù)調(diào)試2.事件處理精講：-TouchType三種狀態(tài)機(jī)-windowX/Y與組件定位關(guān)聯(lián)3.實(shí)時(shí)調(diào)試：-console.log輸出事件結(jié)構(gòu)-拖拽邊界值處理。（任務(wù)驅(qū)動(dòng)法，實(shí)時(shí)編碼演示，調(diào)試工具使用）1.分組實(shí)現(xiàn)美團(tuán)案例增強(qiáng)版：-添加雙擊收藏功能-長(zhǎng)按菜單項(xiàng)事件處理2.小球案例優(yōu)化：-拖動(dòng)時(shí)半徑變化效果-抬起時(shí)位移動(dòng)畫(huà)。（小組協(xié)作開(kāi)發(fā)，效果對(duì)比評(píng)審）1.知識(shí)圖譜梳理：-組合手勢(shì)選擇決策樹(shù)-觸摸事件處理流程圖2.行業(yè)應(yīng)用延伸：-高德地圖手勢(shì)交互解析-京東商品長(zhǎng)按預(yù)覽實(shí)現(xiàn)。8'25'20'20'7'課程思政教學(xué)設(shè)計(jì)1.工匠精神：在坐標(biāo)處理環(huán)節(jié)強(qiáng)調(diào)像素級(jí)精準(zhǔn)要求。2.創(chuàng)新意識(shí)：通過(guò)商業(yè)案例反向工程激發(fā)創(chuàng)新思維。3.合規(guī)意識(shí)：強(qiáng)調(diào)用戶操作數(shù)據(jù)的安全處理規(guī)范。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）實(shí)現(xiàn)商品列表項(xiàng)（點(diǎn)擊查看詳情/長(zhǎng)按彈出菜單）。（2）修改小球案例使其在移動(dòng)時(shí)改變顏色。3.提升作業(yè)：（1）嘗試用Parallel模式實(shí)現(xiàn)雙擊+長(zhǎng)按組合。（2）為小球添加移動(dòng)軌跡動(dòng)畫(huà)效果。（3）實(shí)現(xiàn)雙擊圖片放大和復(fù)原效果?？偨Y(jié)分析本次課程通過(guò)美團(tuán)外賣(mài)商家列表和動(dòng)態(tài)小球兩個(gè)商業(yè)案例，系統(tǒng)講解了HarmonyOS組合手勢(shì)開(kāi)發(fā)技術(shù)，使學(xué)生掌握了GestureGroup三種識(shí)別模式的應(yīng)用場(chǎng)景和onTouch事件處理機(jī)制，培養(yǎng)了商業(yè)級(jí)交互實(shí)現(xiàn)能力，為后續(xù)復(fù)雜動(dòng)畫(huà)和自定義組件開(kāi)發(fā)奠定基礎(chǔ)。。教學(xué)詳案（附頁(yè)）一、案例導(dǎo)入（8分鐘）1.商業(yè)案例演示（3分鐘）教師操作：全屏展示美團(tuán)外賣(mài)商家列表頁(yè)面原型（圖5.34）。交互演示：點(diǎn)擊“商家A”進(jìn)入詳情頁(yè)面。長(zhǎng)按“商家B”展示“找相似/不喜歡”蒙版。提問(wèn)引導(dǎo)：“大家注意到這兩種交互在技術(shù)實(shí)現(xiàn)上有什么共同點(diǎn)？”。2.需求分解（5分鐘）（1）同一組件（Row）需要響應(yīng)：1.單擊→進(jìn)入店鋪2.長(zhǎng)按→彈出菜單（2）矛盾點(diǎn)分析：傳統(tǒng)方案問(wèn)題：?jiǎn)为?dú)綁定TapGesture和LongPressGesture會(huì)導(dǎo)致事件沖突。解決方案引出：需要手勢(shì)識(shí)別系統(tǒng)區(qū)分這兩種交互方式。學(xué)生活動(dòng)：分組討論其他類(lèi)似場(chǎng)景（如微信消息項(xiàng)單擊查看/長(zhǎng)按撤回）。二、組合手勢(shì)精講（25分鐘）1.GestureGroup核心理論（10分鐘）（1）三維對(duì)比表格模式識(shí)別方式適用場(chǎng)景美團(tuán)案例適用性Sequence順序識(shí)別多步驟驗(yàn)證×Parallel并發(fā)識(shí)別縮放+旋轉(zhuǎn)×Exclusive互斥識(shí)別點(diǎn)擊/長(zhǎng)按√（2）關(guān)鍵代碼解析（GestureGroupExample.ets）.gesture(GestureGroup(GestureMode.Exclusive,//互斥模式選擇TapGesture().onAction(this.tapOnAction),//點(diǎn)擊回調(diào)LongPressGesture().onAction(this.longPressOnAction)//長(zhǎng)按回調(diào)))（3）調(diào)試技巧在onAction中添加console.log輸出事件時(shí)間戳。2.美團(tuán)案例實(shí)現(xiàn)（15分鐘）（1）分步驟實(shí)現(xiàn)創(chuàng)建商家列表項(xiàng)Row組件。導(dǎo)入promptAction模塊。實(shí)現(xiàn)tapOnAction（帶主按鈕的showActionMenu）。實(shí)現(xiàn)longPressOnAction（簡(jiǎn)化版showDialog）。（2）常見(jiàn)問(wèn)題預(yù)警彈窗按鈕事件未綁定→演示忘記加primary屬性的效果。長(zhǎng)按靈敏度調(diào)整→修改LongPressGesture的duration參數(shù)。（3）拓展思考如何添加第三個(gè)手勢(shì)（如雙擊收藏）？不同手勢(shì)的event事件對(duì)象差異分析。三、小球案例實(shí)施（20分鐘）1.組件技術(shù)分解（7分鐘）（1）圓形實(shí)現(xiàn)三要素.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)//狀態(tài)控制（2）動(dòng)態(tài)定位原理position絕對(duì)定位與windowX/Y的映射關(guān)系。坐標(biāo)系對(duì)比：localX/YvswindowX/Y。2.事件處理實(shí)戰(zhàn)（10分鐘）（1）觸摸狀態(tài)機(jī)流程Down→記錄坐標(biāo)，顯示小球Move→更新坐標(biāo)，移動(dòng)小球Up→隱藏小球（2）關(guān)鍵代碼解析if(event.type===TouchType.Down){this.ballX=event.touches[0].windowX;//數(shù)組處理多指觸摸this.isDragging=true;}（3）調(diào)試實(shí)踐輸出完整event對(duì)象觀察touchs數(shù)組結(jié)構(gòu)。添加邊界檢測(cè)（防止小球移出屏幕）。3.實(shí)時(shí)編碼演示（3分鐘）先完成靜態(tài)小球顯示。添加Down/Up基礎(chǔ)交互。完善Move跟隨邏輯。四、綜合訓(xùn)練（20分鐘）【任務(wù)要求】美團(tuán)案例增強(qiáng)。為商家項(xiàng)添加雙擊收藏功能。實(shí)現(xiàn)長(zhǎng)按菜單的“不喜歡”按鈕事件?！掘?yàn)收標(biāo)準(zhǔn)】三種手勢(shì)互不干擾。菜單按鈕有實(shí)際回調(diào)。五、總結(jié)提升（7分鐘）1.手勢(shì)處理決策樹(shù)（3分鐘）是否需要多手勢(shì)→是→是否需要同時(shí)識(shí)別→是→Parallel↓否→是否需要嚴(yán)格順序→是→Sequence