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