XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次15課題手勢(shì)的綁定以及點(diǎn)擊手勢(shì)和長按手勢(shì)班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握gesture和parallelGesture綁定手勢(shì)的區(qū)別與使用場(chǎng)景。2.理解TapGesture點(diǎn)擊手勢(shì)的參數(shù)配置與事件處理。3.掌握LongPressGesture長按手勢(shì)的參數(shù)配置與回調(diào)方法。能力目標(biāo)：1.能夠正確使用gesture和parallelGesture實(shí)現(xiàn)父子組件手勢(shì)綁定。2.能夠?qū)崿F(xiàn)單次/多次點(diǎn)擊手勢(shì)交互功能。3.能夠?qū)崿F(xiàn)長按手勢(shì)及其回調(diào)事件處理。素質(zhì)目標(biāo)：1.培養(yǎng)交互設(shè)計(jì)的邏輯思維能力。2.樹立規(guī)范編碼意識(shí)，注重手勢(shì)事件處理的完整性。3.培養(yǎng)用戶體驗(yàn)優(yōu)化的職業(yè)素養(yǎng)。教學(xué)重點(diǎn)1.gesture與parallelGesture的mask參數(shù)區(qū)別。2.TapGesture的count參數(shù)配置。3.LongPressGesture的repeat和duration參數(shù)。教學(xué)難點(diǎn)1.父子組件手勢(shì)事件沖突處理。2.長按手勢(shì)多回調(diào)方法的理解與應(yīng)用。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、手勢(shì)綁定基礎(chǔ)三、點(diǎn)擊手勢(shì)實(shí)現(xiàn)四、長按手勢(shì)實(shí)現(xiàn)五、總結(jié)提升1.展示美團(tuán)App雙擊回頂部的交互案例。2.分析常見應(yīng)用中的手勢(shì)操作場(chǎng)景。（案例分析法）1.講解gesture方法及mask參數(shù)-Normal與IgnoreInternal區(qū)別2.演示父子組件手勢(shì)沖突案例。3.引入parallelGesture解決方案。（對(duì)比教學(xué)法，代碼實(shí)時(shí)演示，錯(cuò)誤示范法）1.TapGesture參數(shù)講解。-count參數(shù)（單/雙擊）-fingers參數(shù)2.對(duì)比onClick簡化方法。3.實(shí)戰(zhàn)：實(shí)現(xiàn)圖片雙擊放大功能。（任務(wù)驅(qū)動(dòng)法，案例教學(xué)法，小組協(xié)作）1.LongPressGesture參數(shù)解析-duration最小持續(xù)時(shí)間-repeat連續(xù)觸發(fā)2.三種回調(diào)方法演示-onAction-onActionEnd-onActionCancel3.實(shí)戰(zhàn)：長按計(jì)數(shù)器實(shí)現(xiàn)。（代碼解析法，實(shí)操演示法，互動(dòng)問答）1.知識(shí)要點(diǎn)回顧-兩種綁定方式區(qū)別-點(diǎn)擊與長按核心參數(shù)2.布置分層作業(yè)。8'20'22'25'5'課程思政教學(xué)設(shè)計(jì)1.工匠精神：在手勢(shì)參數(shù)配置環(huán)節(jié)強(qiáng)調(diào)精確到毫秒的專業(yè)要求。2.創(chuàng)新意識(shí)：通過手勢(shì)組合應(yīng)用案例激發(fā)創(chuàng)新思維。3.用戶體驗(yàn)：培養(yǎng)“以用戶為中心”的設(shè)計(jì)理念。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）創(chuàng)建一個(gè)包含父子組件的界面，分別使用gesture和parallelGesture實(shí)現(xiàn)點(diǎn)擊事件（2）實(shí)現(xiàn)雙擊放大圖片功能。（3）實(shí)現(xiàn)長按計(jì)數(shù)功能。3.提升作業(yè)：（1）研究SwipeGesture滑動(dòng)手勢(shì)的實(shí)現(xiàn)方式。（2）嘗試組合使用多種手勢(shì)實(shí)現(xiàn)復(fù)雜交互。總結(jié)分析本次課程通過美團(tuán)App手勢(shì)操作真實(shí)案例串聯(lián)知識(shí)點(diǎn)，學(xué)生將掌握gesture和parallelGesture兩種綁定方式的核心區(qū)別，理解點(diǎn)擊手勢(shì)和長按手勢(shì)的參數(shù)配置要點(diǎn)，并能實(shí)現(xiàn)商業(yè)級(jí)應(yīng)用中的常見手勢(shì)交互效果。重點(diǎn)培養(yǎng)對(duì)手勢(shì)事件沖突處理的精準(zhǔn)把控能力，為后續(xù)復(fù)雜交互開發(fā)奠定基礎(chǔ)。

