XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次17課題線性布局及彈性布局班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握線性布局（Column/Row）的主軸、交叉軸概念及對(duì)齊方式。2.理解彈性布局（Flex）的容器參數(shù)與子組件屬性。能力目標(biāo)：1.能使用Column/Row實(shí)現(xiàn)美團(tuán)紅包頁(yè)面布局。2.能使用Flex實(shí)現(xiàn)多行標(biāo)簽布局。素質(zhì)目標(biāo)：1.培養(yǎng)代碼規(guī)范性意識(shí)（如間距統(tǒng)一、對(duì)齊嚴(yán)謹(jǐn)）。2.理解“靈活應(yīng)變”的技術(shù)思維（彈性布局適配多端）。教學(xué)重點(diǎn)1.Column/Row的主軸對(duì)齊（justifyContent）與交叉軸對(duì)齊（alignItems）。2.Flex的wrap換行機(jī)制與space間距設(shè)置。教學(xué)難點(diǎn)1.Flex的alignContent多行對(duì)齊邏輯。2.子組件alignSelf屬性優(yōu)先級(jí)理解。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、導(dǎo)入新課二、線性布局精講三、案例實(shí)戰(zhàn)6-1四、彈性布局突破五、案例實(shí)戰(zhàn)6-2六、總結(jié)提升1.展示美團(tuán)紅包頁(yè)面（圖6.4/6.7）。2.提問(wèn)：“如何實(shí)現(xiàn)這種排列？”（啟發(fā)法，多媒體展示）。1.圖解主軸/交叉軸（圖6.2）。2.演示對(duì)齊方式：-justifyContent六種效果（圖6.5/表6.1）-alignItems三種效果（圖6.6/表6.2）（對(duì)比法/代碼現(xiàn)場(chǎng)調(diào)試）1.逐層解析美團(tuán)紅包布局：外層Column→內(nèi)層Row→嵌套Column。2.關(guān)鍵代碼演示：-space間距設(shè)置-SpaceBetween兩端對(duì)齊（任務(wù)驅(qū)動(dòng)法/小組協(xié)作實(shí)現(xiàn)基礎(chǔ)布局）1.對(duì)比Row不足（圖6.11）→引入Flex必要性。2.核心參數(shù)演示：-wrap換行（圖6.14）-space主軸/交叉軸間距-alignContent多行對(duì)齊（圖6.17）（錯(cuò)誤示范法：不換行導(dǎo)致溢出問(wèn)題）1.動(dòng)態(tài)標(biāo)簽實(shí)現(xiàn)：-ForEach循環(huán)生成標(biāo)簽-@Styles樣式切換（高亮/普通）2.重點(diǎn)調(diào)試：wrap+space參數(shù)效果。（案例解析法/關(guān)鍵代碼填充）1.對(duì)比Column/Row與Flex適用場(chǎng)景。2.強(qiáng)調(diào)調(diào)試工具使用（預(yù)覽器查看布局邊界）。（歸納總結(jié)法）5'25'20'15’10'5'課程思政教學(xué)設(shè)計(jì)1.工匠精神：對(duì)齊方式1像素偏差對(duì)用戶體驗(yàn)的影響。2.創(chuàng)新思維：Flex布局體現(xiàn)“靈活應(yīng)變，順勢(shì)而為”的技術(shù)哲學(xué)。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：在案例6-2中添加一個(gè)“清空選中”按鈕。3.提升作業(yè)：用Flex實(shí)現(xiàn)圖6.12的話題標(biāo)簽區(qū)域。總結(jié)分析本次課程學(xué)生成功掌握了線性布局（Column/Row）的核心概念與對(duì)齊方式，并能運(yùn)用其構(gòu)建美團(tuán)紅包等典型界面；同時(shí)，深入理解了彈性布局（Flex）的靈活特性，特別是換行（wrap）和間距（space）的應(yīng)用，具備了實(shí)現(xiàn)多行標(biāo)簽動(dòng)態(tài)布局的能力。通過(guò)實(shí)戰(zhàn)案例，學(xué)生不僅提升了代碼規(guī)范性和布局調(diào)試技能，更深刻體會(huì)到“靈活應(yīng)變、嚴(yán)謹(jǐn)細(xì)致”的技術(shù)理念對(duì)解決實(shí)際問(wèn)題的積極影響，為后續(xù)復(fù)雜界面開(kāi)發(fā)奠定了堅(jiān)實(shí)基礎(chǔ)。

