1# AttributeUpdater
2
3**AttributeUpdater** directly set attributes to a component to trigger UI re-renders, without marking them as state variables.
4
5>  **NOTE**
6>
7>  The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8>
9
10
11## Modules to Import
12
13```ts
14import { AttributeUpdater } from '@kit.ArkUI'
15```
16
17>  **Instructions**
18>
19>  1. Whenever possible, avoid using **AttributeUpdater** in conjunction with attribute methods or implementing methods like **applyNormalAttribute** in **AttributeUpdater** to update the same attribute on the same component. Doing so involves mixed use of the state management update mechanism, which can be confusing.
20>
21>  2. When **AttributeUpdater** is used together with an attribute method, the one that is used later takes effect. Specifically:
22>  If use of **AttributeUpdater** is followed by an attribute method call, the attribute method takes effect under the state management mechanism.
23>  If use of **AttributeUpdater** follows an attribute method call, it takes effect.
24>
25>  3. An **AttributeUpdater** object can only be associated with one component at a time; otherwise, the set attributes may only take effect on one component.
26>
27>  4. You need to ensure the type matching of **T** and **C** in **AttributeUpdater** yourself. For example, if **T** is ImageAttribute, **C** should be ImageInterface;
28>  otherwise, it may cause functionality issues when **updateConstructorParams** is used.
29>
30>  5. Currently, **updateConstructorParams** supports only the **Button**, **Image**, **Text**, and **Span** components.
31>
32>  6. **AttributeUpdater** does not support operations related to state management, such as switching between light and dark modes.
33
34## Initializer
35type Initializer\<T> = () => T
36
37Defines a decorator for updating attributes.
38
39**Atomic service API**: This API can be used in atomic services since API version 12.
40
41**System capability**: SystemCapability.ArkUI.ArkUI.Full
42
43## AttributeUpdater<T, C = Initializer\<T>>
44Represents the implementation class of [AttributeModifier](arkui-ts/ts-universal-attributes-attribute-modifier.md#AttributeModifier). You need to customize a class to inherit **AttributeUpdater**.
45
46**C** indicates the constructor type of the component, for example, **TextInterface** of the **Text** component and **ImageInterface** of the **Image** component. It is required only when **updateConstructorParams** is used.
47
48**System capability**: SystemCapability.ArkUI.ArkUI.Full
49
50### applyNormalAttribute
51applyNormalAttribute?(instance: T): void
52
53Defines the function for updating attributes in normal state.
54
55**Atomic service API**: This API can be used in atomic services since API version 12.
56
57**System capability**: SystemCapability.ArkUI.ArkUI.Full
58
59**Parameters**
60
61| Name| Type  | Mandatory| Description                                                                    |
62| ------ | ------ | ---- | ------------------------------------------------------------------------ |
63| instance | T | Yes| Component attribute class, which identifies the type of component to which attributes will be applied, for example, **ButtonAttribute** for the **Button** component and **TextAttribute** for the **Text** component.|
64
65### initializeModifier
66initializeModifier(instance: T): void
67
68Initialize the attributes to the values initially set by **AttributeUpdater** for the component.
69
70**Atomic service API**: This API can be used in atomic services since API version 12.
71
72**System capability**: SystemCapability.ArkUI.ArkUI.Full
73
74**Parameters**
75
76| Name| Type  | Mandatory| Description                                                                    |
77| ------ | ------ | ---- | ------------------------------------------------------------------------ |
78| instance | T | Yes| Component attribute class, which identifies the type of component to which attributes will be applied, for example, **ButtonAttribute** for the **Button** component and **TextAttribute** for the **Text** component.|
79
80**Example**
81
82This example shows how to use **initializeModifier** to initialize attribute values.
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
119Obtains the attribute class instance corresponding to the component in **AttributeUpdater**. The instance can then be used to directly update attributes.
120
121**Atomic service API**: This API can be used in atomic services since API version 12.
122
123**System capability**: SystemCapability.ArkUI.ArkUI.Full
124
125**Return value**
126
127| Type            | Description                                                        |
128| -------------------- | ------------------------------------------------------------ |
129| T \| undefined |Returns the attribute class instance of the component in **AttributeUpdater** if it exists; returns **undefined** otherwise.|
130
131**Example**
132
133This example shows how to directly update attributes through **AttributeUpdater**.
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
172Represents construction parameters used for updating component attributes.
173
174**C** indicates the constructor type of the component, for example, **TextInterface** of the **Text** component and **ImageInterface** of the **Image** component.
175
176**Atomic service API**: This API can be used in atomic services since API version 12.
177
178**System capability**: SystemCapability.ArkUI.ArkUI.Full
179
180**Example**
181
182This example demonstrates how to use **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
222Invoked to notify the application that the component bound to the same custom **Modifier** object changes.
223
224**Atomic service API**: This API can be used in atomic services since API version 12.
225
226**System capability**: SystemCapability.ArkUI.ArkUI.Full
227
228**Parameters**
229
230| Name| Type  | Mandatory| Description                                                                    |
231| ------ | ------ | ---- | ------------------------------------------------------------------------ |
232| component | T | Yes| Component attribute class, which identifies the type of component to which attributes will be applied, for example, **ButtonAttribute** for the **Button** component and **TextAttribute** for the **Text** component.|
233
234**Example**
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```
282