XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次12課題尺寸屬性、邊框?qū)傩园嗉?jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握尺寸屬性（width/height/size/padding/margin/layoutWeight/constraintSize）的用法。2.理解邊框?qū)傩裕╞orderWidth/borderColor/borderRadius/borderStyle）的差異化配置。能力目標(biāo)：1.能實(shí)現(xiàn)約束尺寸（constraintSize）與權(quán)重布局（layoutWeight）2.能獨(dú)立完成盒子模型的復(fù)合樣式開(kāi)發(fā)。素質(zhì)目標(biāo)：1.培養(yǎng)“差之毫厘，謬以千里”的精準(zhǔn)設(shè)計(jì)意識(shí)。2.具備較高的審美能力。教學(xué)重點(diǎn)1.百分比與calc動(dòng)態(tài)計(jì)算（width('calc(10%+30vp)')）。2.權(quán)重分配邏輯。3.邊框復(fù)合設(shè)置（borderOptions）。教學(xué)難點(diǎn)1.約束尺寸優(yōu)先級(jí)規(guī)則。2.本地化邊距適配（LocalizedPadding）。3.多屬性鏈?zhǔn)秸{(diào)用疊加效果。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、尺寸體系精講二、高級(jí)尺寸控制三、邊框開(kāi)發(fā)實(shí)戰(zhàn)四、總結(jié)提升1.盒子模型分層解析（圖5.2）。2.動(dòng)態(tài)單位演練：-百分比基準(zhǔn)值（父組件width）-calc計(jì)算規(guī)范（運(yùn)算符空格）3.案例5-1：內(nèi)外邊距疊加效果（圖5.3）。1.權(quán)重布局：-Row/Column主軸權(quán)重分配（圖5.4-5.5）-剩余空間計(jì)算邏輯2.約束尺寸：-minWidth/maxWidth優(yōu)先級(jí)規(guī)則（圖5.6）3.案例5-2/5-3：-文本截?cái)嗫刂疲▓D5.7）-三列權(quán)重布局（圖5.8）1.四向差異化配置：-borderWidth分邊設(shè)置-borderColor多色方案2.圓角與樣式：-borderRadius角半徑極值規(guī)則-虛線(xiàn)/點(diǎn)線(xiàn)樣式（BorderStyle）3.案例5-4：-單獨(dú)設(shè)置vs復(fù)合設(shè)置（圖5.10）1.尺寸口訣：“百分比依父寬，calc空格不能忘”。2.呼應(yīng)“差之毫厘，謬以千里”的精準(zhǔn)精神。25'30'20'5'課程思政教學(xué)設(shè)計(jì)1.精益求精：通過(guò)calc運(yùn)算符空格規(guī)范，強(qiáng)調(diào)代碼嚴(yán)謹(jǐn)性。2.人文關(guān)懷：結(jié)合美團(tuán)界面設(shè)計(jì)，說(shuō)明細(xì)節(jié)體驗(yàn)對(duì)用戶(hù)的重要性。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線(xiàn)作業(yè)。2.基礎(chǔ)作業(yè)：（1）復(fù)現(xiàn)案例5-1內(nèi)外邊距疊加效果。（2）實(shí)現(xiàn)三色邊框（上紅右藍(lán)下綠左黃）。3.提升作業(yè)：開(kāi)發(fā)自適應(yīng)卡片：-最小寬度120vp，最大占屏70%-圓角半徑隨尺寸動(dòng)態(tài)變化總結(jié)分析本課以美團(tuán)界面（圖5.1/5.9）為場(chǎng)景錨點(diǎn)，采用“盒子模型→動(dòng)態(tài)計(jì)算→權(quán)重約束→邊框合成”四階遞進(jìn)框架，通過(guò)五大核心案例（5-1至5-4）貫通尺寸與邊框知識(shí)體系：借MarginPaddingExample具象化padding/margin疊加效應(yīng)（強(qiáng)化圖5.3視覺(jué)分層）；用ConstraintExample實(shí)證minWidth/maxWidth優(yōu)先級(jí)規(guī)則（演繹圖5.6三區(qū)間邏輯）；以LayoutWeightExample演練剩余空間權(quán)重分配（解析圖5.8無(wú)權(quán)重組件基準(zhǔn)值）；借BorderExample對(duì)比單屬性鏈?zhǔn)秸{(diào)用與border復(fù)合設(shè)置效能差異（呼應(yīng)圖5.10設(shè)計(jì)哲學(xué)）。全程貫穿“差之毫厘，謬以千里”的工程準(zhǔn)則，在calc空格校驗(yàn)、圓角極值控制等細(xì)節(jié)處深化精準(zhǔn)意識(shí)。教學(xué)詳案（附頁(yè)）一、尺寸體系精講（25分鐘）1.導(dǎo)入環(huán)節(jié)（3分鐘）展示美團(tuán)App主頁(yè)截圖（圖5.1），提問(wèn)：“同學(xué)們注意到這個(gè)界面由哪些區(qū)域組成？為什么搜索框和功能入口的間距看起來(lái)這么舒適？”。引出盒子模型概念：“這些精妙的布局效果，都源于我們今天要學(xué)習(xí)的尺寸屬性和盒子模型?！?.盒子模型解析（7分鐘）板書(shū)圖示：繪制圖5.2盒子模型示意圖，標(biāo)注content/padding/border/margin四層。互動(dòng)演示：//實(shí)時(shí)修改邊距值觀察效果@ComponentstructBoxModelDemo{build(){Column(){Text('內(nèi)容區(qū)域').width(100).height(100).backgroundColor(Color.Red).padding(20)//動(dòng)態(tài)修改數(shù)值.margin(30)//動(dòng)態(tài)修改數(shù)值}}}關(guān)鍵強(qiáng)調(diào)：百分比基準(zhǔn)值始終以父組件width為基準(zhǔn)（演示.width('50%')在不同寬度容器中的變化）。3.動(dòng)態(tài)單位深度解析（10分鐘）（1）calc計(jì)算規(guī)范錯(cuò)誤案例演示：.width('calc(100%-30vp)')（強(qiáng)調(diào)空格）正確寫(xiě)法對(duì)比：.width('calc(100%-30vp)')（2）單位混用陷阱//問(wèn)題代碼示例Column(){Text('問(wèn)題示例').width('50%').height(100)//父容器未明確寬度時(shí)百分比失效}（3）資源引用實(shí)戰(zhàn)展示integer.json定義：{"name":"length_100","value":100}調(diào)用演示：.width($r('eger.length_100'))4.案例5-1深度剖析（5分鐘）先構(gòu)建row1（藍(lán)色背景）。添加row2（粉色背景+padding）。最后嵌入row3（橙色背景+size:100%）。二、高級(jí)尺寸控制（30分鐘）1.權(quán)重布局革命（15分鐘）（1）主軸認(rèn)知實(shí)驗(yàn)//主軸方向可視化Column(){Row(){}.layoutWeight(1).backgroundColor(Color.Red)Row(){}.layoutWeight(2).backgroundColor(Color.Blue)}提問(wèn)：“為什么Column里的權(quán)重控制高度，而Row里控制寬度？”。（2）剩余空間計(jì)算步驟1：測(cè)量非權(quán)重組件總寬度（示例中text3的calc(50%+30vp)）.步驟2：父容器寬度-步驟1結(jié)果=剩余空間。步驟3：按權(quán)重比例分配（text1:text2=1:2）。2.約束尺寸三區(qū)間法則（10分鐘）測(cè)試用例width設(shè)置約束范圍最終效果Text130vp100-200vp100vpText2130vp100-200vp130vpText3260vp100-200vp200vp3.案例5-2/5-3聯(lián)動(dòng)教學(xué)（5分鐘）（1）文本截?cái)鄬?duì)照對(duì)比text1/text2/text3在超出約束范圍時(shí)的顯示差異。（2）三列布局debug故意將text3的layoutWeight設(shè)為1，觀察“權(quán)重vs固定尺寸”的沖突現(xiàn)象。三、邊框開(kāi)發(fā)實(shí)戰(zhàn)（20分鐘）1.四向獨(dú)立控制（8分鐘）（1）邊框訓(xùn)練//四邊差異化設(shè)置.border({width:{top:2,bottom:4},color:{left:Color.Red,right:'#00FF00'},style:{top:BorderStyle.Dotted}})（2）書(shū)寫(xiě)順序模擬器演示阿拉伯語(yǔ)環(huán)境下LocalizedEdgeWidths的start/end方向變化。2.圓角極值實(shí)驗(yàn)（7分鐘）（1）極限測(cè)試//圓角半徑超過(guò)高度一半時(shí)Text().height(100).borderRadius(60)//實(shí)際顯示為50（2）動(dòng)態(tài)圓角結(jié)合size屬性實(shí)現(xiàn).borderRadius('calc(50%-10vp)')3.案例5-4終極對(duì)決（5分鐘）屬性鏈?zhǔn)絭s復(fù)合設(shè)置//方法A：鏈?zhǔn)秸{(diào)用.borderWidth(5).borderColor(Color.Blue).borderStyle(BorderStyle.Dashed)//方法B：復(fù)合設(shè)置.border({width:5,color:Color.Blue,style:BorderStyle.Dashed})提問(wèn)：“哪種方式更適合多邊框差異化設(shè)置？”。四、總結(jié)提升（5分鐘）1.口訣百分比→父widthcalc→“左空右空”（運(yùn)算符兩邊空格）權(quán)重→“先固定后分配”2.課程思政精準(zhǔn)案例：展示美團(tuán)購(gòu)物車(chē)邊框1像素差異導(dǎo)致的視覺(jué)失衡對(duì)比圖。工匠精神：分享華為UI規(guī)范中像素級(jí)間距控制要求。XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次13課題背景屬性、顏色漸變屬性班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握ArkUI中5種背景屬性的使用方法。2.理解線(xiàn)性漸變、扇形漸變、徑向漸變的實(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.線(xiàn)性漸變angle方向規(guī)則。3.扇形漸變中心坐標(biāo)計(jì)算。教學(xué)難點(diǎn)1.漸變顏色的百分比位置控制。2.自定義背景組件的@Builder用法。3.三種漸變類(lèi)型的參數(shù)差異。教學(xué)過(guò)程（主要教學(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ì)員頁(yè)面（圖5.11）與漸變頭部（圖5.15）。2.提問(wèn)引導(dǎo)：“信封背景如何實(shí)現(xiàn)？漸變效果對(duì)用戶(hù)體驗(yàn)有何提升？”。3.明確本課目標(biāo)：掌握背景與漸變的四大核心技能。1.背景三要素：-純色背景（backgroundColor）-圖片背景（backgroundImage+ImageRepeat）-自定義組件背景（@Builder+Alignment）2.背景圖片尺寸五模式：-Cover/Contain/Auto/FILL/精確尺寸1.分層實(shí)現(xiàn)神會(huì)員頁(yè)面：-粉紅底層（backgroundColor）-頂部弧線(xiàn)（background+Alignment.Top）-券狀卡片（backgroundImageSize.FILL）2.局部VS全局@Builder差異驗(yàn)證。1.線(xiàn)性漸變：-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ù)記憶口訣：“線(xiàn)性看角度，扇形劃區(qū)域，徑向定圓心”。5'25'20'25'5'課程思政教學(xué)設(shè)計(jì)美學(xué)素養(yǎng)：通過(guò)美團(tuán)漸變?cè)O(shè)計(jì)，說(shuō)明視覺(jué)層次對(duì)情感體驗(yàn)的影響。2.工匠精神：強(qiáng)調(diào)漸變色階的精確分配（溫度計(jì)0.15間隔）。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線(xiàn)作業(yè)。2.基礎(chǔ)作業(yè)：創(chuàng)建局部@Builder弧形背景。3.提升作業(yè)：扇形漸變展示24小時(shí)溫度分布?？偨Y(jié)分析本次課程將通過(guò)案例驅(qū)動(dòng)和梯度式教學(xué)設(shè)計(jì)，幫助學(xué)生系統(tǒng)掌握ArkUI背景屬性與顏色漸變技術(shù)。學(xué)生能夠熟練運(yùn)用backgroundImageSize的四種縮放模式，精準(zhǔn)實(shí)現(xiàn)線(xiàn)性、扇形和徑向漸變效果，并完成美團(tuán)神會(huì)員頁(yè)面級(jí)別的UI還原。課程將重點(diǎn)培養(yǎng)學(xué)生對(duì)商業(yè)級(jí)界面設(shè)計(jì)的理解能力，使其在掌握技術(shù)要點(diǎn)的同時(shí)，建立起規(guī)范的代碼編寫(xiě)習(xí)慣和專(zhuān)業(yè)的審美標(biāo)準(zhǔn)，為后續(xù)復(fù)雜組件開(kāi)發(fā)奠定堅(jiān)實(shí)基礎(chǔ)。教學(xué)詳案（附頁(yè)）一、新課導(dǎo)入（5分鐘）1.情境創(chuàng)設(shè)（1）展示案例：通過(guò)極域課堂系統(tǒng)投屏展示美團(tuán)神會(huì)員頁(yè)面（圖5.11）和漸變頭部設(shè)計(jì)（圖5.15），引導(dǎo)學(xué)生觀察頁(yè)面背景的視覺(jué)層次。（2）提問(wèn)互動(dòng)：“信封背景的立體感是如何實(shí)現(xiàn)的？”?！绊敳繚u變色彩對(duì)用戶(hù)情緒體驗(yàn)有何影響？”。（3）目標(biāo)說(shuō)明：背景三要素（純色/圖片/自定義）。圖片尺寸四枚舉模式差異。三種漸變參數(shù)配置。美團(tuán)案例的組件化實(shí)現(xiàn)。2.知識(shí)銜接回顧上節(jié)課邊框?qū)傩?，引出背景作為UI設(shè)計(jì)的另一重要維度：“如果說(shuō)邊框是組件的骨架，那么背景就是組件的皮膚”。二、背景屬性精講（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：通過(guò)修改案例5-6演示調(diào)用差異，強(qiáng)調(diào)作用域限制。（2）疊加優(yōu)先級(jí)：通過(guò)透明色實(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})//頂部弧線(xiàn)（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.線(xiàn)性漸變溫度計(jì)實(shí)現(xiàn)角度校準(zhǔn)：通過(guò)鐘表盤(pá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)系。比例控制：通過(guò)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)地平線(xiàn)效果。自然過(guò)渡：首尾天藍(lán)色模擬天空背景。radius:'100%'//全屏輻射范圍五、總結(jié)提升（5分鐘）1.記憶口訣“三背景（色/圖/組件），五模式（Cover/Contain/FILL/Auto/精確），漸變?nèi)兀ň€(xiàn)性看角度、扇形劃區(qū)域、徑向定圓心）”。2.拓展思考如何用徑向漸變實(shí)現(xiàn)iPhone的景深壁紙效果？XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次14課題形狀裁切屬性及動(dòng)態(tài)交互屬性班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握clipShape和maskShape四種形狀裁切方法。2.理解opacity、visibility、enabled三種交互屬性的特性。3.熟悉SVG路徑命令的基本語(yǔ)法。能力目標(biāo)：1.能實(shí)現(xiàn)美團(tuán)頭像圓形裁切效果。2.能完成透明度漸變交互效果。3.會(huì)使用顯隱屬性控制組件狀態(tài)。素質(zhì)目標(biāo)：1.培養(yǎng)UI細(xì)節(jié)處理能力。2.建立交互設(shè)計(jì)思維。3.強(qiáng)化代碼規(guī)范性意識(shí)。教學(xué)重點(diǎn)1.CircleShape與EllipseShape的參數(shù)區(qū)別。2.opacity屬性值的疊加計(jì)算。3.visibility三種狀態(tài)的實(shí)際應(yīng)用場(chǎng)景。教學(xué)難點(diǎn)1.PathShape的SVG路徑繪制。2.父/子組件opacity的疊加效果。3.enabled狀態(tài)的視覺(jué)反饋優(yōu)化。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、形狀裁切三、動(dòng)態(tài)交互四、綜合實(shí)踐五、總結(jié)提升1.展示美團(tuán)個(gè)人中心頁(yè)面，分析頭像裁切、神券顯隱等效果。（案例分析法）1.演示案例5-10的四種裁切效果。2.重點(diǎn)講解：-CircleShape直徑取值規(guī)則-SVG路徑命令解析（M/L/Z）3.錯(cuò)誤示范：缺少必要參數(shù)的情況。（演示法，對(duì)比教學(xué)法）1.案例5-11透明度漸變效果-數(shù)值范圍演示（0-1）-父子組件疊加計(jì)算2.案例5-12顯隱屬性對(duì)比-Hidden與None的區(qū)別3.案例5-13禁用狀態(tài)優(yōu)化-文本輸入框的特殊處理。（任務(wù)驅(qū)動(dòng)法，小組討論法）分組任務(wù)：1.復(fù)現(xiàn)美團(tuán)頭像裁切+陰影。2.制作可切換顯隱的“神券”組件。3.創(chuàng)建帶禁用狀態(tài)的提交按鈕。（項(xiàng)目教學(xué)法）1.裁切屬性選擇口訣：“圓形橢圓看直徑，矩形記得加圓角，復(fù)雜形狀用路徑”2.交互屬性記憶卡：opacity：0透明1不透明visibility：占位/不占位enabled：交互開(kāi)關(guān)5'25'30'15'5'課程思政教學(xué)設(shè)計(jì)1.美學(xué)素養(yǎng)：通過(guò)美團(tuán)漸變?cè)O(shè)計(jì)，說(shuō)明視覺(jué)層次對(duì)情感體驗(yàn)的影響。2.工匠精神：強(qiáng)調(diào)漸變色階的精確分配（溫度計(jì)0.15間隔）。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線(xiàn)作業(yè)。2.基礎(chǔ)作業(yè)：（1）使用RectShape制作圓角卡片（radius=8）。（2）實(shí)現(xiàn)透明度從0.3到1的漸變效果。（3）提交顯隱屬性對(duì)比截圖。3.提升作業(yè)：（1）用PathShape繪制五角星裁切。（2）研究美團(tuán)酒店頁(yè)面的動(dòng)態(tài)透明度變化?？偨Y(jié)分析本次課程通過(guò)美團(tuán)真實(shí)案例串聯(lián)知識(shí)點(diǎn)，學(xué)生將掌握形狀裁切的核心參數(shù)配置，理解三種交互屬性的應(yīng)用場(chǎng)景，并能完成商業(yè)級(jí)UI效果的實(shí)現(xiàn)。重點(diǎn)培養(yǎng)對(duì)組件狀態(tài)控制的精準(zhǔn)把握能力，為后續(xù)動(dòng)態(tài)界面開(kāi)發(fā)奠定基礎(chǔ)。

教學(xué)詳案（附頁(yè)）一、案例導(dǎo)入（5分鐘）【教師活動(dòng)】1.展示美團(tuán)App個(gè)人中心頁(yè)面截圖（圖5.19），引導(dǎo)學(xué)生觀察“大家注意看頭像區(qū)域是什么形狀？陰影效果如何增強(qiáng)視覺(jué)層次？”?！绊?yè)面中各個(gè)模塊的邊角處理有什么共同特點(diǎn)？”。2.動(dòng)態(tài)演示美團(tuán)酒店頁(yè)面上滑時(shí)標(biāo)題欄透明度變化（模擬圖5.21）“觀察透明度變化如何營(yíng)造頁(yè)面層級(jí)感？”。3.對(duì)比展示"神券"領(lǐng)取前后的界面變化（圖5.23）“未領(lǐng)取時(shí)組件如何隱藏？領(lǐng)取后如何顯示？”?！緦W(xué)生活動(dòng)】分組討論：列舉生活中類(lèi)似的UI效果（如微信頭像圓形裁切、支付寶按鈕禁用狀態(tài)）。二、形狀裁切（25分鐘）1.基礎(chǔ)概念講解（5分鐘）對(duì)比borderRadius與clipShape。//傳統(tǒng)圓角實(shí)現(xiàn).borderRadius(50)//形狀裁剪實(shí)現(xiàn).clipShape(newCircleShape({width:100,height:100}))強(qiáng)調(diào)核心差異：clipShape支持非對(duì)稱(chēng)裁剪和復(fù)雜路徑。2.四種裁切類(lèi)型演示（12分鐘）(1)圓形裁切關(guān)鍵代碼。.clipShape(newCircleShape({width:100,height:60}))//實(shí)際直徑取60常見(jiàn)錯(cuò)誤示范：//錯(cuò)誤：缺少height參數(shù).clipShape(newCircleShape({width:100}))(2)橢圓裁切參數(shù)關(guān)系演示。//width=height時(shí)為圓形newEllipseShape({width:90,height:90})//標(biāo)準(zhǔn)橢圓newEllipseShape({width:90,height:60})(3)矩形裁切圓角特效實(shí)踐。//美團(tuán)卡片標(biāo)準(zhǔn)圓角newRectShape({width:300,height:200,radius:8})(4)路徑裁切SVG指令分解教學(xué)。"M1000"http://移動(dòng)到(100,0)"L200240"http://畫(huà)線(xiàn)到(200,240)"L0240"http://畫(huà)線(xiàn)到(0,240)"Z"http://閉合路徑實(shí)時(shí)演示：使用https://www.svgviewer.dev/在線(xiàn)工具生成路徑3.maskShape對(duì)比教學(xué)（8分鐘）遮罩效果對(duì)比實(shí)驗(yàn)。//普通裁切.clipShape(newCircleShape(...))//帶灰色遮罩.maskShape(newCircleShape(...).fill('#999999'))學(xué)生實(shí)操：給美團(tuán)頭像添加10%透明度的黑色遮罩三、動(dòng)態(tài)交互（30分鐘）1.opacity屬性深度解析（10分鐘）數(shù)值范圍實(shí)驗(yàn)：//透明度梯度測(cè)試Column(){Text().opacity(0)//完全透明Text().opacity(0.15)//美團(tuán)推薦漸變間隔Text().opacity(0.5)Text().opacity(1)//完全不透明}父子組件疊加計(jì)算案例：Column(){//父組件opacity=0.8Row(){//子組件實(shí)際opacity=0.8*0.3=0.24Text().opacity(0.3)}.opacity(0.8)}2.visibility屬性對(duì)比（10分鐘）三種狀態(tài)實(shí)物類(lèi)比：Visible→正常站立的人（可見(jiàn)且占空間）Hidden→隱身人（不可見(jiàn)但占空間）None→不存在（完全移除）關(guān)鍵代碼：//美團(tuán)神券領(lǐng)取前Coupon().visibility(Visibility.None)//領(lǐng)取后Coupon().visibility(Visibility.Visible)3.enabled狀態(tài)優(yōu)化（10分鐘）禁用狀態(tài)設(shè)計(jì)規(guī)范：//基礎(chǔ)禁用Button('提交').enabled(false)//優(yōu)化方案Button('提交').enabled(false).opacity(0.6).backgroundColor('#CCCCCC')分組討論：對(duì)比美團(tuán)、淘寶禁用按鈕的視覺(jué)處理差異。四、綜合實(shí)踐（15分鐘）1.頭像裁切任務(wù)要求：實(shí)現(xiàn)直徑80vp的圓形裁切；添加5vp模糊陰影。參考代碼：Image($r('app.media.avatar')).clipShape(newCircleShape({width:80,height:80})).shadow({radius:5,color:'#20000000'})2.神券顯隱任務(wù)交互流程：@StateisClaimed:boolean=false...Button('領(lǐng)取神券').onClick(()=>{this.isClaimed=true})Coupon().visibility(this.isClaimed?Visibility.Visible:Visibility.None)3.提交按鈕任務(wù)狀態(tài)管理：@StateinputText:string=''...TextInput({placeholder:'輸入反饋'}).onChange((value)=>{this.inputText=value})Button('提交').enabled(this.inputText.length>0).stateEffect(...)【指導(dǎo)要點(diǎn)】巡回檢查SVG路徑命令格式。糾正常見(jiàn)的opacity疊加計(jì)算錯(cuò)誤。演示如何用DevTools查看組件布局占位。五、總結(jié)提升（5分鐘）1.知識(shí)圖譜梳理（1）形狀裁切├─圓形：取width/height較小值├─橢圓：獨(dú)立控制橫縱軸├─矩形：必設(shè)radius圓角└─路徑：SVG命令組合（2）交互屬性├─opacity：0(透明)~1(不透明)├─visibility：占位/不占位└─enabled：交互開(kāi)關(guān)2.記憶口訣“裁切三要素：形狀、尺寸、參數(shù)”?！敖换ト隣顟B(tài)：可見(jiàn)、可操作、可感知”。XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次15課題手勢(shì)的綁定以及點(diǎn)擊手勢(shì)和長(zhǎng)按手勢(shì)班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握gesture和parallelGesture綁定手勢(shì)的區(qū)別與使用場(chǎng)景。2.理解TapGesture點(diǎn)擊手勢(shì)的參數(shù)配置與事件處理。3.掌握LongPressGesture長(zhǎng)按手勢(shì)的參數(shù)配置與回調(diào)方法。能力目標(biāo)：1.能夠正確使用gesture和parallelGesture實(shí)現(xiàn)父子組件手勢(shì)綁定。2.能夠?qū)崿F(xiàn)單次/多次點(diǎn)擊手勢(shì)交互功能。3.能夠?qū)崿F(xiàn)長(zhǎng)按手勢(shì)及其回調(diào)事件處理。素質(zhì)目標(biāo)：1.培養(yǎng)交互設(shè)計(jì)的邏輯思維能力。2.樹(shù)立規(guī)范編碼意識(shí)，注重手勢(shì)事件處理的完整性。3.培養(yǎng)用戶(hù)體驗(yàn)優(yōu)化的職業(yè)素養(yǎng)。教學(xué)重點(diǎn)1.gesture與parallelGesture的mask參數(shù)區(qū)別。2.TapGesture的count參數(shù)配置。3.LongPressGesture的repeat和duration參數(shù)。教學(xué)難點(diǎn)1.父子組件手勢(shì)事件沖突處理。2.長(zhǎng)按手勢(shì)多回調(diào)方法的理解與應(yīng)用。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、手勢(shì)綁定基礎(chǔ)三、點(diǎn)擊手勢(shì)實(shí)現(xiàn)四、長(zhǎng)按手勢(shì)實(shí)現(xiàn)五、總結(jié)提升1.展示美團(tuán)App雙擊回頂部的交互案例。2.分析常見(jiàn)應(yīng)用中的手勢(shì)操作場(chǎng)景。（案例分析法）1.講解gesture方法及mask參數(shù)-Normal與IgnoreInternal區(qū)別2.演示父子組件手勢(shì)沖突案例。3.引入parallelGesture解決方案。（對(duì)比教學(xué)法，代碼實(shí)時(shí)演示，錯(cuò)誤示范法）1.TapGesture參數(shù)講解。-count參數(shù)（單/雙擊）-fingers參數(shù)2.對(duì)比onClick簡(jiǎn)化方法。3.實(shí)戰(zhàn)：實(shí)現(xiàn)圖片雙擊放大功能。（任務(wù)驅(qū)動(dòng)法，案例教學(xué)法，小組協(xié)作）1.LongPressGesture參數(shù)解析-duration最小持續(xù)時(shí)間-repeat連續(xù)觸發(fā)2.三種回調(diào)方法演示-onAction-onActionEnd-onActionCancel3.實(shí)戰(zhàn)：長(zhǎng)按計(jì)數(shù)器實(shí)現(xiàn)。（代碼解析法，實(shí)操演示法，互動(dòng)問(wèn)答）1.知識(shí)要點(diǎn)回顧-兩種綁定方式區(qū)別-點(diǎn)擊與長(zhǎng)按核心參數(shù)2.布置分層作業(yè)。8'20'22'25'5'課程思政教學(xué)設(shè)計(jì)1.工匠精神：在手勢(shì)參數(shù)配置環(huán)節(jié)強(qiáng)調(diào)精確到毫秒的專(zhuān)業(yè)要求。2.創(chuàng)新意識(shí)：通過(guò)手勢(shì)組合應(yīng)用案例激發(fā)創(chuàng)新思維。3.用戶(hù)體驗(yàn)：培養(yǎng)“以用戶(hù)為中心”的設(shè)計(jì)理念。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線(xiàn)作業(yè)。2.基礎(chǔ)作業(yè)：（1）創(chuàng)建一個(gè)包含父子組件的界面，分別使用gesture和parallelGesture實(shí)現(xiàn)點(diǎn)擊事件（2）實(shí)現(xiàn)雙擊放大圖片功能。（3）實(shí)現(xiàn)長(zhǎng)按計(jì)數(shù)功能。3.提升作業(yè)：（1）研究SwipeGesture滑動(dòng)手勢(shì)的實(shí)現(xiàn)方式。（2）嘗試組合使用多種手勢(shì)實(shí)現(xiàn)復(fù)雜交互。總結(jié)分析本次課程通過(guò)美團(tuán)App手勢(shì)操作真實(shí)案例串聯(lián)知識(shí)點(diǎn)，學(xué)生將掌握gesture和parallelGesture兩種綁定方式的核心區(qū)別，理解點(diǎn)擊手勢(shì)和長(zhǎng)按手勢(shì)的參數(shù)配置要點(diǎn)，并能實(shí)現(xiàn)商業(yè)級(jí)應(yīng)用中的常見(jiàn)手勢(shì)交互效果。重點(diǎn)培養(yǎng)對(duì)手勢(shì)事件沖突處理的精準(zhǔn)把控能力，為后續(xù)復(fù)雜交互開(kāi)發(fā)奠定基礎(chǔ)。

