1# 组件区域变化事件 2 3组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 事件 11 12| 名称 | 支持冒泡 | 功能描述 | 13| ---------------------------------------- | ---- | ---------------------------------------- | 14| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否 | 组件区域变化时触发该回调。 | 15 16 17## 示例 18 19```ts 20// xxx.ets 21@Entry 22@Component 23struct AreaExample { 24 @State value: string = 'Text' 25 @State sizeValue: string = '' 26 27 build() { 28 Column() { 29 Text(this.value) 30 .backgroundColor(Color.Green).margin(30).fontSize(20) 31 .onClick(() => { 32 this.value = this.value + 'Text' 33 }) 34 .onAreaChange((oldValue: Area, newValue: Area) => { 35 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 36 this.sizeValue = JSON.stringify(newValue) 37 }) 38 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 39 } 40 .width('100%').height('100%').margin({ top: 30 }) 41 } 42} 43``` 44 45
