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ū)域?？偨Y(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和@Extend的優(yōu)化作用。六、總結(jié)提升（5分鐘）1.對(duì)比總結(jié)（3分鐘）場(chǎng)景推薦布局核心屬性單方向排列（如列表）Column/RowjustifyContent,alignItems動(dòng)態(tài)多行排列（如標(biāo)簽）Flexwrap,alignContent2.課程思政（2分鐘）“Flex布局的‘靈活應(yīng)變’啟示我們：技術(shù)需要嚴(yán)謹(jǐn)（對(duì)齊像素），也要適應(yīng)變化（多端適配）?！盭X學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次18課題層疊布局及相對(duì)布局班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握層疊布局（Stack）。2.理解相對(duì)布局（RelativeContainer）的錨點(diǎn)與對(duì)齊規(guī)則。能力目標(biāo)：1.能使用Stack實(shí)現(xiàn)商家列表遮罩效果。2.能使用RelativeContainer實(shí)現(xiàn)直播頁(yè)面元素定位（案例6-4/6-5）。素質(zhì)目標(biāo)：1.培養(yǎng)空間布局思維（層疊/相對(duì)關(guān)系可視化）。2.強(qiáng)化邏輯嚴(yán)謹(jǐn)性（錨點(diǎn)依賴關(guān)系設(shè)計(jì)）。教學(xué)重點(diǎn)1.Stack的zIndex層級(jí)控制與visibility屬性。2.RelativeContainer的alignRules錨點(diǎn)規(guī)則。教學(xué)難點(diǎn)1.相對(duì)布局中錨點(diǎn)循環(huán)依賴的規(guī)避。2.offset屬性對(duì)錨點(diǎn)基準(zhǔn)的影響（偏移前后位置差異）。教學(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-3四、相對(duì)布局突破五、案例實(shí)戰(zhàn)6-5六、總結(jié)提升1.展示美團(tuán)商家列表頁(yè)（圖6.19）：-遮罩層覆蓋效果-商家LOGO標(biāo)簽疊加2.提問(wèn)：“如何實(shí)現(xiàn)元素重疊與精確定位？”（啟發(fā)提問(wèn)法，多媒體展示）。1.Stack核心機(jī)制：-圖解alignContent對(duì)齊（圖6.20/表5.1）-zIndex層級(jí)控制原理（數(shù)值越大越靠前）2.案例6-3逐層解析：-商家信息層（zIndex=1）-遮罩層（zIndex=2+visibility控制）-長(zhǎng)按手勢(shì)觸發(fā)邏輯3.陷阱強(qiáng)調(diào)：避免用margin調(diào)整位置（導(dǎo)致布局混亂）（對(duì)比演示法）任務(wù)：實(shí)現(xiàn)商家列表遮罩1.基礎(chǔ)框架搭建：Stack容器+兩層Row布局2.關(guān)鍵代碼實(shí)現(xiàn)：-遮罩層zIndex(2).visibility(${showMask})-商家層gesture(LongPressGesture)3.調(diào)試要點(diǎn)：點(diǎn)擊遮罩按鈕重置showMask狀態(tài)。（任務(wù)驅(qū)動(dòng)法，小組協(xié)作實(shí)）1.核心概念圖解：-錨點(diǎn)（anchor）與對(duì)齊方式（圖6.23）-組件邊界線（圖6.24）2.案例6-4關(guān)鍵解析：-t1組件：左中+下中對(duì)齊-t2組件：右下偏移問(wèn)題→offset校正-t4組件：超出容器不顯示3.鐵律強(qiáng)調(diào)：-禁止循環(huán)依賴（如A依賴B，B依賴A）-禁止同向多錨點(diǎn)（錯(cuò)誤示范法：故意設(shè)置循環(huán)依賴導(dǎo)致界面空白；演示反向錨點(diǎn)問(wèn)題）任務(wù)：美團(tuán)直播頁(yè)面布局。1.錨點(diǎn)鏈設(shè)計(jì)：-品牌區(qū)→排行榜→紅包→福袋→VIP卡-分享按鈕→喜歡按鈕→設(shè)置按鈕→購(gòu)物袋2.關(guān)鍵代碼實(shí)現(xiàn)：-輸入框：width('calc(100%-200vp)')-組件偏移：offset({x:-40,y:0})3.調(diào)試技巧：逐步添加組件驗(yàn)證錨點(diǎn)關(guān)系。（案例解析法，教師演示基礎(chǔ)錨點(diǎn)鏈，學(xué)生補(bǔ)充偏移調(diào)整）1.布局選擇決策樹(shù)：-重疊元素→Stack-復(fù)雜定位→RelativeContainer2.調(diào)試工具：-開(kāi)發(fā)者模式查看組件邊界框3.避坑指南：-相對(duì)布局必須設(shè)置id-offset不改變?cè)煎^點(diǎn)位置。（歸納總結(jié)法，思維導(dǎo)圖）5'25'20'15’10'5'課程思政教學(xué)設(shè)計(jì)1.空間思維培養(yǎng)：通過(guò)層疊/相對(duì)布局理解“主次層級(jí)”與“位置關(guān)聯(lián)”的現(xiàn)實(shí)意義。2.邏輯嚴(yán)謹(jǐn)性：錨點(diǎn)依賴關(guān)系體現(xiàn)“環(huán)環(huán)相扣”的系統(tǒng)思維。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）修改案例6-3：添加第三個(gè)疊加層（商家評(píng)分標(biāo)簽）。（2）在案例6-5中實(shí)現(xiàn)“購(gòu)物袋圖標(biāo)右移20vp”。總結(jié)分析通過(guò)本次課，學(xué)生可以掌握Stack的層級(jí)控制與顯隱邏輯，能獨(dú)立實(shí)現(xiàn)遮罩交互；深入理解RelativeContainer的錨點(diǎn)鏈設(shè)計(jì)原則，具備復(fù)雜定位能力。通過(guò)規(guī)避循環(huán)依賴等陷阱訓(xùn)練，顯著提升了布局設(shè)計(jì)的嚴(yán)謹(jǐn)性，為高級(jí)界面開(kāi)發(fā)奠定堅(jiān)實(shí)基礎(chǔ)。教學(xué)詳案（附頁(yè)）一、導(dǎo)入新課（5分鐘）【教師活動(dòng)】1.多媒體展示通過(guò)投影儀展示美團(tuán)App外賣(mài)商家列表頁(yè)面截圖（圖6.19），重點(diǎn)標(biāo)注以下兩個(gè)區(qū)域：長(zhǎng)按后出現(xiàn)的半透明遮罩層覆蓋在商家信息上的效果。商家Logo右上角疊加的“品質(zhì)優(yōu)選”標(biāo)簽。2.啟發(fā)提問(wèn)“同學(xué)們觀察這個(gè)界面，思考一下這些重疊的元素是如何實(shí)現(xiàn)的？”“如果讓我們用代碼實(shí)現(xiàn)這種一個(gè)元素覆蓋在另一個(gè)元素上的效果，應(yīng)該用什么布局方式？”3.引導(dǎo)思考通過(guò)手勢(shì)操作（長(zhǎng)按）觸發(fā)界面變化，這種交互方式的技術(shù)實(shí)現(xiàn)要點(diǎn)是什么？為什么簡(jiǎn)單的線性布局（Column/Row）無(wú)法實(shí)現(xiàn)這種效果？【學(xué)生活動(dòng)】觀察展示的界面截圖，思考老師提出的問(wèn)題。嘗試回憶已學(xué)布局方式的局限性。部分同學(xué)可能回答“用z-index”或“絕對(duì)定位”等概念?！窘虒W(xué)過(guò)渡】“正如同學(xué)們所思考的，這種重疊效果需要特殊的布局方式。今天我們就要學(xué)習(xí)兩種重要的布局方案——層疊布局(Stack)和相對(duì)布局(RelativeContainer)”。二、層疊布局精講（25分鐘）1.Stack核心機(jī)制講解（10分鐘）【教師活動(dòng)】（1）圖解展示通過(guò)PPT動(dòng)態(tài)演示圖6.20（alignContent對(duì)齊方式示意圖）和表5.1（Alignment枚舉值）。重點(diǎn)說(shuō)明Center、TopStart、BottomEnd等常用對(duì)齊方式。對(duì)比不同對(duì)齊方式下子組件的位置變化。（2）zIndex原理用棧結(jié)構(gòu)示意圖解釋“后入棧的組件在上層”的默認(rèn)規(guī)則。通過(guò)數(shù)值比較說(shuō)明zIndex越大層級(jí)越高。強(qiáng)調(diào)：zIndex可以是任意數(shù)值，不僅限于整數(shù)（3）代碼演示Stack({alignContent:Alignment.BottomEnd}){Image('background.png')//底層Text('標(biāo)簽').zIndex(1)//中層Button('按鈕').zIndex(2)//頂層}2.案例6-3逐層解析（10分鐘）【教師活動(dòng)】（1）結(jié)構(gòu)分解外層Stack容器下層：商家信息Row（zIndex=1）上層：遮罩層Row（zIndex=2）（2）關(guān)鍵代碼分析visibility(this.showMask?Visibility.Visible:Visibility.Hidden)。gesture(LongPressGesture...)手勢(shì)綁定。遮罩層點(diǎn)擊事件：onClick(()=>{this.showMask=false;})。（3）交互邏輯流程圖長(zhǎng)按商家層→showMask=true→遮罩層顯示→點(diǎn)擊遮罩按鈕→showMask=false→遮罩層隱藏3.陷阱強(qiáng)調(diào)（5分鐘）【教師活動(dòng)】（1）錯(cuò)誤示范：展示錯(cuò)誤使用margin調(diào)整位置的代碼。Stack(){Text('A').margin({top:20})Text('B')//會(huì)導(dǎo)致布局錯(cuò)亂}（2）正確建議：優(yōu)先使用alignContent確定大致位置；必須微調(diào)時(shí)使用offset而非margin。【學(xué)生活動(dòng)】跟隨老師思路理解Stack的工作原理。在DevEcoStudio中實(shí)時(shí)修改alignContent參數(shù)觀察效果變化。嘗試調(diào)整案例中zIndex值觀察層級(jí)變化。三、案例實(shí)戰(zhàn)6-3（20分鐘）1.基礎(chǔ)框架搭建（5分鐘）指導(dǎo)學(xué)生創(chuàng)建新ets文件，搭建Stack雙層結(jié)構(gòu)骨架。@Entry@ComponentstructStackExample{@StateshowMask:boolean=falsebuild(){Stack(){//商家層Row(){...}.zIndex(1)//遮罩層Row(){...}.zIndex(2).visibility(this.showMask?...)}}}2.關(guān)鍵功能實(shí)現(xiàn)（10分鐘）（1）遮罩層樣式設(shè)置半透明背景：backgroundColor(0xAA777777)。圓形按鈕：borderRadius(25)+固定寬高。（2）長(zhǎng)按手勢(shì)綁定：.gesture(LongPressGesture().onAction(()=>{this.showMask=true}))3.調(diào)試要點(diǎn)（5分鐘）檢查zIndex層級(jí)關(guān)系。驗(yàn)證長(zhǎng)按和點(diǎn)擊的事件傳遞。處理遮罩層阻擋下層交互的問(wèn)題。四、相對(duì)布局突破（15分鐘）1.核心概念圖解（5分鐘）【教師活動(dòng)】（1）錨點(diǎn)示意圖：用圖6.23說(shuō)明。錨點(diǎn)可以是_container_或其他組件id。九宮格對(duì)齊方式（左/中/右+上/中/下）。（2）邊界線圖示：通過(guò)圖6.24明確。left/right/top/bottom指組件邊界。middle/center指組件中線。2.案例6-4關(guān)鍵解析（7分鐘）代碼分析：//t1組件：左中對(duì)齊+下中對(duì)齊.alignRules({left:{anchor:'_container_',align:HorizontalAlign.Center},bottom:{anchor:'_container_',align:VerticalAlign.Center}})//t2組件：右下偏移問(wèn)題.alignRules({right:{anchor:'_container_',align:HorizontalAlign.End},center:{anchor:'_container_',align:VerticalAlign.Bottom}}).offset({x:0,y:-30})//校正偏