1# 组件区域变化事件 2 3组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## onAreaChange 10 11onAreaChange(event: (oldValue: Area, newValue: Area) => void): T 12 13组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。 14 15**系统能力：** SystemCapability.ArkUI.ArkUI.Full 16 17**参数：** 18 19| 参数名 | 类型 | 必填 | 说明 | 20| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 21| oldValue | [Area](ts-types.md#area8) | 是 | 返回目标元素变化之前的宽高以及目标元素相对父元素和页面左上角的坐标位置。 | 22| newValue | [Area](ts-types.md#area8) | 是 | 返回目标元素变化之后的宽高以及目标元素相对父元素和页面左上角的坐标位置。 | 23 24**返回值：** 25 26| 类型 | 说明 | 27| -------- | -------- | 28| T | 返回当前组件。 | 29 30## 示例 31 32```ts 33// xxx.ets 34@Entry 35@Component 36struct AreaExample { 37 @State value: string = 'Text' 38 @State sizeValue: string = '' 39 40 build() { 41 Column() { 42 Text(this.value) 43 .backgroundColor(Color.Green) 44 .margin(30) 45 .fontSize(20) 46 .onClick(() => { 47 this.value = this.value + 'Text' 48 }) 49 .onAreaChange((oldValue: Area, newValue: Area) => { 50 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 51 this.sizeValue = JSON.stringify(newValue) 52 }) 53 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 54 } 55 .width('100%').height('100%').margin({ top: 30 }) 56 } 57} 58``` 59 60
