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

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

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