XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次12課題尺寸屬性、邊框?qū)傩园嗉壥谡n地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識目標(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ù)合樣式開發(fā)。素質(zhì)目標(biāo)：1.培養(yǎng)“差之毫厘，謬以千里”的精準(zhǔn)設(shè)計(jì)意識。2.具備較高的審美能力。教學(xué)重點(diǎn)1.百分比與calc動態(tài)計(jì)算（width('calc(10%+30vp)')）。2.權(quán)重分配邏輯。3.邊框復(fù)合設(shè)置（borderOptions）。教學(xué)難點(diǎn)1.約束尺寸優(yōu)先級規(guī)則。2.本地化邊距適配（LocalizedPadding）。3.多屬性鏈?zhǔn)秸{(diào)用疊加效果。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動/學(xué)生活動）教學(xué)用時(shí)(分鐘)一、尺寸體系精講二、高級尺寸控制三、邊框開發(fā)實(shí)戰(zhàn)四、總結(jié)提升1.盒子模型分層解析（圖5.2）。2.動態(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)先級規(guī)則（圖5.6）3.案例5-2/5-3：-文本截?cái)嗫刂疲▓D5.7）-三列權(quán)重布局（圖5.8）1.四向差異化配置：-borderWidth分邊設(shè)置-borderColor多色方案2.圓角與樣式：-borderRadius角半徑極值規(guī)則-虛線/點(diǎ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.精益求精：通過calc運(yùn)算符空格規(guī)范，強(qiáng)調(diào)代碼嚴(yán)謹(jǐn)性。2.人文關(guān)懷：結(jié)合美團(tuán)界面設(shè)計(jì)，說明細(xì)節(jié)體驗(yàn)對用戶的重要性。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）復(fù)現(xiàn)案例5-1內(nèi)外邊距疊加效果。（2）實(shí)現(xiàn)三色邊框（上紅右藍(lán)下綠左黃）。3.提升作業(yè)：開發(fā)自適應(yīng)卡片：-最小寬度120vp，最大占屏70%-圓角半徑隨尺寸動態(tài)變化總結(jié)分析本課以美團(tuán)界面（圖5.1/5.9）為場景錨點(diǎn)，采用“盒子模型→動態(tài)計(jì)算→權(quán)重約束→邊框合成”四階遞進(jìn)框架，通過五大核心案例（5-1至5-4）貫通尺寸與邊框知識體系：借MarginPaddingExample具象化padding/margin疊加效應(yīng)（強(qiáng)化圖5.3視覺分層）；用ConstraintExample實(shí)證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è)計(jì)哲學(xué)）。全程貫穿“差之毫厘，謬以千里”的工程準(zhǔn)則，在calc空格校驗(yàn)、圓角極值控制等細(xì)節(jié)處深化精準(zhǔn)意識。教學(xué)詳案（附頁）一、尺寸體系精講（25分鐘）1.導(dǎo)入環(huán)節(jié)（3分鐘）展示美團(tuán)App主頁截圖（圖5.1），提問：“同學(xué)們注意到這個(gè)界面由哪些區(qū)域組成？為什么搜索框和功能入口的間距看起來這么舒適？”。引出盒子模型概念：“這些精妙的布局效果，都源于我們今天要學(xué)習(xí)的尺寸屬性和盒子模型。”2.盒子模型解析（7分鐘）板書圖示：繪制圖5.2盒子模型示意圖，標(biāo)注content/padding/border/margin四層?；友菔荆?/實(shí)時(shí)修改邊距值觀察效果@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計(jì)算規(guī)范錯誤案例演示：.width('calc(100%-30vp)')（強(qiáng)調(diào)空格）正確寫法對比：.width('calc(100%-30vp)')（2）單位混用陷阱//問題代碼示例Column(){Text('問題示例').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%）。二、高級尺寸控制（30分鐘）1.權(quán)重布局革命（15分鐘）（1）主軸認(rèn)知實(shí)驗(yàn)//主軸方向可視化Column(){Row(){}.layoutWeight(1).backgroundColor(Color.Red)Row(){}.layoutWeight(2).backgroundColor(Color.Blue)}提問：“為什么Column里的權(quán)重控制高度，而Row里控制寬度？”。（2）剩余空間計(jì)算步驟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）文本截?cái)鄬φ諏Ρ萾ext1/text2/text3在超出約束范圍時(shí)的顯示差異。（2）三列布局debug故意將text3的layoutWeight設(shè)為1，觀察“權(quán)重vs固定尺寸”的沖突現(xiàn)象。三、邊框開發(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）書寫順序模擬器演示阿拉伯語環(huán)境下LocalizedEdgeWidths的start/end方向變化。2.圓角極值實(shí)驗(yàn)（7分鐘）（1）極限測試//圓角半徑超過高度一半時(shí)Text().height(100).borderRadius(60)//實(shí)際顯示為50（2）動態(tài)圓角結(jié)合size屬性實(shí)現(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:Col