XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次13課題背景屬性、顏色漸變屬性班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握ArkUI中5種背景屬性的使用方法。2.理解線性漸變、扇形漸變、徑向漸變的實(shí)現(xiàn)原理。3.熟悉美團(tuán)神會(huì)員案例的樣式實(shí)現(xiàn)邏輯。能力目標(biāo)：1.能獨(dú)立完成背景圖片的重復(fù)模式設(shè)置。2.能實(shí)現(xiàn)三種顏色漸變效果。3.能組合使用背景屬性完成復(fù)雜UI設(shè)計(jì)。素質(zhì)目標(biāo)：1.培養(yǎng)界面設(shè)計(jì)的審美能力。2.強(qiáng)化代碼規(guī)范意識(shí)。3.建立組件化設(shè)計(jì)思維。教學(xué)重點(diǎn)1.backgroundImageSize四模式差異。2.線性漸變angle方向規(guī)則。3.扇形漸變中心坐標(biāo)計(jì)算。教學(xué)難點(diǎn)1.漸變顏色的百分比位置控制。2.自定義背景組件的@Builder用法。3.三種漸變類型的參數(shù)差異。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、新課導(dǎo)入二、背景屬性精講三、美團(tuán)案例實(shí)戰(zhàn)四、漸變體系突破五、總結(jié)提升1.展示美團(tuán)神會(huì)員頁面（圖5.11）與漸變頭部（圖5.15）。2.提問引導(dǎo)：“信封背景如何實(shí)現(xiàn)？漸變效果對(duì)用戶體驗(yàn)有何提升？”。3.明確本課目標(biāo)：掌握背景與漸變的四大核心技能。1.背景三要素：-純色背景（backgroundColor）-圖片背景（backgroundImage+ImageRepeat）-自定義組件背景（@Builder+Alignment）2.背景圖片尺寸五模式：-Cover/Contain/Auto/FILL/精確尺寸1.分層實(shí)現(xiàn)神會(huì)員頁面：-粉紅底層（backgroundColor）-頂部弧線（background+Alignment.Top）-券狀卡片（backgroundImageSize.FILL）2.局部VS全局@Builder差異驗(yàn)證。1.線性漸變：-angle方向控制（0°=12點(diǎn)鐘）-溫度計(jì)色階分布（冷→暖）2.扇形漸變：-center坐標(biāo)定位-餅圖三色比例分配（1:1:2）3.輻射漸變：-彩虹半徑計(jì)算（radius:'100%'）-漸變中心下移技巧（y=280）1.背景屬性疊加優(yōu)先級(jí)。2.漸變參數(shù)記憶口訣：“線性看角度，扇形劃區(qū)域，徑向定圓心”。5'25'20'25'5'課程思政教學(xué)設(shè)計(jì)美學(xué)素養(yǎng)：通過美團(tuán)漸變?cè)O(shè)計(jì)，說明視覺層次對(duì)情感體驗(yàn)的影響。2.工匠精神：強(qiáng)調(diào)漸變色階的精確分配（溫度計(jì)0.15間隔）。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：創(chuàng)建局部@Builder弧形背景。3.提升作業(yè)：扇形漸變展示24小時(shí)溫度分布?？偨Y(jié)分析本次課程將通過案例驅(qū)動(dòng)和梯度式教學(xué)設(shè)計(jì)，幫助學(xué)生系統(tǒng)掌握ArkUI背景屬性與顏色漸變技術(shù)。學(xué)生能夠熟練運(yùn)用backgroundImageSize的四種縮放模式，精準(zhǔn)實(shí)現(xiàn)線性、扇形和徑向漸變效果，并完成美團(tuán)神會(huì)員頁面級(jí)別的UI還原。課程將重點(diǎn)培養(yǎng)學(xué)生對(duì)商業(yè)級(jí)界面設(shè)計(jì)的理解能力，使其在掌握技術(shù)要點(diǎn)的同時(shí)，建立起規(guī)范的代碼編寫習(xí)慣和專業(yè)的審美標(biāo)準(zhǔn)，為后續(xù)復(fù)雜組件開發(fā)奠定堅(jiān)實(shí)基礎(chǔ)。教學(xué)詳案（附頁）一、新課導(dǎo)入（5分鐘）1.情境創(chuàng)設(shè)（1）展示案例：通過極域課堂系統(tǒng)投屏展示美團(tuán)神會(huì)員頁面（圖5.11）和漸變頭部設(shè)計(jì)（圖5.15），引導(dǎo)學(xué)生觀察頁面背景的視覺層次。（2）提問互動(dòng)：“信封背景的立體感是如何實(shí)現(xiàn)的？”。“頂部漸變色彩對(duì)用戶情緒體驗(yàn)有何影響？”。（3）目標(biāo)說明：背景三要素（純色/圖片/自定義）。圖片尺寸四枚舉模式差異。三種漸變參數(shù)配置。美團(tuán)案例的組件化實(shí)現(xiàn)。2.知識(shí)銜接回顧上節(jié)課邊框?qū)傩?，引出背景作為UI設(shè)計(jì)的另一重要維度：“如果說邊框是組件的骨架，那么背景就是組件的皮膚”。二、背景屬性精講（25分鐘）1.背景三要素詳解屬性關(guān)鍵點(diǎn)示例代碼backgroundColor支持Color枚舉/16進(jìn)制/RGB.backgroundColor('#FD3475')backgroundImage-資源路徑：網(wǎng)絡(luò)/本地/Base64-repeat四模式（重點(diǎn)對(duì)比X/Y/XY效果）.backgroundImage($r('app.media.bg'),ImageRepeat.X)background-@Builder構(gòu)建自定義背景組件-Alignment九宮格定位.background(this.renderArcBg,{align:Alignment.TopStart})2.圖片尺寸五模式對(duì)比實(shí)驗(yàn)（1）分組任務(wù)：每組用同一熊貓圖片（200×100px）在100×100px容器中測(cè)試不同模式。（2）枚舉模式差異表模式寬高比完整性適用場(chǎng)景Cover保持不保證全屏背景Contain保持保證圖標(biāo)展示FILL不保持保證精確適配容器Auto保持不保證藝術(shù)性裁剪3.自定義背景陷阱分析（1）局部vs全局@Builder：通過修改案例5-6演示調(diào)用差異，強(qiáng)調(diào)作用域限制。（2）疊加優(yōu)先級(jí)：通過透明色實(shí)驗(yàn)驗(yàn)證background>backgroundImage>backgroundColor的覆蓋規(guī)則。三、美團(tuán)案例實(shí)戰(zhàn)（20分鐘）1.分層實(shí)現(xiàn)步驟（1）底層架構(gòu)Column()//最外層.backgroundColor('#FD3475')//粉紅底色.background(this.renderTopBg,{align:Alignment.Top})//頂部弧線（2）券狀卡片實(shí)現(xiàn)關(guān)鍵技巧：ImageSize.FILL確保信封圖片拉伸填充。陰影優(yōu)化：.shadow(ShadowStyle.OUTER_DEFAULT_LG)。2.調(diào)試要點(diǎn)圖片路徑錯(cuò)誤導(dǎo)致空白。百分比寬度計(jì)算錯(cuò)誤。四、漸變體系突破（25分鐘）1.線性漸變溫度計(jì)實(shí)現(xiàn)角度校準(zhǔn)：通過鐘表盤面演示0°=12點(diǎn)鐘方向。色階分配：強(qiáng)調(diào)醫(yī)療級(jí)精度要求（0.15間隔對(duì)應(yīng)35℃量程）。colors:[['#000059',0],//0℃['#E60000',0.9],//31.5℃['#cc0033',1]//35℃]2.扇形漸變餅圖坐標(biāo)計(jì)算：以[100,100]為中心點(diǎn)建立直角坐標(biāo)系。比例控制：通過1:1:2的百分比分割演示數(shù)據(jù)可視化。colors:[['#046FFF',0.0],['#25AFFF',0.2],//20%藍(lán)色['#A566FF',0.2],['#F066FF',0.6]//40%紫色]3.輻射漸變彩虹中心點(diǎn)偏移：center:['50%',280]實(shí)現(xiàn)地平線效果。自然過渡：首尾天藍(lán)色模擬