1# AttributeUpdater 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @xiang-shouxing--> 5<!--Designer: @xiang-shouxing--> 6<!--Tester: @sally__--> 7<!--Adviser: @HelloCrease--> 8 9将属性直接设置给组件，无需标记为状态变量即可直接触发UI更新。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15 16 17## 导入模块 18 19```ts 20import { AttributeUpdater } from '@kit.ArkUI'; 21``` 22 23> **使用说明：** 24> 25> 1. 由于与属性方法同时设置或者在AttributeUpdater中实现applyNormalAttribute等方法时，涉及到与状态管理更新机制同时使用，易出现混淆，因此不建议在同一组件上同时用两种方法设置相同属性。 26> 27> 2. 当与属性方法同时设置时，属性生效的原则为：后设置的生效。 28> 若先进行属性直通更新，后通过状态管理机制更新属性方法，则后更新的属性方法生效； 29> 若先通过状态管理机制更新属性方法，后进行属性直通更新，则属性直通更新生效。 30> 31> 3. 一个AttributeUpdater对象只能同时关联一个组件，否则将出现设置的属性只在一个组件上生效的现象。 32> 33> 4. 开发者需要自行保障AttributeUpdater中T和C的类型匹配。比如T为ImageAttribute，C要对应为ImageInterface，否则可能导致 34> 使用updateConstructorParams时功能异常。 35> 36> 5. updateConstructorParams当前只支持Button，Image，Text，Span，SymbolSpan和ImageSpan组件。 37> 38> 6. AttributeUpdater不支持深浅色切换等状态管理相关的操作。 39 40## Initializer\<T> 41type Initializer\<T> = () => T 42 43可以将属性更新到本地的修饰器。 44 45**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49## AttributeUpdater<T, C = Initializer\<T>> 50为[AttributeModifier](arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifiert)的实现类，开发者需要自定义class继承AttributeUpdater。 51 52其中C代表组件的构造函数类型，比如Text组件的TextInterface，Image组件的ImageInterface等，仅在使用updateConstructorParams时才需要传递C类型。 53 54**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58### applyNormalAttribute 59applyNormalAttribute?(instance: T): void 60 61定义正常态更新属性函数。 62 63**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67**参数：** 68 69| 参数名 | 类型 | 必填 | 说明 | 70| ------ | ------ | ---- | ------------------------------------------------------------------------ | 71| instance | T | 是 | 组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。| 72 73### initializeModifier 74initializeModifier(instance: T): void 75 76AttributeUpdater首次设置给组件时提供的样式。 77 78**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | ------ | ---- | ------------------------------------------------------------------------ | 86| instance | T | 是 | 组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。| 87 88**示例：** 89 90通过initializeModifier方法初始化设置属性值。 91 92```ts 93// xxx.ets 94import { AttributeUpdater } from '@kit.ArkUI'; 95 96class MyButtonModifier extends AttributeUpdater<ButtonAttribute> { 97 // 该AttributeUpdater对象第一次使用的时候触发的回调 98 initializeModifier(instance: ButtonAttribute): void { 99 instance.backgroundColor('#ffd5d5d5') 100 .labelStyle({ maxLines: 3 }) 101 .width('80%') 102 } 103 104 // 该AttributeUpdater对象后续使用或者更新的时候触发的回调 105 applyNormalAttribute(instance: ButtonAttribute): void { 106 instance.borderWidth(1); 107 } 108} 109 110@Entry 111@Component 112struct Index { 113 modifier: MyButtonModifier = new MyButtonModifier(); 114 @State flushTheButton: string = 'Button'; 115 116 build() { 117 Row() { 118 Column() { 119 Button(this.flushTheButton) 120 .attributeModifier(this.modifier) 121 .onClick(() => { 122 // 通过AttributeUpdater的attribute对属性进行修改 123 // 需要注意先通过组件的attributeModifier属性方法建立组件与AttributeUpdater绑定关系 124 this.modifier.attribute?.backgroundColor('#ff2787d9').labelStyle({ maxLines: 5 }); 125 }) 126 .margin('10%') 127 Button('Trigger Button Update') 128 .width('80%') 129 .labelStyle({ maxLines: 2 }) 130 .onClick(() => { 131 this.flushTheButton = this.flushTheButton + ' Updated' ; 132 }) 133 } 134 .width('100%') 135 } 136 .height('100%') 137 } 138} 139``` 140 141 142 143### attribute 144get attribute(): T | undefined 145 146获取AttributeUpdater中组件对应的属性类实例，通过该实例实现属性直通更新的功能。 147 148**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 149 150**系统能力：** SystemCapability.ArkUI.ArkUI.Full 151 152**返回值：** 153 154| 类型 | 说明 | 155| -------------------- | ------------------------------------------------------------ | 156| T \| undefined |如果AttributeUpdater中组件的属性类实例存在，则返回对应组件的属性类实例，否则返回undefined。| 157 158**示例：** 159 160通过属性直通设置方式更新属性值。 161 162```ts 163// xxx.ets 164import { AttributeUpdater } from '@kit.ArkUI'; 165 166class MyButtonModifier extends AttributeUpdater<ButtonAttribute> { 167 initializeModifier(instance: ButtonAttribute): void { 168 instance.backgroundColor('#ffd5d5d5') 169 .width('50%') 170 .height(30); 171 } 172} 173 174@Entry 175@Component 176struct updaterDemo2 { 177 modifier: MyButtonModifier = new MyButtonModifier(); 178 179 build() { 180 Row() { 181 Column() { 182 Button("Button") 183 .attributeModifier(this.modifier) 184 .onClick(() => { 185 this.modifier.attribute?.backgroundColor('#ff2787d9').width('30%'); 186 }) 187 } 188 .width('100%') 189 } 190 .height('100%') 191 } 192} 193``` 194 195 196### updateConstructorParams 197updateConstructorParams: C 198 199用来更改组件的构造入参。C代表组件的构造函数类型。 200 201其中C代表组件的构造函数类型，比如Text组件的TextInterface，Image组件的ImageInterface等。 202 203**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 204 205**系统能力：** SystemCapability.ArkUI.ArkUI.Full 206 207**返回值：** 208 209| 类型 | 说明 | 210| -------------------- | ------------------------------------------------------------ | 211| C |C代表组件的构造函数类型，比如Text组件的TextInterface，Image组件的ImageInterface等。| 212 213**示例：** 214 215使用updateConstructorParams更新组件的构造入参。 216 217```ts 218// xxx.ets 219import { AttributeUpdater } from '@kit.ArkUI'; 220 221class MyTextModifier extends AttributeUpdater<TextAttribute, TextInterface> { 222 initializeModifier(instance: TextAttribute) { 223 } 224} 225 226@Entry 227@Component 228struct attributeDemo3 { 229 private modifier: MyTextModifier = new MyTextModifier(); 230 231 build() { 232 Row() { 233 Column() { 234 Text("Initialize") 235 .attributeModifier(this.modifier) 236 .fontSize(14).border({ width: 1 }).textAlign(TextAlign.Center).lineHeight(20) 237 .width(200).height(50) 238 .backgroundColor('#fff7f7f7') 239 .onClick(() => { 240 this.modifier.updateConstructorParams("Updated"); 241 }) 242 } 243 .width('100%') 244 } 245 .height('100%') 246 } 247} 248``` 249 250 251### onComponentChanged 252 253onComponentChanged(component: T): void 254 255绑定相同的自定义的Modifier对象，组件发生切换时，通过该接口通知到应用。 256 257**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 258 259**系统能力：** SystemCapability.ArkUI.ArkUI.Full 260 261**参数：** 262 263| 参数名 | 类型 | 必填 | 说明 | 264| ------ | ------ | ---- | ------------------------------------------------------------------------ | 265| component | T | 是 | 组件的属性类，用来标识进行属性设置的组件的类型，比如Button组件的ButtonAttribute，Text组件的TextAttribute等。| 266 267**示例：** 268 269```ts 270// xxx.ets 271import { AttributeUpdater } from '@kit.ArkUI'; 272 273class MyButtonModifier extends AttributeUpdater<ButtonAttribute> { 274 initializeModifier(instance: ButtonAttribute): void { 275 instance.backgroundColor('#ff2787d9') 276 .width('50%') 277 .height(30); 278 } 279 280 onComponentChanged(instance: ButtonAttribute) :void { 281 instance.backgroundColor('#ff2787d9') 282 .width('50%') 283 .height(30); 284 } 285} 286 287@Entry 288@Component 289struct updaterDemo4 { 290 @State btnState: boolean = false; 291 modifier: MyButtonModifier = new MyButtonModifier(); 292 293 build() { 294 Row() { 295 Column() { 296 Button("Test") 297 .onClick(() => { 298 this.btnState = !this.btnState; 299 }) 300 301 if (this.btnState) { 302 Button("Button") 303 .attributeModifier(this.modifier) 304 } else { 305 Button("Button") 306 .attributeModifier(this.modifier) 307 } 308 } 309 .width('100%') 310 } 311 .height('100%') 312 } 313} 314```
