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