教學(xué)詳案（附頁(yè)）一、案例導(dǎo)入（8分鐘）1.情境創(chuàng)設(shè)（3分鐘）【教師操作】展示美團(tuán)APP訂單頁(yè)面（提前錄制操作視頻）。演示常規(guī)滑動(dòng)瀏覽訂單列表。重點(diǎn)演示“雙擊頂部區(qū)域返回最新訂單”功能?！咎釂?wèn)引導(dǎo)】“這個(gè)交互使用了什么手勢(shì)？為什么設(shè)計(jì)雙擊而不是單擊？”。2.案例分析（5分鐘）【討論題】1.微信中有哪些常見(jiàn)手勢(shì)操作？2.抖音的“點(diǎn)贊”手勢(shì)與“長(zhǎng)按”手勢(shì)的區(qū)別？【教師總結(jié)】手勢(shì)交互的優(yōu)勢(shì)：提升操作效率（如雙擊>二次點(diǎn)擊）；增強(qiáng)用戶(hù)體驗(yàn)（符合自然交互）。二、手勢(shì)綁定基礎(chǔ)（20分鐘）1.gesture方法詳解（12分鐘）核心概念//標(biāo)準(zhǔn)語(yǔ)法結(jié)構(gòu).gesture(GestureType,//手勢(shì)類(lèi)型GestureMask?//事件屏蔽規(guī)則)mask參數(shù)對(duì)比實(shí)驗(yàn)//實(shí)驗(yàn)1：父組件mask=Normal（默認(rèn)）Column().gesture(TapGesture(),GestureMask.Normal){Text().gesture(TapGesture())//僅子組件響應(yīng)}//實(shí)驗(yàn)2：父組件mask=IgnoreInternalColumn().gesture(TapGesture(),GestureMask.IgnoreInternal){Text().gesture(TapGesture())//僅父組件響應(yīng)}2.parallelGesture方法（8分鐘）（1）與gesture的核心區(qū)別特性pestureparallelGesture事件響應(yīng)順序二選一先后響應(yīng)適合場(chǎng)景獨(dú)立操作復(fù)合交互（2）電商應(yīng)用案例List(){ForEach([122,211,113],(item:number,i)=>{ListItem(){Text(''+item).width(100).height(100)}.gesture(TapGesture().onAction(()=>{//商品點(diǎn)擊}))})}.parallelGesture(SwipeGesture().onAction(()=>{//列表側(cè)滑}))三、點(diǎn)擊手勢(shì)實(shí)現(xiàn)（22分鐘）1.TapGesture參數(shù)解析（10分鐘）（1）參數(shù)組合實(shí)驗(yàn)countfingers效果描述11標(biāo)準(zhǔn)單擊21雙擊12雙指單擊（2）美團(tuán)回頂功能實(shí)現(xiàn)@Statescale:number=1Text("頂部區(qū)域").gesture(TapGesture({count:2}).onAction(()=>{animateTo({duration:300},()=>{this.scale=1.5//視覺(jué)反饋scrollToIndex(0)//滾動(dòng)到頂部})}))2.與onClick對(duì)比（4分鐘）開(kāi)發(fā)建議：簡(jiǎn)單點(diǎn)擊使用onClick進(jìn)行簡(jiǎn)化，需要雙擊/多指等復(fù)雜手勢(shì)使用TapGesture。3.實(shí)戰(zhàn)訓(xùn)練（8分鐘）任務(wù)：實(shí)現(xiàn)圖片查看器的雙擊縮放。關(guān)鍵代碼提示：@Statescale:number=1Image($r("app.media.pic")).gesture(TapGesture({count:2}).onAction(()=>{this.scale=this.scale>1?1:2}))四、長(zhǎng)按手勢(shì)實(shí)現(xiàn)（25分鐘）1.參數(shù)深度解析（10分鐘）（1）duration參數(shù)實(shí)驗(yàn)//不同時(shí)長(zhǎng)對(duì)比LongPressGesture({duration:1000})//1秒觸發(fā)LongPressGesture({duration:200})//200ms觸發(fā)（可能誤觸）（2）repeat機(jī)制演示@Statecount:number=0Text("長(zhǎng)按計(jì)數(shù)").gesture(LongPressGesture({repeat:true}).onAction(()=>{this.count++//持續(xù)觸發(fā)}))2.三大回調(diào)實(shí)戰(zhàn)（9分鐘）（1）回調(diào)流程圖（2）消息撤回案例.gesture(LongPressGesture().onAction(()=>{/*顯示撤回按鈕*/}).onActionEnd(()=>{/*2秒后自動(dòng)隱藏*/}).onActionCancel(()=>{/*立即隱藏*/}))3.綜合訓(xùn)練（6分鐘）任務(wù)：實(shí)現(xiàn)長(zhǎng)按計(jì)數(shù)器擴(kuò)展要求：添加震動(dòng)反饋（需導(dǎo)入import{vibrator}from'@kit.SensorServiceKit'）五、總結(jié)提升（15分鐘）1.知識(shí)圖譜（7分鐘）2.課程思政（8分鐘）工匠精神：演示微信消息撤回功能的精確時(shí)長(zhǎng)控制（2±0.1秒）。用戶(hù)體驗(yàn)：分析抖音“長(zhǎng)按暫?！迸c“雙擊點(diǎn)贊”的差異化設(shè)計(jì)。XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開(kāi)發(fā)課次16課題組合手勢(shì)及綜合案例：隨手而動(dòng)的小球班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握GestureGroup組合手勢(shì)的三種識(shí)別模式（Sequence/Parallel/Exclusive）。2.理解美團(tuán)商家列表案例中互斥手勢(shì)的實(shí)現(xiàn)原理。3.掌握onTouch事件處理與組件動(dòng)態(tài)定位技術(shù)。能力目標(biāo)：1.能夠?qū)崿F(xiàn)點(diǎn)擊/長(zhǎng)按互斥識(shí)別的商業(yè)級(jí)交互效果。2.能夠完成隨手指移動(dòng)的漸變小球綜合案例。3.能夠調(diào)試手勢(shì)事件中的坐標(biāo)參數(shù)。素質(zhì)目標(biāo)：1.培養(yǎng)復(fù)雜交互場(chǎng)景的分析設(shè)計(jì)能力。2.樹(shù)立移動(dòng)端精準(zhǔn)觸控的工程規(guī)范意識(shí)。3.培養(yǎng)從商業(yè)案例中提煉技術(shù)要點(diǎn)的職業(yè)素養(yǎng)。教學(xué)重點(diǎn)1.Exclusive模式在美團(tuán)案例中的應(yīng)用。2.onTouch事件三種狀態(tài)（Down/Move/Up）處理。3.小球定位與windowX/windowY坐標(biāo)關(guān)聯(lián)。教學(xué)難點(diǎn)1.組合手勢(shì)模式選擇的場(chǎng)景判斷。2.觸摸事件對(duì)象的結(jié)構(gòu)解析。3.動(dòng)態(tài)樣式與狀態(tài)變量的聯(lián)動(dòng)控制。教學(xué)過(guò)程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、組合手勢(shì)精講三、小球案例實(shí)施四、綜合訓(xùn)練五、總結(jié)提升1.演示美團(tuán)商家列表原型（圖5.34）。2.分解點(diǎn)擊查看/長(zhǎng)按菜單的交互需求。（案例分析法）1.GestureGroup三大模式對(duì)比：-Sequence（訂單步驟驗(yàn)證場(chǎng)景）-Parallel（圖片縮放+旋轉(zhuǎn)場(chǎng)景）-Exclusive（美團(tuán)案例場(chǎng)景）2.代碼解析GestureGroupExample.ets：-promptAction彈窗配置要點(diǎn)-互斥邏輯的onAction分離（對(duì)比教學(xué)法，代碼逐行調(diào)試）1.組件技術(shù)分解：-CircleShape裁切原理-linearGradient參數(shù)調(diào)試2.事件處理精講：-TouchType三種狀態(tài)機(jī)-windowX/Y與組件定位關(guān)聯(lián)3.實(shí)時(shí)調(diào)試：-console.log輸出事件結(jié)構(gòu)-拖拽邊界值處理。（任務(wù)驅(qū)動(dòng)法，實(shí)時(shí)編碼演示，調(diào)試工具使用）1.分組實(shí)現(xiàn)美團(tuán)案例增強(qiáng)版：-添加雙擊收藏功能-長(zhǎng)按菜單項(xiàng)事件處理2.小球案例優(yōu)化：-拖動(dòng)時(shí)半徑變化效果-抬起時(shí)位移動(dòng)畫(huà)。（小組協(xié)作開(kāi)發(fā)，效果對(duì)比評(píng)審）1.知識(shí)圖譜梳理：-組合手勢(shì)選擇決策樹(shù)-觸摸事件處理流程圖2.行業(yè)應(yīng)用延伸：-高德地圖手勢(shì)交互解析-京東商品長(zhǎng)按預(yù)覽實(shí)現(xiàn)。8'25'20'20'7'課程思政教學(xué)設(shè)計(jì)1.工匠精神：在坐標(biāo)處理環(huán)節(jié)強(qiáng)調(diào)像素級(jí)精準(zhǔn)要求。2.創(chuàng)新意識(shí)：通過(guò)商業(yè)案例反向工程激發(fā)創(chuàng)新思維。3.合規(guī)意識(shí)：強(qiáng)調(diào)用戶(hù)操作數(shù)據(jù)的安全處理規(guī)范。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線(xiàn)作業(yè)。2.基礎(chǔ)作業(yè)：（1）實(shí)現(xiàn)商品列表項(xiàng)（點(diǎn)擊查看詳情/長(zhǎng)按彈出菜單）。（2）修改小球案例使其在移動(dòng)時(shí)改變顏色。3.提升作業(yè)：（1）嘗試用Parallel模式實(shí)現(xiàn)雙擊+長(zhǎng)按組合。（2）為小球添加移動(dòng)軌跡動(dòng)畫(huà)效果。（3）實(shí)現(xiàn)雙擊圖片放大和復(fù)原效果?？偨Y(jié)分析本次課程通過(guò)美團(tuán)外賣(mài)商家列表和動(dòng)態(tài)小球兩個(gè)商業(yè)案例，系統(tǒng)講解了HarmonyOS組合手勢(shì)開(kāi)發(fā)技術(shù)，使學(xué)生掌握了GestureGroup三種識(shí)別模式的應(yīng)用場(chǎng)景和onTouch事件處理機(jī)制，培養(yǎng)了商業(yè)級(jí)交互實(shí)現(xiàn)能力，為后續(xù)復(fù)雜動(dòng)畫(huà)和自定義組件開(kāi)發(fā)奠定基礎(chǔ)。。教學(xué)詳案（附頁(yè)）一、案例導(dǎo)入（8分鐘）1.商業(yè)案例演示（3分鐘）教師操作：全屏展示美團(tuán)外賣(mài)商家列表頁(yè)面原型（圖5.34）。交互演示：點(diǎn)擊“商家A”進(jìn)入詳情頁(yè)面。長(zhǎng)按“商家B”展示“找相似/不喜歡”蒙版。提問(wèn)引導(dǎo)：“大家注意到這兩種交互在技術(shù)實(shí)現(xiàn)上有什么共同點(diǎn)？”。2.需求分解（5分鐘）（1）同一組件（Row）需要響應(yīng)：1.單擊→進(jìn)入店鋪2.長(zhǎng)按→彈出菜單（2）矛盾點(diǎn)分析：傳統(tǒng)方案問(wèn)題：?jiǎn)?/p>