XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次22課題按鈕組件、選擇組件及綜合案例：仿美團(tuán)App消息列表頁面班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握Button、Toggle、Radio、Checkbox組件的接口和使用方法。2.理解組件狀態(tài)管理的實(shí)現(xiàn)原理。3.熟悉美團(tuán)App中交互組件的應(yīng)用場(chǎng)景。能力目標(biāo)：1.能夠?qū)崿F(xiàn)多種樣式按鈕（圓角/懸浮/復(fù)合按鈕）。2.能夠開發(fā)類似美團(tuán)的消息列表和篩選功能。3.掌握LazyForEach優(yōu)化列表性能的方法。素質(zhì)目標(biāo)：1.培養(yǎng)精細(xì)化UI設(shè)計(jì)的工匠精神。2.樹立組件化開發(fā)思維。3.提升解決實(shí)際業(yè)務(wù)問題的能力。教學(xué)重點(diǎn)1.Button組件的樣式定制方法。2.Toggle組件的狀態(tài)管理。3.Radio/Checkbox的組應(yīng)用邏輯。教學(xué)難點(diǎn)1.復(fù)合按鈕的子組件嵌套。2.批量操作時(shí)的狀態(tài)同步問題。3.LazyForEach的性能優(yōu)化原理。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、Button組件三、Toggle組件四、Radio和Checkbox五、綜合案例1.展示美團(tuán)App頁面截圖，分析按鈕組件應(yīng)用場(chǎng)景。（多媒體展示，案例分析法）1.接口參數(shù)解析。2.圓角/播放/點(diǎn)贊按鈕實(shí)現(xiàn)。3.懸浮按鈕開發(fā)要點(diǎn)。（代碼解析，任務(wù)驅(qū)動(dòng)法）1.美團(tuán)生鮮篩選功能還原。2.狀態(tài)同步問題解決方案。3.setTimeout異步處理技巧。（錯(cuò)誤示范法，小組討論）1.單選框組實(shí)現(xiàn)國(guó)家選擇。2.復(fù)選框?qū)崿F(xiàn)多選功能。3.自定義選中樣式開發(fā)。（對(duì)比教學(xué)法：教師講解，學(xué)生對(duì)比實(shí)現(xiàn)）1.消息列表頁面開發(fā)。2.左滑刪除功能實(shí)現(xiàn)。3.Badge未讀標(biāo)記添加。（項(xiàng)目教學(xué)法）5'20'20'20’15’課程思政教學(xué)設(shè)計(jì)1.通過還原美團(tuán)真實(shí)案例，培養(yǎng)解決實(shí)際問題的能力。2.在狀態(tài)同步問題解決中強(qiáng)調(diào)嚴(yán)謹(jǐn)?shù)木幊虘B(tài)度。3.通過組件復(fù)用實(shí)踐倡導(dǎo)高效開發(fā)理念。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）實(shí)現(xiàn)包含三種樣式的按鈕頁面。（2）完成類似美團(tuán)的標(biāo)簽篩選功能。總結(jié)分析本次教學(xué)單元取得了顯著成效，學(xué)生們通過實(shí)踐掌握了HarmonyOS核心交互組件的開發(fā)技能。在Button組件學(xué)習(xí)中，實(shí)現(xiàn)了圓角按鈕、播放按鈕和懸浮按鈕等多種樣式。Toggle組件教學(xué)中，通過解決狀態(tài)同步問題，同學(xué)們不僅理解了autoOperate防抖機(jī)制，更培養(yǎng)了嚴(yán)謹(jǐn)?shù)木幊趟季S。綜合實(shí)戰(zhàn)環(huán)節(jié)，LazyForEach優(yōu)化和左滑刪除功能的實(shí)現(xiàn)展現(xiàn)了將理論轉(zhuǎn)化為實(shí)踐的能力。這些成果為后續(xù)分布式應(yīng)用開發(fā)奠定了堅(jiān)實(shí)基礎(chǔ)，充分體現(xiàn)了“學(xué)以致用”的教學(xué)理念。教學(xué)詳案（附頁）一、案例導(dǎo)入（5分鐘）1.情境創(chuàng)設(shè)（2分鐘）（1）教師展示美團(tuán)App首頁截圖（圖6.65）和生鮮篩選頁面（圖6.68），提問：“大家注意到這些紅色【立即購(gòu)買】按鈕和標(biāo)簽切換控件了嗎？它們是如何引導(dǎo)用戶操作的？”（2）學(xué)生觀察后回答：按鈕顏色醒目、標(biāo)簽分組明確、點(diǎn)擊有反饋效果。2.案例解析（2分鐘）教師分析美團(tuán)案例中的交互邏輯：按鈕組件：承擔(dān)核心操作（如“立即購(gòu)買”）。Toggle組件：實(shí)現(xiàn)二元狀態(tài)切換（如“24小時(shí)營(yíng)業(yè)”篩選）。Radio組件：處理互斥選擇（如紅包類型單選）。Checkbox組件：支持多選（如商品屬性篩選）。3.目標(biāo)引出（1分鐘）教師明確：“今天我們就通過還原這些真實(shí)場(chǎng)景，學(xué)習(xí)HarmonyOS四大交互組件的開發(fā)?！倍utton組件（20分鐘）1.組件解析（5分鐘）教師講解Button接口：Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})演示三種type的區(qū)別（Normal矩形/Capsule膠囊形/Circle圓形）。2.樣式實(shí)戰(zhàn)（10分鐘）任務(wù)1：圓角按鈕（3分鐘）教師演示關(guān)鍵代碼：Button('圓角按鈕',{type:ButtonType.Normal}).borderRadius(9)//關(guān)鍵屬性強(qiáng)調(diào)：需同時(shí)設(shè)置type為Normal才能生效。任務(wù)2：復(fù)合按鈕（4分鐘）播放按鈕（Circle類型+Image子組件）。點(diǎn)贊按鈕（Capsule類型+Row子組件嵌套Symbol和Text）。教師巡視指導(dǎo)子組件嵌套常見錯(cuò)誤。任務(wù)3：懸浮按鈕（3分鐘）教師解析：.shadow({radius:20,color:Color.Blue,offsetX:5,offsetY:10}).position({right:10,top:180})//絕對(duì)定位關(guān)鍵代碼3.難點(diǎn)突破（5分鐘）（1）通過錯(cuò)誤示范展示同時(shí)設(shè)置label和子組件導(dǎo)致的沖突。未設(shè)置容器組件時(shí)的布局錯(cuò)亂。（2）總結(jié)開發(fā)規(guī)范復(fù)雜按鈕必須用容器組件嵌套。避免直接修改Button默認(rèn)樣式。三、Toggle組件（20分鐘）1.功能演示（3分鐘）教師運(yùn)行案例6-24，展示生鮮篩選效果：點(diǎn)擊標(biāo)簽時(shí)切換選中狀態(tài)。“重置”按鈕批量清除選中。2.狀態(tài)管理（7分鐘）分析數(shù)據(jù)綁定：@Stateprivatefilters?:Record<string,Array<SelectVO>>重點(diǎn)講解autoOperate防抖機(jī)制：this.autoOperate=true//標(biāo)記批量操作setTimeout(()=>{this.autoOperate=false},500)//延遲恢復(fù)3.錯(cuò)誤排查（5分鐘）故意刪除autoOperate相關(guān)代碼，演示無限渲染錯(cuò)誤。引導(dǎo)學(xué)生思考：為什么直接修改select數(shù)組會(huì)導(dǎo)致循環(huán)渲染？4.拓展思考（5分鐘）分組討論：除了setTimeout，還有哪些方案可以解決狀態(tài)同步問題？教師補(bǔ)充：可使用@Watch監(jiān)聽器或狀態(tài)管理庫(kù)。四、Radio和Checkbox（20分鐘）1.對(duì)比教學(xué)（5分鐘）教師出示對(duì)比表：組件特點(diǎn)美團(tuán)應(yīng)用場(chǎng)景如何分組Radio組內(nèi)互斥紅包類型單選（圖6.71）group字段Checkbox支持多選商品屬性篩選group字段2.Radio開發(fā)（7分鐘）關(guān)鍵代碼解析：Radio({value:'中國(guó)',group:'country',indicatorType:RadiolndicatorType.TICK})實(shí)踐任務(wù)：實(shí)現(xiàn)圖6.72的國(guó)家選擇器，要求：使用TICK/DOT/CUSTOM三種指示器。添加分組頭部樣式。3.Checkbox開發(fā)（8分鐘）樣式定制演示：.selectedColor('#FFEFDB').shape(CheckboxShape.CIRCLE)實(shí)戰(zhàn)：改造Toggle案例，將部分標(biāo)簽改為多選模式。五、綜合案例（15分鐘）1.架構(gòu)分析（3分鐘）教師展示圖6.73，解析消息列表的：分組結(jié)構(gòu)（ListItemGroup）。性能優(yōu)化（LazyForEach+cachedCount=2）。2.關(guān)鍵實(shí)現(xiàn)（7分鐘）數(shù)據(jù)源設(shè)計(jì)：classBaseDataSourceimplementsIDataSource{notifyDataReload(