1# Component Size Change Event 2 3The size change event is triggered whenever the component's size changes. 4 5> **NOTE** 6> 7> This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8 9## onSizeChange 10 11onSizeChange(event: SizeChangeCallback): T 12 13Triggered when the component size changes due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**. 14 15**Widget capability**: This API can be used in ArkTS widgets since API version 12. 16 17**Atomic service API**: This API can be used in atomic services since API version 12. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory| Description | 24| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 25| event | [SizeChangeCallback](#sizechangecallback) | Yes | Size of the component before and after the change.| 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Current component.| 32 33## SizeChangeCallback 34 35SizeChangeCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void 36 37Invoked when the component size changes. 38 39**Widget capability**: This API can be used in ArkTS widgets since API version 12. 40 41**Atomic service API**: This API can be used in atomic services since API version 12. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name | Type | Mandatory| Description | 48| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 49| oldValue | [SizeOptions](ts-types.md#sizeoptions) | Yes | Width and height of the component before the change.| 50| newValue | [SizeOptions](ts-types.md#sizeoptions) | Yes | Width and height of the component after the change.| 51 52 53## Example 54 55This example demonstrates how to set a size change event for a **Text** component. When the size of the **Text** component changes, the **onSizeChange** event is triggered, allowing you to obtain relevant parameters. 56 57```ts 58// xxx.ets 59@Entry 60@Component 61struct AreaExample { 62 @State value: string = 'Text' 63 @State sizeValue: string = '' 64 65 build() { 66 Column() { 67 Text(this.value) 68 .backgroundColor(Color.Green) 69 .margin(30) 70 .fontSize(20) 71 .onClick(() => { 72 this.value = this.value + 'Text' 73 }) 74 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 75 console.info(`Ace: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 76 this.sizeValue = JSON.stringify(newValue) 77 }) 78 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 79 } 80 .width('100%').height('100%').margin({ top: 30 }) 81 } 82} 83``` 84 85
