階之道（18）：AttributeModifier 動(dòng)態(tài)樣式邊界——為啥當(dāng)前版本報(bào)錯(cuò)+@Extend 替代正解)
ArkTS 進(jìn)階之道18AttributeModifier 動(dòng)態(tài)樣式邊界——為啥當(dāng)前版本報(bào)錯(cuò)Extend 替代正解本文是「ArkTS 進(jìn)階之道」系列第 18 篇續(xù)「ArkUI 組件設(shè)計(jì)」階段深水區(qū)。上三篇講屬性綁定復(fù)用Builder 綁渲染樹節(jié)點(diǎn)篇 63 BuilderParam 綁參數(shù)槽篇 64 Styles 綁通用屬性篇 65 Extend 綁專屬屬性槽參數(shù)篇 66。本文講動(dòng)態(tài)樣式邊界AttributeModifier 荬飾器綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯——根因在綁可導(dǎo)出樣式類屬性槽不是靜態(tài)綁屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment子類賦值 AttributeModifier 屬性槽不被支持正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式。一、開篇AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器你寫 TypeScript/React 時(shí)動(dòng)態(tài)樣式擴(kuò)展是「魔法」React 用 styled-components 動(dòng)態(tài)樣式 / CSS-in-JS 收可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯// React 用 styled-components 收可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯 class MyTextStyleModifier { private size: number private color: string private isBold: boolean constructor(size: number, color: string, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormal(): React.CSSProperties { ← 可導(dǎo)出樣式類多態(tài)方法正常態(tài) return { fontSize: this.size, color: this.color, fontWeight: this.isBold ? bold : normal } } applyPressed(): React.CSSProperties { ← 多態(tài)方法按壓態(tài)變色 return { backgroundColor: #e0e0e0 } } } function Component() { const modifier new MyTextStyleModifier(16, #dc2626, true) return Text style{modifier.applyNormal()}動(dòng)態(tài)樣式/Text } // React 用可導(dǎo)出樣式類多態(tài)方法業(yè)務(wù)邏輯收動(dòng)態(tài)樣式是返值收值魔法你寫鴻蒙 ArkTS 時(shí)AttributeModifier綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯——不用返樣式對(duì)象當(dāng)前版本報(bào)錯(cuò)正解 Extend 替代// ? ArkTS AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { size: number color: ResourceColor isBold: boolean constructor(size: number, color: ResourceColor, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize this.size ← 報(bào) arkts-no-method-reassignment當(dāng)前版本不支持 attr.fontColor this.color ← 報(bào) arkts-no-method-reassignment當(dāng)前版本不支持 } applyPressedAttribute(attr: TextAttribute): void { attr.backgroundColor #e0e0e0 ← 報(bào) arkts-no-method-reassignment多態(tài)樣式不被支持 } } Entry Component struct Index { build() { Column() { Text(動(dòng)態(tài)樣式) .attributeModifier(new MyTextStyleModifier(16, #dc2626, true)) ← 報(bào)錯(cuò)不能跑 } } } // AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯當(dāng)前版本報(bào)錯(cuò)arkts-no-method-reassignment魔法 vs 荬飾器的區(qū)別React 把動(dòng)態(tài)樣式擴(kuò)展當(dāng)可導(dǎo)出樣式類收值返值收值魔法ArkTS 把 AttributeModifier 當(dāng)「綁可導(dǎo)出樣式類多態(tài)荬飾器」不收值綁可導(dǎo)出樣式類多態(tài)方法業(yè)務(wù)邏輯。當(dāng)前版本報(bào)arkts-no-method-reassignment子類賦值 AttributeModifier 屬性槽不被支持正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式。二、根因AttributeModifier 的可導(dǎo)出樣式類綁定多態(tài)機(jī)制鴻蒙 ArkUI 的 AttributeModifier 是可導(dǎo)出樣式類綁定多態(tài)——編譯期把 AttributeModifier 子類綁成可導(dǎo)出樣式類鏈?zhǔn)秸{(diào)用嵌樣式類復(fù)用專屬屬性多態(tài)樣式applyNormal/applyPressed 等多態(tài)方法業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不是靜態(tài)綁屬性。機(jī)制 1AttributeModifier 編譯期綁可導(dǎo)出樣式類——不是靜態(tài)綁屬性AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類——把 AttributeModifier 子類編成可導(dǎo)出樣式類跨文件復(fù)用不是靜態(tài)綁的屬性// ? AttributeModifier 編譯期綁可導(dǎo)出樣式類當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { size: number color: ResourceColor isBold: boolean constructor(size: number, color: ResourceColor, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize this.size ← 報(bào) arkts-no-method-reassignment綁樣式類屬性槽不被支持 } } Entry Component struct Index { build() { Column() { Text(動(dòng)態(tài)樣式) .attributeModifier(new MyTextStyleModifier(16, #dc2626, true)) // 編譯期綁可導(dǎo)出樣式類跨文件復(fù)用不是靜態(tài)綁屬性 } } } // 編譯期AttributeModifier 子類綁成可導(dǎo)出樣式類可跨文件 export/import 復(fù)用 // 鏈?zhǔn)秸{(diào)用.attributeModifier(new ...) 嵌樣式類實(shí)例綁組件不返值 // 報(bào)錯(cuò)根因當(dāng)前版本子類賦值 AttributeModifier 屬性槽報(bào) arkts-no-method-reassignment編譯期綁可導(dǎo)出樣式類AttributeModifierMyTextStyleModifier荬飾器編譯期把子類綁成可導(dǎo)出樣式類——可跨文件 export/import 復(fù)用不像 Styles/Extend 全局定義。當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。機(jī)制 2多態(tài)樣式方法綁定——applyNormal/applyPressed 多態(tài)調(diào)AttributeModifier 荬飾器綁多態(tài)樣式方法——applyNormalAttribute正常態(tài)/applyPressedAttribute按壓態(tài)/applyFocusedAttribute聚焦態(tài)等多態(tài)方法依據(jù)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)// ? AttributeModifier 綁多態(tài)樣式方法當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 16 ← 正常態(tài)字號(hào) 16多態(tài)方法 } applyPressedAttribute(attr: TextAttribute): void { attr.backgroundColor #e0e0e0 ← 按壓態(tài)背景色變多態(tài)方法 } applyFocusedAttribute(attr: TextAttribute): void { attr.backgroundColor #fee ← 聚焦態(tài)背景色變多態(tài)方法 } } // 多態(tài)樣式方法綁定applyNormal/applyPressed/applyFocused 依據(jù)態(tài)變樣式多態(tài)調(diào) // 當(dāng)前版本子類賦值屬性槽報(bào)錯(cuò)多態(tài)樣式方法不被支持多態(tài)樣式方法綁定AttributeModifier 綁多態(tài)樣式方法——applyNormalAttribute正常態(tài)/applyPressedAttribute按壓態(tài)/applyFocusedAttribute聚焦態(tài)等多態(tài)方法依據(jù)態(tài)變樣式。不像 Styles/Extend 只能靜態(tài)綁屬性按態(tài)變樣式不支持AttributeModifier 多態(tài)方法依據(jù)態(tài)動(dòng)態(tài)調(diào)樣式。當(dāng)前版本報(bào)錯(cuò)——多態(tài)樣式方法賦值屬性槽不被支持。機(jī)制 3業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性AttributeModifier 荬飾器綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變、字色按 count5 變等業(yè)務(wù)邏輯// ? AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)當(dāng)前版本報(bào)錯(cuò) class MyDynamicModifier implements AttributeModifierTextAttribute { count: number constructor(count: number) { this.count count } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 10 this.count ← 按 count 業(yè)務(wù)邏輯變字號(hào) attr.fontColor this.count 5 ? #dc2626 : #2563eb ← 按 count 業(yè)務(wù)邏輯變字色 } } Entry Component struct Index { State count: number 0 build() { Column() { Text(動(dòng)態(tài)字號(hào)10${this.count}) .attributeModifier(new MyDynamicModifier(this.count)) ← 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Button(改 count) .onClick(() { this.count }) // count 變觸發(fā)按業(yè)務(wù)邏輯重算字號(hào)/字色 } } } // AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變等 // 當(dāng)前版本子類賦值屬性槽報(bào)錯(cuò)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不被支持業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變、字色按 count5 變等業(yè)務(wù)邏輯。不像 Styles 不支持業(yè)務(wù)邏輯只能靜態(tài)綁固定屬性集AttributeModifier 多態(tài)方法依據(jù)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)樣式。當(dāng)前版本報(bào)錯(cuò)——業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)賦值屬性槽不被支持。機(jī)制 4當(dāng)前版本報(bào)錯(cuò)邊界——arkts-no-method-reassignmentAttributeModifier當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)// ? 當(dāng)前版本子類賦值 AttributeModifier 屬性槽報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 16 ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 attr.fontColor #dc2626 ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 attr.fontWeight FontWeight.Bold ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 } } // 報(bào)錯(cuò)根因當(dāng)前版本子類賦值 AttributeModifier 屬性槽不被支持arkts-no-method-reassignment // 正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式綁特定組件專屬屬性支持參數(shù)當(dāng)前版本報(bào)錯(cuò)邊界AttributeModifier 當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持。報(bào)錯(cuò)根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)arkts-no-method-reassignment 約束子類方法不能重賦值屬性槽。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式綁特定組件專屬屬性支持參數(shù)不用 AttributeModifier。三、正解Extend 替代 AttributeModifier 實(shí)現(xiàn)等效動(dòng)態(tài)樣式當(dāng)前版本 AttributeModifier 報(bào)錯(cuò)正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn) AttributeModifier 的按參數(shù)動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。正解 1Extend 替代按參數(shù)動(dòng)態(tài)調(diào)專屬屬性// ? Extend 替代 AttributeModifier 按參數(shù)動(dòng)態(tài)調(diào)專屬屬性 Extend(Text) function MyTextStyle(size: number, color: ResourceColor, isBold: boolean false) { .fontSize(size) // ? 按參數(shù)變字號(hào)替代 attr.fontSize size .fontColor(color) // ? 按參數(shù)變字色替代 attr.fontColor color .fontWeight(isBold ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(#f0f0f0) .padding(6) .borderRadius(4) } Entry Component struct Index { build() { Column() { Text(樣式擴(kuò)展1) .MyTextStyle(16, #dc2626, true) // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)字號(hào)/字色/加粗 Text(樣式擴(kuò)展2) .MyTextStyle(14, #2563eb, false) // ? 多調(diào)用點(diǎn)復(fù)用同 Extend 不同參數(shù) } } } // Extend 替代正解按參數(shù)動(dòng)態(tài)調(diào)專屬屬性字號(hào)/字色/加粗不用 AttributeModifier為哈能跑Extend 替代 AttributeModifier 按參數(shù)動(dòng)態(tài)調(diào)專屬屬性——.MyTextStyle(16, #dc2626, true)按參數(shù)變字號(hào)/字色/加粗等效 AttributeModifier 的 applyNormalAttribute 按參數(shù)動(dòng)態(tài)調(diào)。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 Extend 綁特定組件專屬屬性參數(shù)實(shí)現(xiàn)等效動(dòng)態(tài)調(diào)。正解 2Extend 替代按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)// ? Extend 替代 AttributeModifier 按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Extend(Text) function MyDynamicTextStyle(size: number, color: ResourceColor) { .fontSize(size) // ? 按 State count 業(yè)務(wù)邏輯變字號(hào) .fontColor(color) // ? 按 State count 業(yè)務(wù)邏輯變字色 .fontWeight(FontWeight.Bold) .margin({ top: 4, bottom: 4 }) } Entry Component struct Index { State count: number 0 build() { Column() { Text(動(dòng)態(tài)字號(hào)${10 this.count}count5 紅色否則藍(lán)色) .MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb) // ? 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)/字色替代 AttributeModifier 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Button(改 count) .onClick(() { this.count }) // count 變觸發(fā)按業(yè)務(wù)邏輯重算字號(hào)/字色 } } } // Extend 替代正解按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)字號(hào)按 count 變、字色按 count5 變不用 AttributeModifier為哈能跑Extend 替代 AttributeModifier 按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb)按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)10count/字色count5 紅 否則藍(lán)等效 AttributeModifier 的業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 Extend 收參數(shù)調(diào)用時(shí)傳 this.count 業(yè)務(wù)邏輯實(shí)現(xiàn)等效動(dòng)態(tài)調(diào)。正解 3Extend 不支持多態(tài)樣式的繞坑按態(tài)變樣式用 if 條件渲染// ? Extend 不支持多態(tài)樣式按壓態(tài)變樣式等繞坑按態(tài)變樣式用 if 條件渲染 Extend(Text) function MyNormalStyle() { .fontSize(16).fontColor(#2563eb).backgroundColor(#f0f0f0) } Extend(Text) function MyPressedStyle() { .fontSize(16).fontColor(#2563eb).backgroundColor(#e0e0e0) ← 按壓態(tài)背景色變 } Entry Component struct Index { State isPressed: boolean false build() { Column() { if (this.isPressed) { Text(按壓態(tài)) .MyPressedStyle() // ? 按壓態(tài)顯 MyPressedStyleif 條件渲染替代多態(tài)樣式 } else { Text(正常態(tài)) .MyNormalStyle() // ? 正常態(tài)顯 MyNormalStyleif 條件渲染替代多態(tài)樣式 } Button(切按壓態(tài)) .onClick(() { this.isPressed !this.isPressed }) } } } // Extend 不支持多態(tài)樣式繞坑按態(tài)變樣式用 if 條件渲染切兩 Extend替代 AttributeModifier 多態(tài)方法為哈能跑Extend 不支持多態(tài)樣式按壓態(tài)變樣式等繞坑——按態(tài)變樣式用 if 條件渲染切兩 ExtendMyNormalStyle 正常態(tài) / MyPressedStyle 按壓態(tài)替代 AttributeModifier 的 applyNormalAttribute/applyPressedAttribute 多態(tài)方法。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 if 條件渲染兩 Extend 實(shí)現(xiàn)等效按態(tài)變樣式。四、真機(jī)配圖AttributeModifier 報(bào)錯(cuò)邊界 vs Extend 替代正解初始態(tài)Extend 調(diào)用1 顯 fontSize16 紅色加粗、調(diào)用2 顯 fontSize14 荝色正常、動(dòng)態(tài)調(diào)按 count0 顯字號(hào) 10 荝色均動(dòng)態(tài)樣式邊界初始值點(diǎn)調(diào)按鈕后動(dòng)態(tài)字號(hào)按 count1 變了、Extend 帶參數(shù)調(diào) Text 專屬屬性均動(dòng)態(tài)樣式邊界對(duì)比證據(jù)齊對(duì)比證據(jù)點(diǎn)改 count 按鈕后動(dòng)態(tài)字號(hào)按 count1 變了10111Extend 帶參數(shù)動(dòng)態(tài)調(diào)字號(hào)調(diào)用1 顯 fontSize16 紅色加粗、調(diào)用2 顯 fontSize14 荝色正常Extend 綁 Text 專屬屬性 fontSize/fontColor/fontWeight。AttributeModifier 當(dāng)前版本報(bào)arkts-no-method-reassignment不能跑正解用 Extend 替代——Extend 綁特定組件專屬屬性支持參數(shù)實(shí)現(xiàn)等效按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不用 AttributeModifier。Extend 不支持多態(tài)樣式繞坑用 if 條件渲染切兩 Extend。五、一句話哲學(xué)AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器當(dāng)前版本報(bào)錯(cuò)Extend 替代正解。ArkUI 的 AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn)按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。組件設(shè)計(jì)階段串講Builder 綁渲染樹節(jié)點(diǎn)復(fù)用篇 63調(diào)用點(diǎn)嵌節(jié)點(diǎn)實(shí)例復(fù)用 UI 不返值→ BuilderParam 綁渲染樹節(jié)點(diǎn)參數(shù)槽收片段篇 64父組件傳片段嵌槽復(fù)用子組件結(jié)構(gòu)→ Styles 綁組件通用屬性復(fù)用樣式集篇 65鏈?zhǔn)秸{(diào)用嵌屬性集復(fù)用樣式不返值→ Extend 綁特定組件專屬屬性槽擴(kuò)展支持參數(shù)篇 66鏈?zhǔn)秸{(diào)用嵌專屬屬性槽復(fù)用專屬屬性不返值→ AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯篇 67當(dāng)前版本報(bào)錯(cuò) Extend 替代正解——五篇講清 ArkUI 組件復(fù)用哲學(xué)渲染樹/屬性/樣式類綁定復(fù)用根因都是綁渲染樹/屬性/樣式類不收值不返值。Extend vs AttributeModifier 對(duì)比總結(jié)Extend 綁特定組件專屬屬性槽Text 的 fontSize/fontColor 等支持參數(shù)動(dòng)態(tài)調(diào)必須全局定義不能訪問 this 但能收參數(shù)當(dāng)前版本合法。AttributeModifier 綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)當(dāng)前版本報(bào)arkts-no-method-reassignment子類賦值屬性槽不被支持。要寫動(dòng)態(tài)樣式擴(kuò)展當(dāng)前版本用 Extend按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等 AttributeMatrix 屬性槽賦值語法實(shí)現(xiàn)后用 AttributeModifier可導(dǎo)出樣式類多態(tài)樣式。系列預(yù)告下篇篇 68如續(xù)講 Watch/Link 狀態(tài)聯(lián)動(dòng)邊界深水區(qū)或系列就此打住五階段哲學(xué)體系已講清主線。五階段哲學(xué)體系類型哲學(xué)50-52→ 作用域哲學(xué)53-55→ 狀態(tài)哲學(xué)56-59→ 瀆染哲學(xué)60-62→ 組件設(shè)計(jì)63-67講清 ArkTS/ArkUI 進(jìn)階哲學(xué)。能力系列回鏈能力系列篇本文進(jìn)階點(diǎn)篇 19 Builder 用法AttributeModifier 動(dòng)態(tài)樣式邊界根因綁可導(dǎo)出樣式類多態(tài)業(yè)務(wù)邏輯當(dāng)前版本報(bào)錯(cuò) Extend 替代篇 16 組件復(fù)用用法上一篇Extend 綁特定組件專屬屬性槽根因篇 13 State 基礎(chǔ)用法狀態(tài)哲學(xué)State 賦值就刷 UI 依賴追蹤真機(jī) demo 完整代碼// 篇 67 demoAttributeModifier 報(bào)錯(cuò)邊界 vs Extend 靜態(tài)綁屬性對(duì)比 // 對(duì)比AttributeModifier 子類賦值屬性報(bào) arkts-no-method-reassignment vs Extend 靜態(tài)綁合法 // ? Extend 荬飾器綁特定組件Text專屬屬性支持參數(shù)靜態(tài)綁合法 Extend(Text) function MyTextStyle(size: number, color: ResourceColor, isBold: boolean false) { .fontSize(size) // ? Text 專屬屬性Extend 靜態(tài)綁合法 .fontColor(color) // ? Text 專屬屬性Extend 靜態(tài)綁合法 .fontWeight(isBold ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(#f0f0f0) .padding(6) .borderRadius(4) } // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)樣式按參數(shù)變 fontSize/fontColor Extend(Text) function MyDynamicTextStyle(size: number, color: ResourceColor) { .fontSize(size) // ? 按參數(shù)變字號(hào)動(dòng)態(tài)調(diào) .fontColor(color) // ? 按參數(shù)變字色動(dòng)態(tài)調(diào) .fontWeight(FontWeight.Bold) .margin({ top: 4, bottom: 4 }) } // ? AttributeModifier 子類賦值屬性報(bào)錯(cuò)對(duì)比證據(jù)注釋掉避編譯炸 // class MyTextStyleModifier implements AttributeModifierTextAttribute { // applyNormalAttribute(attr: TextAttribute): void { // attr.fontSize 16 ← 報(bào) arkts-no-method-reassignment屬性賦值不被支持 // attr.fontColor #dc2626 ← 報(bào) arkts-no-method-reassignment屬性賦值不被支持 // } // } // 報(bào)錯(cuò)根因ArkTS 當(dāng)前版本不支持子類賦值 AttributeModifier 屬性槽arkts-no-method-reassignment // 要用動(dòng)態(tài)樣式擴(kuò)展用 Extend綁特定組件專屬屬性支持參數(shù)替代 AttributeModifier Entry Component struct Index { State count: number 0 State log: string (未操作) // ? Styles 只寫通用屬性對(duì)比證據(jù) Styles MyCommonBox() { .width(88%) .backgroundColor(#e0e0e0) .padding(8) .borderRadius(6) } build() { Column({ space: 12 }) { Text(篇 67 配圖AttributeModifier 報(bào)錯(cuò)邊界 vs Extend 靜態(tài)綁) .fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 8 }) Text(AttributeModifier 子類賦值屬性報(bào)錯(cuò) vs Extend 靜態(tài)綁合法對(duì)比證據(jù)) .fontSize(12).fontColor(#888).margin({ bottom: 16 }) Column({ space: 6 }) { Text(count ${this.count}).fontSize(15).fontWeight(FontWeight.Bold) Text(日志${this.log}).fontSize(12).fontColor(#333).margin({ top: 4 }) } .width(92%).padding(12).backgroundColor(#f5f5f5).borderRadius(8) // ? Extend 調(diào)用綁 Text 專屬屬性支持參數(shù)靜態(tài)綁合法 Text(Extend 靜態(tài)綁專屬屬性) .fontSize(13) .fontColor(#888) Text(樣式擴(kuò)展1fontSize16 紅色加粗) .MyTextStyle(16, #dc2626, true) // ? Extend 綁 Text 專屬屬性參數(shù)合法 Text(樣式擴(kuò)展2fontSize14 荝色正常) .MyTextStyle(14, #2563eb, false) // ? 多調(diào)用點(diǎn)復(fù)用同 Extend 不同參數(shù) // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)樣式按 State count 變字號(hào) Text(Extend 帶參數(shù)動(dòng)態(tài)調(diào)) .fontSize(13) .fontColor(#888) .margin({ top: 8 }) Text(動(dòng)態(tài)字號(hào)${10 this.count}count5 紅色否則藍(lán)色) .MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb) // ? 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)/字色Extend 帶參數(shù)動(dòng)態(tài)調(diào) // ? Styles 只寫通用屬性對(duì)比證據(jù) Text(Styles 只靜態(tài)綁通用屬性) .fontSize(13) .fontColor(#888) .margin({ top: 8 }) Column() { Text(通用屬性集復(fù)用不支持專屬屬性/參數(shù)) } .MyCommonBox() // ? AttributeModifier 子類賦值屬性報(bào)錯(cuò)對(duì)比證據(jù)注釋掉避編譯炸 // Text(AttributeModifier 報(bào)錯(cuò)證據(jù)) // .attributeModifier(new MyTextStyleModifier()) ← 子類賦值屬性報(bào)錯(cuò)不能跑 Button(改 countExtend 帶參數(shù)動(dòng)態(tài)調(diào)也刷) .width(92%).height(44).fontSize(14) .onClick(() { this.count // ? count 變 Extend 帶參數(shù)動(dòng)態(tài)調(diào)也刷 this.log count${this.count}Extend 按 count 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)字號(hào)/字色 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }寫鴻蒙 ArkUI 記住AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器——AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn)按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。Extend 替代按參數(shù)動(dòng)態(tài)調(diào)用綁特定組件專屬屬性參數(shù)首選90% 場(chǎng)景Extend 替代按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)用收參數(shù)傳 this.countExtend 不支持多態(tài)樣式繞坑用 if 條件渲染切兩 Extend。當(dāng)前版本報(bào)錯(cuò) Extend 替代正解是 ArkUI 組件設(shè)計(jì)哲學(xué)深水區(qū)核心 ArkTS 進(jìn)階之道（18）：AttributeModifier 動(dòng)態(tài)樣式邊界——為啥當(dāng)前版本報(bào)錯(cuò)+@Extend 替代正解
ArkTS 進(jìn)階之道18AttributeModifier 動(dòng)態(tài)樣式邊界——為啥當(dāng)前版本報(bào)錯(cuò)Extend 替代正解本文是「ArkTS 進(jìn)階之道」系列第 18 篇續(xù)「ArkUI 組件設(shè)計(jì)」階段深水區(qū)。上三篇講屬性綁定復(fù)用Builder 綁渲染樹節(jié)點(diǎn)篇 63 BuilderParam 綁參數(shù)槽篇 64 Styles 綁通用屬性篇 65 Extend 綁專屬屬性槽參數(shù)篇 66。本文講動(dòng)態(tài)樣式邊界AttributeModifier 荬飾器綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯——根因在綁可導(dǎo)出樣式類屬性槽不是靜態(tài)綁屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment子類賦值 AttributeModifier 屬性槽不被支持正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式。一、開篇AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器你寫 TypeScript/React 時(shí)動(dòng)態(tài)樣式擴(kuò)展是「魔法」React 用 styled-components 動(dòng)態(tài)樣式 / CSS-in-JS 收可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯// React 用 styled-components 收可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯 class MyTextStyleModifier { private size: number private color: string private isBold: boolean constructor(size: number, color: string, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormal(): React.CSSProperties { ← 可導(dǎo)出樣式類多態(tài)方法正常態(tài) return { fontSize: this.size, color: this.color, fontWeight: this.isBold ? bold : normal } } applyPressed(): React.CSSProperties { ← 多態(tài)方法按壓態(tài)變色 return { backgroundColor: #e0e0e0 } } } function Component() { const modifier new MyTextStyleModifier(16, #dc2626, true) return Text style{modifier.applyNormal()}動(dòng)態(tài)樣式/Text } // React 用可導(dǎo)出樣式類多態(tài)方法業(yè)務(wù)邏輯收動(dòng)態(tài)樣式是返值收值魔法你寫鴻蒙 ArkTS 時(shí)AttributeModifier綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯——不用返樣式對(duì)象當(dāng)前版本報(bào)錯(cuò)正解 Extend 替代// ? ArkTS AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { size: number color: ResourceColor isBold: boolean constructor(size: number, color: ResourceColor, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize this.size ← 報(bào) arkts-no-method-reassignment當(dāng)前版本不支持 attr.fontColor this.color ← 報(bào) arkts-no-method-reassignment當(dāng)前版本不支持 } applyPressedAttribute(attr: TextAttribute): void { attr.backgroundColor #e0e0e0 ← 報(bào) arkts-no-method-reassignment多態(tài)樣式不被支持 } } Entry Component struct Index { build() { Column() { Text(動(dòng)態(tài)樣式) .attributeModifier(new MyTextStyleModifier(16, #dc2626, true)) ← 報(bào)錯(cuò)不能跑 } } } // AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯當(dāng)前版本報(bào)錯(cuò)arkts-no-method-reassignment魔法 vs 荬飾器的區(qū)別React 把動(dòng)態(tài)樣式擴(kuò)展當(dāng)可導(dǎo)出樣式類收值返值收值魔法ArkTS 把 AttributeModifier 當(dāng)「綁可導(dǎo)出樣式類多態(tài)荬飾器」不收值綁可導(dǎo)出樣式類多態(tài)方法業(yè)務(wù)邏輯。當(dāng)前版本報(bào)arkts-no-method-reassignment子類賦值 AttributeModifier 屬性槽不被支持正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式。二、根因AttributeModifier 的可導(dǎo)出樣式類綁定多態(tài)機(jī)制鴻蒙 ArkUI 的 AttributeModifier 是可導(dǎo)出樣式類綁定多態(tài)——編譯期把 AttributeModifier 子類綁成可導(dǎo)出樣式類鏈?zhǔn)秸{(diào)用嵌樣式類復(fù)用專屬屬性多態(tài)樣式applyNormal/applyPressed 等多態(tài)方法業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不是靜態(tài)綁屬性。機(jī)制 1AttributeModifier 編譯期綁可導(dǎo)出樣式類——不是靜態(tài)綁屬性AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類——把 AttributeModifier 子類編成可導(dǎo)出樣式類跨文件復(fù)用不是靜態(tài)綁的屬性// ? AttributeModifier 編譯期綁可導(dǎo)出樣式類當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { size: number color: ResourceColor isBold: boolean constructor(size: number, color: ResourceColor, isBold: boolean false) { this.size size; this.color color; this.isBold isBold } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize this.size ← 報(bào) arkts-no-method-reassignment綁樣式類屬性槽不被支持 } } Entry Component struct Index { build() { Column() { Text(動(dòng)態(tài)樣式) .attributeModifier(new MyTextStyleModifier(16, #dc2626, true)) // 編譯期綁可導(dǎo)出樣式類跨文件復(fù)用不是靜態(tài)綁屬性 } } } // 編譯期AttributeModifier 子類綁成可導(dǎo)出樣式類可跨文件 export/import 復(fù)用 // 鏈?zhǔn)秸{(diào)用.attributeModifier(new ...) 嵌樣式類實(shí)例綁組件不返值 // 報(bào)錯(cuò)根因當(dāng)前版本子類賦值 AttributeModifier 屬性槽報(bào) arkts-no-method-reassignment編譯期綁可導(dǎo)出樣式類AttributeModifierMyTextStyleModifier荬飾器編譯期把子類綁成可導(dǎo)出樣式類——可跨文件 export/import 復(fù)用不像 Styles/Extend 全局定義。當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。機(jī)制 2多態(tài)樣式方法綁定——applyNormal/applyPressed 多態(tài)調(diào)AttributeModifier 荬飾器綁多態(tài)樣式方法——applyNormalAttribute正常態(tài)/applyPressedAttribute按壓態(tài)/applyFocusedAttribute聚焦態(tài)等多態(tài)方法依據(jù)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)// ? AttributeModifier 綁多態(tài)樣式方法當(dāng)前版本報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 16 ← 正常態(tài)字號(hào) 16多態(tài)方法 } applyPressedAttribute(attr: TextAttribute): void { attr.backgroundColor #e0e0e0 ← 按壓態(tài)背景色變多態(tài)方法 } applyFocusedAttribute(attr: TextAttribute): void { attr.backgroundColor #fee ← 聚焦態(tài)背景色變多態(tài)方法 } } // 多態(tài)樣式方法綁定applyNormal/applyPressed/applyFocused 依據(jù)態(tài)變樣式多態(tài)調(diào) // 當(dāng)前版本子類賦值屬性槽報(bào)錯(cuò)多態(tài)樣式方法不被支持多態(tài)樣式方法綁定AttributeModifier 綁多態(tài)樣式方法——applyNormalAttribute正常態(tài)/applyPressedAttribute按壓態(tài)/applyFocusedAttribute聚焦態(tài)等多態(tài)方法依據(jù)態(tài)變樣式。不像 Styles/Extend 只能靜態(tài)綁屬性按態(tài)變樣式不支持AttributeModifier 多態(tài)方法依據(jù)態(tài)動(dòng)態(tài)調(diào)樣式。當(dāng)前版本報(bào)錯(cuò)——多態(tài)樣式方法賦值屬性槽不被支持。機(jī)制 3業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性AttributeModifier 荬飾器綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變、字色按 count5 變等業(yè)務(wù)邏輯// ? AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)當(dāng)前版本報(bào)錯(cuò) class MyDynamicModifier implements AttributeModifierTextAttribute { count: number constructor(count: number) { this.count count } applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 10 this.count ← 按 count 業(yè)務(wù)邏輯變字號(hào) attr.fontColor this.count 5 ? #dc2626 : #2563eb ← 按 count 業(yè)務(wù)邏輯變字色 } } Entry Component struct Index { State count: number 0 build() { Column() { Text(動(dòng)態(tài)字號(hào)10${this.count}) .attributeModifier(new MyDynamicModifier(this.count)) ← 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Button(改 count) .onClick(() { this.count }) // count 變觸發(fā)按業(yè)務(wù)邏輯重算字號(hào)/字色 } } } // AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變等 // 當(dāng)前版本子類賦值屬性槽報(bào)錯(cuò)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不被支持業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)AttributeModifier 綁業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——按參數(shù)/狀態(tài)變專屬屬性字號(hào)按 count 變、字色按 count5 變等業(yè)務(wù)邏輯。不像 Styles 不支持業(yè)務(wù)邏輯只能靜態(tài)綁固定屬性集AttributeModifier 多態(tài)方法依據(jù)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)樣式。當(dāng)前版本報(bào)錯(cuò)——業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)賦值屬性槽不被支持。機(jī)制 4當(dāng)前版本報(bào)錯(cuò)邊界——arkts-no-method-reassignmentAttributeModifier當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)// ? 當(dāng)前版本子類賦值 AttributeModifier 屬性槽報(bào)錯(cuò) class MyTextStyleModifier implements AttributeModifierTextAttribute { applyNormalAttribute(attr: TextAttribute): void { attr.fontSize 16 ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 attr.fontColor #dc2626 ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 attr.fontWeight FontWeight.Bold ← 報(bào) arkts-no-method-reassignment屬性槽賦值不被支持 } } // 報(bào)錯(cuò)根因當(dāng)前版本子類賦值 AttributeModifier 屬性槽不被支持arkts-no-method-reassignment // 正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式綁特定組件專屬屬性支持參數(shù)當(dāng)前版本報(bào)錯(cuò)邊界AttributeModifier 當(dāng)前版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽attr.fontSize this.size不被支持。報(bào)錯(cuò)根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)arkts-no-method-reassignment 約束子類方法不能重賦值屬性槽。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式綁特定組件專屬屬性支持參數(shù)不用 AttributeModifier。三、正解Extend 替代 AttributeModifier 實(shí)現(xiàn)等效動(dòng)態(tài)樣式當(dāng)前版本 AttributeModifier 報(bào)錯(cuò)正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn) AttributeModifier 的按參數(shù)動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。正解 1Extend 替代按參數(shù)動(dòng)態(tài)調(diào)專屬屬性// ? Extend 替代 AttributeModifier 按參數(shù)動(dòng)態(tài)調(diào)專屬屬性 Extend(Text) function MyTextStyle(size: number, color: ResourceColor, isBold: boolean false) { .fontSize(size) // ? 按參數(shù)變字號(hào)替代 attr.fontSize size .fontColor(color) // ? 按參數(shù)變字色替代 attr.fontColor color .fontWeight(isBold ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(#f0f0f0) .padding(6) .borderRadius(4) } Entry Component struct Index { build() { Column() { Text(樣式擴(kuò)展1) .MyTextStyle(16, #dc2626, true) // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)字號(hào)/字色/加粗 Text(樣式擴(kuò)展2) .MyTextStyle(14, #2563eb, false) // ? 多調(diào)用點(diǎn)復(fù)用同 Extend 不同參數(shù) } } } // Extend 替代正解按參數(shù)動(dòng)態(tài)調(diào)專屬屬性字號(hào)/字色/加粗不用 AttributeModifier為哈能跑Extend 替代 AttributeModifier 按參數(shù)動(dòng)態(tài)調(diào)專屬屬性——.MyTextStyle(16, #dc2626, true)按參數(shù)變字號(hào)/字色/加粗等效 AttributeModifier 的 applyNormalAttribute 按參數(shù)動(dòng)態(tài)調(diào)。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 Extend 綁特定組件專屬屬性參數(shù)實(shí)現(xiàn)等效動(dòng)態(tài)調(diào)。正解 2Extend 替代按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)// ? Extend 替代 AttributeModifier 按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Extend(Text) function MyDynamicTextStyle(size: number, color: ResourceColor) { .fontSize(size) // ? 按 State count 業(yè)務(wù)邏輯變字號(hào) .fontColor(color) // ? 按 State count 業(yè)務(wù)邏輯變字色 .fontWeight(FontWeight.Bold) .margin({ top: 4, bottom: 4 }) } Entry Component struct Index { State count: number 0 build() { Column() { Text(動(dòng)態(tài)字號(hào)${10 this.count}count5 紅色否則藍(lán)色) .MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb) // ? 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)/字色替代 AttributeModifier 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào) Button(改 count) .onClick(() { this.count }) // count 變觸發(fā)按業(yè)務(wù)邏輯重算字號(hào)/字色 } } } // Extend 替代正解按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)字號(hào)按 count 變、字色按 count5 變不用 AttributeModifier為哈能跑Extend 替代 AttributeModifier 按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)——MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb)按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)10count/字色count5 紅 否則藍(lán)等效 AttributeModifier 的業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 Extend 收參數(shù)調(diào)用時(shí)傳 this.count 業(yè)務(wù)邏輯實(shí)現(xiàn)等效動(dòng)態(tài)調(diào)。正解 3Extend 不支持多態(tài)樣式的繞坑按態(tài)變樣式用 if 條件渲染// ? Extend 不支持多態(tài)樣式按壓態(tài)變樣式等繞坑按態(tài)變樣式用 if 條件渲染 Extend(Text) function MyNormalStyle() { .fontSize(16).fontColor(#2563eb).backgroundColor(#f0f0f0) } Extend(Text) function MyPressedStyle() { .fontSize(16).fontColor(#2563eb).backgroundColor(#e0e0e0) ← 按壓態(tài)背景色變 } Entry Component struct Index { State isPressed: boolean false build() { Column() { if (this.isPressed) { Text(按壓態(tài)) .MyPressedStyle() // ? 按壓態(tài)顯 MyPressedStyleif 條件渲染替代多態(tài)樣式 } else { Text(正常態(tài)) .MyNormalStyle() // ? 正常態(tài)顯 MyNormalStyleif 條件渲染替代多態(tài)樣式 } Button(切按壓態(tài)) .onClick(() { this.isPressed !this.isPressed }) } } } // Extend 不支持多態(tài)樣式繞坑按態(tài)變樣式用 if 條件渲染切兩 Extend替代 AttributeModifier 多態(tài)方法為哈能跑Extend 不支持多態(tài)樣式按壓態(tài)變樣式等繞坑——按態(tài)變樣式用 if 條件渲染切兩 ExtendMyNormalStyle 正常態(tài) / MyPressedStyle 按壓態(tài)替代 AttributeModifier 的 applyNormalAttribute/applyPressedAttribute 多態(tài)方法。不用 AttributeModifier當(dāng)前版本報(bào)錯(cuò)用 if 條件渲染兩 Extend 實(shí)現(xiàn)等效按態(tài)變樣式。四、真機(jī)配圖AttributeModifier 報(bào)錯(cuò)邊界 vs Extend 替代正解初始態(tài)Extend 調(diào)用1 顯 fontSize16 紅色加粗、調(diào)用2 顯 fontSize14 荝色正常、動(dòng)態(tài)調(diào)按 count0 顯字號(hào) 10 荝色均動(dòng)態(tài)樣式邊界初始值點(diǎn)調(diào)按鈕后動(dòng)態(tài)字號(hào)按 count1 變了、Extend 帶參數(shù)調(diào) Text 專屬屬性均動(dòng)態(tài)樣式邊界對(duì)比證據(jù)齊對(duì)比證據(jù)點(diǎn)改 count 按鈕后動(dòng)態(tài)字號(hào)按 count1 變了10111Extend 帶參數(shù)動(dòng)態(tài)調(diào)字號(hào)調(diào)用1 顯 fontSize16 紅色加粗、調(diào)用2 顯 fontSize14 荝色正常Extend 綁 Text 專屬屬性 fontSize/fontColor/fontWeight。AttributeModifier 當(dāng)前版本報(bào)arkts-no-method-reassignment不能跑正解用 Extend 替代——Extend 綁特定組件專屬屬性支持參數(shù)實(shí)現(xiàn)等效按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)不用 AttributeModifier。Extend 不支持多態(tài)樣式繞坑用 if 條件渲染切兩 Extend。五、一句話哲學(xué)AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器當(dāng)前版本報(bào)錯(cuò)Extend 替代正解。ArkUI 的 AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn)按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。組件設(shè)計(jì)階段串講Builder 綁渲染樹節(jié)點(diǎn)復(fù)用篇 63調(diào)用點(diǎn)嵌節(jié)點(diǎn)實(shí)例復(fù)用 UI 不返值→ BuilderParam 綁渲染樹節(jié)點(diǎn)參數(shù)槽收片段篇 64父組件傳片段嵌槽復(fù)用子組件結(jié)構(gòu)→ Styles 綁組件通用屬性復(fù)用樣式集篇 65鏈?zhǔn)秸{(diào)用嵌屬性集復(fù)用樣式不返值→ Extend 綁特定組件專屬屬性槽擴(kuò)展支持參數(shù)篇 66鏈?zhǔn)秸{(diào)用嵌專屬屬性槽復(fù)用專屬屬性不返值→ AttributeModifier 綁可導(dǎo)出樣式類多態(tài)樣式業(yè)務(wù)邏輯篇 67當(dāng)前版本報(bào)錯(cuò) Extend 替代正解——五篇講清 ArkUI 組件復(fù)用哲學(xué)渲染樹/屬性/樣式類綁定復(fù)用根因都是綁渲染樹/屬性/樣式類不收值不返值。Extend vs AttributeModifier 對(duì)比總結(jié)Extend 綁特定組件專屬屬性槽Text 的 fontSize/fontColor 等支持參數(shù)動(dòng)態(tài)調(diào)必須全局定義不能訪問 this 但能收參數(shù)當(dāng)前版本合法。AttributeModifier 綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)當(dāng)前版本報(bào)arkts-no-method-reassignment子類賦值屬性槽不被支持。要寫動(dòng)態(tài)樣式擴(kuò)展當(dāng)前版本用 Extend按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等 AttributeMatrix 屬性槽賦值語法實(shí)現(xiàn)后用 AttributeModifier可導(dǎo)出樣式類多態(tài)樣式。系列預(yù)告下篇篇 68如續(xù)講 Watch/Link 狀態(tài)聯(lián)動(dòng)邊界深水區(qū)或系列就此打住五階段哲學(xué)體系已講清主線。五階段哲學(xué)體系類型哲學(xué)50-52→ 作用域哲學(xué)53-55→ 狀態(tài)哲學(xué)56-59→ 瀆染哲學(xué)60-62→ 組件設(shè)計(jì)63-67講清 ArkTS/ArkUI 進(jìn)階哲學(xué)。能力系列回鏈能力系列篇本文進(jìn)階點(diǎn)篇 19 Builder 用法AttributeModifier 動(dòng)態(tài)樣式邊界根因綁可導(dǎo)出樣式類多態(tài)業(yè)務(wù)邏輯當(dāng)前版本報(bào)錯(cuò) Extend 替代篇 16 組件復(fù)用用法上一篇Extend 綁特定組件專屬屬性槽根因篇 13 State 基礎(chǔ)用法狀態(tài)哲學(xué)State 賦值就刷 UI 依賴追蹤真機(jī) demo 完整代碼// 篇 67 demoAttributeModifier 報(bào)錯(cuò)邊界 vs Extend 靜態(tài)綁屬性對(duì)比 // 對(duì)比AttributeModifier 子類賦值屬性報(bào) arkts-no-method-reassignment vs Extend 靜態(tài)綁合法 // ? Extend 荬飾器綁特定組件Text專屬屬性支持參數(shù)靜態(tài)綁合法 Extend(Text) function MyTextStyle(size: number, color: ResourceColor, isBold: boolean false) { .fontSize(size) // ? Text 專屬屬性Extend 靜態(tài)綁合法 .fontColor(color) // ? Text 專屬屬性Extend 靜態(tài)綁合法 .fontWeight(isBold ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(#f0f0f0) .padding(6) .borderRadius(4) } // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)樣式按參數(shù)變 fontSize/fontColor Extend(Text) function MyDynamicTextStyle(size: number, color: ResourceColor) { .fontSize(size) // ? 按參數(shù)變字號(hào)動(dòng)態(tài)調(diào) .fontColor(color) // ? 按參數(shù)變字色動(dòng)態(tài)調(diào) .fontWeight(FontWeight.Bold) .margin({ top: 4, bottom: 4 }) } // ? AttributeModifier 子類賦值屬性報(bào)錯(cuò)對(duì)比證據(jù)注釋掉避編譯炸 // class MyTextStyleModifier implements AttributeModifierTextAttribute { // applyNormalAttribute(attr: TextAttribute): void { // attr.fontSize 16 ← 報(bào) arkts-no-method-reassignment屬性賦值不被支持 // attr.fontColor #dc2626 ← 報(bào) arkts-no-method-reassignment屬性賦值不被支持 // } // } // 報(bào)錯(cuò)根因ArkTS 當(dāng)前版本不支持子類賦值 AttributeModifier 屬性槽arkts-no-method-reassignment // 要用動(dòng)態(tài)樣式擴(kuò)展用 Extend綁特定組件專屬屬性支持參數(shù)替代 AttributeModifier Entry Component struct Index { State count: number 0 State log: string (未操作) // ? Styles 只寫通用屬性對(duì)比證據(jù) Styles MyCommonBox() { .width(88%) .backgroundColor(#e0e0e0) .padding(8) .borderRadius(6) } build() { Column({ space: 12 }) { Text(篇 67 配圖AttributeModifier 報(bào)錯(cuò)邊界 vs Extend 靜態(tài)綁) .fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 8 }) Text(AttributeModifier 子類賦值屬性報(bào)錯(cuò) vs Extend 靜態(tài)綁合法對(duì)比證據(jù)) .fontSize(12).fontColor(#888).margin({ bottom: 16 }) Column({ space: 6 }) { Text(count ${this.count}).fontSize(15).fontWeight(FontWeight.Bold) Text(日志${this.log}).fontSize(12).fontColor(#333).margin({ top: 4 }) } .width(92%).padding(12).backgroundColor(#f5f5f5).borderRadius(8) // ? Extend 調(diào)用綁 Text 專屬屬性支持參數(shù)靜態(tài)綁合法 Text(Extend 靜態(tài)綁專屬屬性) .fontSize(13) .fontColor(#888) Text(樣式擴(kuò)展1fontSize16 紅色加粗) .MyTextStyle(16, #dc2626, true) // ? Extend 綁 Text 專屬屬性參數(shù)合法 Text(樣式擴(kuò)展2fontSize14 荝色正常) .MyTextStyle(14, #2563eb, false) // ? 多調(diào)用點(diǎn)復(fù)用同 Extend 不同參數(shù) // ? Extend 帶參數(shù)動(dòng)態(tài)調(diào)樣式按 State count 變字號(hào) Text(Extend 帶參數(shù)動(dòng)態(tài)調(diào)) .fontSize(13) .fontColor(#888) .margin({ top: 8 }) Text(動(dòng)態(tài)字號(hào)${10 this.count}count5 紅色否則藍(lán)色) .MyDynamicTextStyle(10 this.count, this.count 5 ? #dc2626 : #2563eb) // ? 按 State count 業(yè)務(wù)邏輯動(dòng)態(tài)變字號(hào)/字色Extend 帶參數(shù)動(dòng)態(tài)調(diào) // ? Styles 只寫通用屬性對(duì)比證據(jù) Text(Styles 只靜態(tài)綁通用屬性) .fontSize(13) .fontColor(#888) .margin({ top: 8 }) Column() { Text(通用屬性集復(fù)用不支持專屬屬性/參數(shù)) } .MyCommonBox() // ? AttributeModifier 子類賦值屬性報(bào)錯(cuò)對(duì)比證據(jù)注釋掉避編譯炸 // Text(AttributeModifier 報(bào)錯(cuò)證據(jù)) // .attributeModifier(new MyTextStyleModifier()) ← 子類賦值屬性報(bào)錯(cuò)不能跑 Button(改 countExtend 帶參數(shù)動(dòng)態(tài)調(diào)也刷) .width(92%).height(44).fontSize(14) .onClick(() { this.count // ? count 變 Extend 帶參數(shù)動(dòng)態(tài)調(diào)也刷 this.log count${this.count}Extend 按 count 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)字號(hào)/字色 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }寫鴻蒙 ArkUI 記住AttributeModifier 不是靜態(tài)綁屬性是綁可導(dǎo)出樣式類的多態(tài)荬飾器——AttributeModifier 荬飾器編譯期綁可導(dǎo)出樣式類跨文件復(fù)用多態(tài)樣式方法applyNormal/applyPressed 等多態(tài)調(diào)業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)按參數(shù)/狀態(tài)變專屬屬性。當(dāng)前鴻蒙 6.1 API 23 版本報(bào)arkts-no-method-reassignment——子類賦值 AttributeModifier 屬性槽不被支持根因是當(dāng)前版本屬性槽賦值語法未實(shí)現(xiàn)。正解用 Extend 替代實(shí)現(xiàn)等效動(dòng)態(tài)樣式——Extend 綁特定組件專屬屬性支持參數(shù)能實(shí)現(xiàn)按參數(shù)動(dòng)態(tài)調(diào)/按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)等效功能不支持多態(tài)樣式/可導(dǎo)出樣式類但能動(dòng)態(tài)調(diào)專屬屬性。Extend 替代按參數(shù)動(dòng)態(tài)調(diào)用綁特定組件專屬屬性參數(shù)首選90% 場(chǎng)景Extend 替代按 State 業(yè)務(wù)邏輯動(dòng)態(tài)調(diào)用收參數(shù)傳 this.countExtend 不支持多態(tài)樣式繞坑用 if 條件渲染切兩 Extend。當(dāng)前版本報(bào)錯(cuò) Extend 替代正解是 ArkUI 組件設(shè)計(jì)哲學(xué)深水區(qū)核心