教學(xué)詳案（附頁）一、案例導(dǎo)入（8分鐘）1.情境創(chuàng)設(shè)（3分鐘）【教師操作】展示美團(tuán)APP訂單頁面（提前錄制操作視頻）。演示常規(guī)滑動(dòng)瀏覽訂單列表。重點(diǎn)演示“雙擊頂部區(qū)域返回最新訂單”功能。【提問引導(dǎo)】“這個(gè)交互使用了什么手勢(shì)？為什么設(shè)計(jì)雙擊而不是單擊？”。2.案例分析（5分鐘）【討論題】1.微信中有哪些常見手勢(shì)操作？2.抖音的“點(diǎn)贊”手勢(shì)與“長按”手勢(shì)的區(qū)別？【教師總結(jié)】手勢(shì)交互的優(yōu)勢(shì)：提升操作效率（如雙擊>二次點(diǎn)擊）；增強(qiáng)用戶體驗(yàn)（符合自然交互）。二、手勢(shì)綁定基礎(chǔ)（20分鐘）1.gesture方法詳解（12分鐘）核心概念//標(biāo)準(zhǔn)語法結(jié)構(gòu).gesture(GestureType,//手勢(shì)類型GestureMask?//事件屏蔽規(guī)則)mask參數(shù)對(duì)比實(shí)驗(yàn)//實(shí)驗(yàn)1：父組件mask=Normal（默認(rèn)）Column().gesture(TapGesture(),GestureMask.Normal){Text().gesture(TapGesture())//僅子組件響應(yīng)}//實(shí)驗(yàn)2：父組件mask=IgnoreInternalColumn().gesture(TapGesture(),GestureMask.IgnoreInternal){Text().gesture(TapGesture())//僅父組件響應(yīng)}2.parallelGesture方法（8分鐘）（1）與gesture的核心區(qū)別特性pestureparallelGesture事件響應(yīng)順序二選一先后響應(yīng)適合場(chǎng)景獨(dú)立操作復(fù)合交互（2）電商應(yīng)用案例List(){ForEach([122,211,113],(item:number,i)=>{ListItem(){Text(''+item).width(100).height(100)}.gesture(TapGesture().onAction(()=>{//商品點(diǎn)擊}))})}.parallelGesture(SwipeGesture().onAction(()=>{//列表側(cè)滑}))三、點(diǎn)擊手勢(shì)實(shí)現(xiàn)（22分鐘）1.TapGesture參數(shù)解析（10分鐘）（1）參數(shù)組合實(shí)驗(yàn)countfingers效果描述11標(biāo)準(zhǔn)單擊21雙擊12雙指單擊（2）美團(tuán)回頂功能實(shí)現(xiàn)@Statescale:number=1Text("頂部區(qū)域").gesture(TapGesture({count:2}).onAction(()=>{animateTo({duration:300},()=>{this.scale=1.5//視覺反饋scrollToIndex(0)//滾動(dòng)到頂部})}))2.與onClick對(duì)比（4分鐘）開發(fā)建議：簡單點(diǎn)擊使用onClick進(jìn)行簡化，需要雙擊/多指等復(fù)雜手勢(shì)使用TapGesture。3.實(shí)戰(zhàn)訓(xùn)練（8分鐘）任務(wù)：實(shí)現(xiàn)圖片查看器的雙擊縮放。關(guān)鍵代碼提示：@Statescale:number=1Image($r("app.media.pic")).gesture(TapGesture({count:2}).onAction(()=>{this.scale=this.scale>1?1:2}))四、長按手勢(shì)實(shí)現(xiàn)（25分鐘）1.參數(shù)深度解析（10分鐘）（1）duration參數(shù)實(shí)驗(yàn)//不同時(shí)長對(duì)比LongPressGesture({duration:1000})//1秒觸發(fā)LongPressGesture({duration:200})//200ms觸發(fā)（可能誤觸）（2）repeat機(jī)制演示@Statecount:number=0Text("長按計(jì)數(shù)").gesture(LongPressGesture({repeat:true}).onAction(()=>{this.count++//持續(xù)觸發(fā)}))2.三大回調(diào)實(shí)戰(zhàn)（9分鐘）（1）回調(diào)流程圖（2）消息撤回案例.gesture(LongPressGesture().onAction(()=>{/*顯示撤回按鈕*/}).onActionEnd(()=>{/*2秒后自動(dòng)隱藏*/}).onActionCancel(()=>{/*立即隱藏*/}))3.