教學(xué)詳案（附頁(yè)）一、導(dǎo)入新課（8分鐘）1.展示案例（2分鐘）（1）投影美團(tuán)紅包頁(yè)面（圖6.4/6.7），提問(wèn)學(xué)生：“這個(gè)頁(yè)面的紅包列表和金額區(qū)域是如何排列的？如果是你來(lái)實(shí)現(xiàn)，會(huì)用什么樣的組件？”（定性提問(wèn)）。（2）引導(dǎo)學(xué)生觀察，提出兩個(gè)組件：垂直排列的紅包列表（Column布局）；水平排列的金額和滿減信息（Row布局）。2.引出主題（3分鐘）對(duì)比學(xué)生答案，總結(jié)線性布局的核心作用：“線性布局（Column/Row）是鴻蒙開(kāi)發(fā)中最基礎(chǔ)的布局方式，通過(guò)主軸和交叉軸控制元素排列，能高效實(shí)現(xiàn)類似美團(tuán)紅包的界面?！币龑?dǎo)關(guān)鍵詞：主軸方向、交叉軸對(duì)齊、間距控制。二、線性布局精講（25分鐘）1.核心概念講解（10分鐘）（1）圖解主軸與交叉軸（圖6.2）Column：主軸垂直（自上而下），交叉軸水平。Row：主軸水平（從左到右），交叉軸垂直。（2）對(duì)齊方式演示（結(jié)合圖6.5/6.6和表6.1-6.3）主軸對(duì)齊（justifyContent）//Column示例：六種對(duì)齊效果Column(){...}.justifyContent(FlexAlign.SpaceBetween)交叉軸對(duì)齊（alignItems）//Row示例：首部對(duì)齊（Top）vs尾部對(duì)齊（Bottom）Row(){...}.alignItems(VerticalAlign.Top)2.交互練習(xí)（15分鐘）任務(wù)1：在DevEcoStudio中調(diào)試以下代碼，觀察對(duì)齊變化。Column({space:10}){Text('A').width('50%')Text('B').width('70%')}.alignItems(HorizontalAlign.Center)提問(wèn)：“如果想讓Row內(nèi)的子組件在垂直方向上居中，應(yīng)該修改哪個(gè)屬性？”。錯(cuò)誤示范：故意設(shè)置space過(guò)大導(dǎo)致布局溢出，引導(dǎo)學(xué)生思考間距控制的重要性。三、案例實(shí)戰(zhàn)6-1：美團(tuán)紅包布局（20分鐘）1.布局分析（5分鐘）展示圖6.10，拆解結(jié)構(gòu)：外層：Column（整個(gè)頁(yè)面垂直排列）；中層：Row（紅包金額和滿減信息水平排列）；內(nèi)層：嵌套Column（金額右側(cè)信息垂直排列）。2.代碼實(shí)現(xiàn)（15分鐘）步驟1：構(gòu)建頁(yè)面框架@Entry@ComponentstructRedPacketPage{build(){Column({space:10}){//頂部神券區(qū)域Text('天天神券20元').fontColor(Color.White)//紅包列表（調(diào)用自定義方法）this.renderRedPacket(10)}}}步驟2：實(shí)現(xiàn)renderRedPacket方法（重點(diǎn)講解SpaceBetween兩端對(duì)齊）@BuilderrenderRedPacket(money:number){Column(){Row(){Column(){...}.alignItems(HorizontalAlign.Start)//左對(duì)齊Column(){...}.alignItems(HorizontalAlign.End)//右對(duì)齊}.justifyContent(FlexAlign.SpaceBetween)}}四、彈性布局突破（15分鐘）1.痛點(diǎn)引入（3分鐘）展示圖6.11的Row布局溢出問(wèn)題：“當(dāng)子組件過(guò)多時(shí)，Row無(wú)法自動(dòng)換行，導(dǎo)致內(nèi)容被壓縮或截?cái)唷薄?.Flex核心參數(shù)（10分鐘）（1）換行機(jī)制（圖6.14）Flex({wrap:FlexWrap.Wrap}){...}//啟用換行（2）多行對(duì)齊（圖6.17）Flex({alignContent:FlexAlign.SpaceAround}){...}（3）對(duì)比實(shí)驗(yàn)：修改wrap為NoWrap，觀察溢出效果。3.間距疊加效果（2分鐘）演示space與justifyContent的聯(lián)合使用。Flex({space:{main:8,cross:10},justifyContent:FlexAlign.Center})五、案例實(shí)戰(zhàn)6-2：動(dòng)態(tài)標(biāo)簽布局（10分鐘）1.功能分析（3分鐘）展示圖6.18，明確需求：標(biāo)簽根據(jù)內(nèi)容動(dòng)態(tài)換行；點(diǎn)擊切換選中狀態(tài)（高亮/普通樣式）。2.關(guān)鍵代碼實(shí)現(xiàn)（7分鐘）（1）狀態(tài)管理@Stateprivatedishes:DishVO[]=[newDishVO('肉絲拌川'),...]（2）動(dòng)態(tài)渲染ForEach(this.dishes,(dish)=>{if(dish.select){Text().highlightText()}else{...}})（3）樣式復(fù)用：講解@Styles和