XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次19課題網(wǎng)格布局及列表布局班級授課地點(diǎn)實(shí)到人數(shù)授課時間備課時間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識目標(biāo)：1.掌握網(wǎng)格布局（Grid）的行列劃分與子組件定位規(guī)則。2.理解列表布局（List）的分組機(jī)制與性能優(yōu)化策略。能力目標(biāo)：1.能使用Grid實(shí)現(xiàn)美團(tuán)主頁功能入口（案例6-7）。2.能使用List構(gòu)建分組通信錄（案例6-9）。素質(zhì)目標(biāo)：1.培養(yǎng)結(jié)構(gòu)化思維（網(wǎng)格規(guī)劃/數(shù)據(jù)分組）。2.強(qiáng)化效率意識（列表懶加載優(yōu)化）。教學(xué)重點(diǎn)1.Grid的rowsTemplate/columnsTemplate模板設(shè)置。2.List的ListItemGroup分組實(shí)現(xiàn)與sticky吸頂效果。教學(xué)難點(diǎn)1.不規(guī)則網(wǎng)格的跨行列定位（rowStart/rowEnd）。2.LazyForEach與cachedCount的性能優(yōu)化原理。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動/學(xué)生活動）教學(xué)用時(分鐘)一、導(dǎo)入新課二、網(wǎng)格布局精講三、案例實(shí)戰(zhàn)6-7四、列表布局突破五、案例實(shí)戰(zhàn)6-9六、總結(jié)提升1.對比展示：-美團(tuán)主頁圖標(biāo)網(wǎng)格（圖6.28）-消息列表頁（圖6.35）2.提問：“如何高效組織大量元素？”。（多媒體對比展示，情境設(shè)問）1.核心機(jī)制：-行列劃分原理（圖6.29）-fr單位含義（1fr2fr1fr）2.案例6-6解析：-3×4基礎(chǔ)網(wǎng)格搭建-跨行列定位：?組件3：columnStart(2).columnEnd(3)?組件4：rowStart(1).rowEnd(2)3.滾動控制：-Scroller對象方法（表6.4）-scrollPage滾動切換（動態(tài)演示，調(diào)整fr值實(shí)時預(yù)覽布局變化，從而演示Scroller滾動控制）任務(wù)：美團(tuán)主頁功能入口1.關(guān)鍵實(shí)現(xiàn)：-僅設(shè)rowsTemplate實(shí)現(xiàn)橫向滾動-ForEach循環(huán)渲染服務(wù)圖標(biāo)2.交互增強(qiáng)：-Scroller狀態(tài)檢測：isAtEnd()-按鈕動態(tài)切換文本3.視覺優(yōu)化：scrollBarWidth(0)隱藏滾動條。（任務(wù)驅(qū)動法，分步實(shí)現(xiàn)網(wǎng)格基礎(chǔ)框架，添加滾動交互邏輯）1.List核心架構(gòu)：-列表結(jié)構(gòu)圖解（圖6.36）2.案例6-8解析：-分隔線設(shè)置：divider()-ListItem內(nèi)嵌容器（Row）3.分組實(shí)現(xiàn)：-ListItemGroup頭部構(gòu)建（@Builder）-sticky吸頂效果原理（對比演示：顯示/隱藏分隔線效果，吸頂開關(guān)對比）任務(wù)：分組通信錄1.數(shù)據(jù)結(jié)構(gòu)設(shè)計：ContactGroupVO分組模型。2.嵌套循環(huán)：-外層ForEach遍歷字母組-內(nèi)層ForEach遍歷聯(lián)系人3.性能要點(diǎn)：避免ListItem內(nèi)復(fù)雜計算。（案例解析法：教師演示數(shù)據(jù)結(jié)構(gòu)映射，學(xué)生實(shí)現(xiàn)分組渲染）1.布局選擇指南：-圖標(biāo)矩陣→Grid-線性數(shù)據(jù)→List2.性能黃金法則：-大數(shù)據(jù)集必用LazyForEach-合理設(shè)置cachedCount3.編程啟示：“有條不紊”的網(wǎng)格思維。（歸納總結(jié)法）5'25'20'15’10'5'課程思政教學(xué)設(shè)計1.結(jié)構(gòu)化思維：網(wǎng)格布局體現(xiàn)“分而治之”的工程哲學(xué)。2.效率意識：懶加載技術(shù)詮釋“資源最優(yōu)配置”現(xiàn)實(shí)意義。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）修改案例6-7：增加第二行服務(wù)圖標(biāo)并實(shí)現(xiàn)縱向滾動。（2）在案例6-9中添加字母索引側(cè)邊欄。3.提升作業(yè)：用LazyForEach優(yōu)化萬級聯(lián)系人列表。總結(jié)分析通過本次課，學(xué)生成功掌握Grid行列定位技術(shù)，能獨(dú)立實(shí)現(xiàn)可滾動功能矩陣；深入理解List分組機(jī)制與性能優(yōu)化策略，具備大數(shù)據(jù)列表處理能力。通過結(jié)構(gòu)化布局訓(xùn)練，顯著提升了界面設(shè)計的條理性與效能意識，為復(fù)雜應(yīng)用開發(fā)奠定堅實(shí)基礎(chǔ)。教學(xué)詳案（附頁）一、導(dǎo)入新課（5分鐘）1.多媒體展示（2分鐘）（1）同步投影美團(tuán)App主頁（圖6.28）和消息列表頁（圖6.35）。（2）高亮標(biāo)注關(guān)鍵布局特征：美團(tuán)主頁：5×3功能圖標(biāo)矩陣，橫向滾動效果。消息列表：垂直分組結(jié)構(gòu)，吸頂字母標(biāo)題。2.情境設(shè)問（3分鐘）（1）提問：當(dāng)需要展示100個功能入口時，直接平鋪會有什么問題？（2）引導(dǎo)學(xué)生觀察對比：網(wǎng)格布局優(yōu)勢：空間利用率高（展示美團(tuán)網(wǎng)格單位面積信息密度）。列表布局優(yōu)勢：瀏覽效率高（演示快速滑動消息列表）。（3）板書關(guān)鍵詞：二維空間管理（Grid）vs線性信息流（List）二、網(wǎng)格布局精講（25分鐘）1.核心機(jī)制（10分鐘）（1）動態(tài)演示rowsTemplate('1fr2fr1fr')效果實(shí)時修改fr值展示布局變化（1:2:1→2:1:1）。對比展示columnsGap(10)前后間距變化。（2）不規(guī)則網(wǎng)格原理展示圖6.32→圖6.33的代碼映射關(guān)系。重點(diǎn)解析：//組件3跨2列.columnStart(2).columnEnd(3)//組件4跨2行.rowStart(1).rowEnd(2)2.滾動控制（8分鐘）（1）演示Scroller核心方法//創(chuàng)建控制器privatescroller:Scroller=newScroller()//綁定滾動Grid(this.scroller)//滾動檢測this.scroller.isAtEnd()（2）對比演示僅設(shè)rowsTemplate→橫向滾動。僅設(shè)columnsTemplate→縱向滾動。3.易錯點(diǎn)強(qiáng)調(diào)（7分鐘）（1）演示錯誤案例行列序號越界（rowStart(3)在3行網(wǎng)格中）。子組件順序錯誤（調(diào)換案例6-6中4/5組件順序）。（2）網(wǎng)格規(guī)劃方法論三、案例實(shí)戰(zhàn)6-7（20分鐘）1.基礎(chǔ)框架搭建（8分鐘）Grid(this.scroller){ForEach(this.services,(item)=>{GridItem(){Column(){Image(item.icon)Text()}}})}.rowsTemplate('1fr1fr1fr')2.滾動功能實(shí)現(xiàn)（7分鐘）交互邏輯編碼Button('滾動到底部').onClick(()=>{if(this.scroller.isAtEnd()){this.scroller.scrollPage({next:false})}else{this.scroller.scrollPage({next:true})}})3.視覺優(yōu)化（5分鐘）隱藏滾動條.scrollBarWidth(0)調(diào)試間距：.rowsGap(15).columnsGap(0)四、列表布局突破（15分鐘）1.架構(gòu)解析（5分鐘）展示List組件的子組件樹形結(jié)構(gòu)：List├─ListItemGroup│├─ListItem│└─ListItem└─ListItem2.分組實(shí)現(xiàn)（10分鐘）關(guān)鍵代碼演示：ListItemGroup({header:this.buildHeader('A'),space:10}){ForEach(this.groupA,item=>{ListItem(){//...}})}.sticky(StickyStyle.Header)五、案例實(shí)戰(zhàn)6-9（10分鐘）1.數(shù)據(jù)結(jié)構(gòu)設(shè)計（3分鐘）ContactGroupVO中包含了ContactVO2.嵌套循環(huán)實(shí)現(xiàn)（5分鐘）雙重ForEach結(jié)構(gòu)。ForEach(groups,group=>{ListItemGroup(){ForEach(group.contacts,contact=>{ListItem(){//...}})}})3.吸頂效果調(diào)試（2分鐘）修改sticky參數(shù)觀察效果變化。六、總結(jié)提升（5分鐘）1.技術(shù)維度網(wǎng)格布局：fr單位+跨行列定位列表布局：分組結(jié)構(gòu)+懶加載2.性能維度大數(shù)據(jù)集必須使用LazyForEachcachedCount黃金值：3-53.思維維度“網(wǎng)格思維”遷移案例：課程表設(shè)計，儀表盤布局。XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次20課題Text組件、RichText組件、TextInput組件班級授課地點(diǎn)實(shí)到人數(shù)授課時間備課時間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識目標(biāo)：1.掌握Text組件的對齊、溢出處理與復(fù)合文本渲染（Span/ContainerSpan）。2.理解RichText與Text組件的核心差異及適用場景。3.精通TextInput的輸入控制、鍵盤定制與交互邏輯。能力目標(biāo)：1.能實(shí)現(xiàn)美團(tuán)隱私政策頁文本樣式（案例6-12）。2.能構(gòu)建帶字符限制的輸入框（案例6-13）。3.能定制搜索頁面鍵盤交互（案例6-14）。素質(zhì)目標(biāo)：1.培養(yǎng)細(xì)節(jié)把控能力（像素級文本樣式控制）。2.強(qiáng)化安全合規(guī)意識（密碼輸入/隱私政策實(shí)現(xiàn)）。教學(xué)重點(diǎn)1.Text的textOverflow與maxLines配合使用。2.TextInput的type屬性與鍵盤控制（enterKeyType/onSubmit）。教學(xué)難點(diǎn)1.復(fù)合文本Span嵌套樣式控制。2.自定義鍵盤。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動/學(xué)生活動）教學(xué)用時(分鐘)一、導(dǎo)入新課二、文本顯示精講三、輸入控制突破四、總結(jié)提升1.對比展示：-美團(tuán)隱私政策頁（圖6.39）-搜索頁鍵盤交互（圖6.47）2.提問：“如何實(shí)現(xiàn)多樣化文本與智能輸入？”。（多媒體展示，情境設(shè)問）1.Text核心能力：-四類對齊效果（案例6-10/圖6.40）-溢出處理三模式（案例6-11/圖6.42）2.復(fù)合文本實(shí)戰(zhàn)：-Span行內(nèi)樣式控制-ContainerSpan容器管理（案例6-12）3.RichText局限：HTML標(biāo)簽解析（圖6.43）（代碼演示）1.TextInput基礎(chǔ)：-輸入類型（表6.6/圖6.45）-字符計數(shù)器邏輯（案例6-13/圖6.46）2.鍵盤交互進(jìn)階：-回車鍵定制（EnterKeyType）-雙模式縮回鍵盤（案例6-14）3.安全輸入實(shí)踐：-自定義鍵盤避讓機(jī)制-金融級輸入保護(hù)（案例6-15/圖6.49）（任務(wù)驅(qū)動法，分步實(shí)現(xiàn)搜索頁交互，調(diào)試自定義鍵盤避讓）1.組件選擇決策：-靜態(tài)文本→Text-HTML解析→RichText（輕量）/Web（重量）-用戶輸入→TextInput2.安全規(guī)范：-密碼type自動加密-敏感信息掩碼處理5'30'35'10’課程思政教學(xué)設(shè)計1.細(xì)節(jié)意識：文本溢出處理體現(xiàn)“用戶至上”的設(shè)計理念。2.安全觀念：金融鍵盤定制詮釋“隱私保護(hù)”的技術(shù)擔(dān)當(dāng)。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）復(fù)現(xiàn)案例6-12：添加首行縮進(jìn)(textIndent)。（2）修改案例6-14：將回車鍵改為“發(fā)送”樣式。3.提升作業(yè)：開發(fā)動態(tài)驗證碼輸入組件（4位自動跳轉(zhuǎn)）。總結(jié)分析通過本次課，學(xué)生成功掌握復(fù)合文本渲染技術(shù)，能精準(zhǔn)實(shí)現(xiàn)隱私政策等復(fù)雜文本樣式；深入理解TextInput的交互控制邏輯，具備金融級輸入防護(hù)能力。通過安全合規(guī)實(shí)踐，顯著提升了細(xì)節(jié)把控與隱私保護(hù)意識，為商業(yè)級應(yīng)用開發(fā)奠定基礎(chǔ)。教學(xué)詳案（附頁）一、導(dǎo)入新課（5分鐘）1.情境導(dǎo)入（2分鐘）【教師活動】（1）打開美團(tuán)APP，投影展示兩個典型界面：圖6.39美團(tuán)隱私政策概要頁面（復(fù)合文本樣式）。圖6.47美團(tuán)搜索頁面（定制鍵盤交互）。（2）提問引導(dǎo)：“同學(xué)們注意到這兩個頁面的文本顯示和輸入交互有什么特點(diǎn)？政策頁的條款樣式如何實(shí)現(xiàn)？搜索頁的鍵盤為什么能顯示‘搜索’按鈕？”?！緦W(xué)生活動】（1）觀察對比，思考技術(shù)實(shí)現(xiàn)方式。（2）自由回答（如“文本有不同顏色和縮進(jìn)”“鍵盤按鈕文字變了”）。2.揭示課題（1分鐘）展示本節(jié)課知識圖譜。3.目標(biāo)說明（2分鐘）（1）美團(tuán)政策頁文本樣式分解；（2）輸入框字符計數(shù)器動態(tài)效果；（3）金融鍵盤安全輸入過程。強(qiáng)調(diào)重點(diǎn)：“今天要攻克復(fù)合文本嵌套和鍵盤控制兩大難點(diǎn)”。二、文本顯示精講（30分鐘）1.Text核心功能（12分鐘）【教師演示】（1）現(xiàn)場編寫案例6-10。//四類對齊對比Text(this.content+'TextAlign.Start').style(TextAlign.Start)Text(this.content+'TextAlign.Center').style(TextAlign.Center)（2）動態(tài)修改maxLines值演示圖6.42三種溢出效果。直接截斷（Clip）省略號（Ellipsis）跑馬燈（MARQUEE）【學(xué)生實(shí)訓(xùn)】任務(wù)1：在DevEcoStudio中復(fù)現(xiàn)圖6.40對齊效果。任務(wù)2：修改案例6-11實(shí)現(xiàn)“首行縮進(jìn)2字符”：.textIndent('20fp')【難點(diǎn)突破】常見錯誤分析。Span嵌套時樣式繼承問題（演示fontWeight失效場景）。ImageSpan尺寸適配技巧（展示20vp圖標(biāo)錯位案例）。2.復(fù)合文本實(shí)戰(zhàn)（10分鐘）（1）案例分解逐行解析案例6-12。Text(){Span('《美團(tuán)隱私政策》').fontColor(Color.Blue)//超鏈接樣式ContainerSpan(){ImageSpan($r('app.media.icon'))//條款圖標(biāo)Span('注冊信息').decoration({type:Underline})//下劃線}}（2）分組挑戰(zhàn)每組完成政策頁1個條款模塊（注冊信息/地理位置等）。要求：使用ContainerSpan管理圖標(biāo)和文本。實(shí)現(xiàn)條款標(biāo)題的交互樣式（點(diǎn)擊時變紅）。（3）展示點(diǎn)評投影展示優(yōu)秀小組作品。強(qiáng)調(diào)ContainerSpan的容器特性。3.RichText局限（8分鐘）【對比實(shí)驗】同一段HTML文本分別用Text和RichText顯示。<h1>標(biāo)題</h1><p>正文<u>下劃線</u></p>實(shí)測內(nèi)存占用對比（展示DevEcoProfiler數(shù)據(jù)）?！居懻摽偨Y(jié)】使用場景決策樹。└─需要解析HTML？├─是→簡單標(biāo)簽？├─是→RichText│└─否→Web組件└─否→Text三、輸入控制突破（35分鐘）1.基礎(chǔ)輸入（10分鐘）（1）類型演示實(shí)時切換6種InputType：.type(InputType.Password)//密碼框.type(InputType.Number)//數(shù)字鍵盤重點(diǎn)演示Password的顯隱切換（圖6.45）。（2）計數(shù)器邏輯顯示閾值=floor(maxLength*thresho