1# 组件尺寸变化事件 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9该事件指组件显示的尺寸发生变化时触发的事件。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 该事件返回的宽高是组件绘制出来的宽高，可能与组件设置的宽高不同。 16 17## onSizeChange 18 19onSizeChange(event: SizeChangeCallback): T 20 21组件区域变化时触发该回调。仅会响应由布局变化所导致的组件尺寸发生变化时的回调。 22 23>**说明：** 24> 25> 1. 该接口在布局发生变化时触发，由于计算精度的关系，其返回值可能与真实物理尺寸存在细微的差异。 26> 27> 2. onSizeChange是布局过程中触发的同步回调，直接在其中更改状态变量存在被纳入动画闭包的风险。具体而言，动画会对比动画前的布局与动画闭包后的布局，若onSizeChange的回调在动画前的布局中同步触发，那么onSizeChange回调中所做的变更将与动画闭包中的变更一同纳入动画过程。为了避免此类问题，可在onSizeChange中使用延迟时间为0的[setTimeOut](../../../reference/common/js-apis-timer.md#settimeout)或[postFrameCallback](../../../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#postframecallback12)，将UI处理逻辑延后至异步执行。 28 29**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 30 31**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 39| event | [SizeChangeCallback](#sizechangecallback) | 是 | 目标元素变化前后的尺寸。 | 40 41**返回值：** 42 43| 类型 | 说明 | 44| -------- | -------- | 45| T | 返回当前组件。 | 46 47## SizeChangeCallback 48 49type SizeChangeCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void 50 51组件区域变化时的回调类型。 52 53**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 54 55**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 56 57**系统能力：** SystemCapability.ArkUI.ArkUI.Full 58 59**参数：** 60 61| 参数名 | 类型 | 必填 | 说明 | 62| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 63| oldValue | [SizeOptions](ts-types.md#sizeoptions) | 是 | 目标元素变化之前的宽高。 | 64| newValue | [SizeOptions](ts-types.md#sizeoptions) | 是 | 目标元素变化之后的宽高。 | 65 66 67## 示例 68 69该示例通过Text组件设置组件尺寸变化事件，当Text尺寸变化时可以触发onSizeChange事件，获取相关参数。 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct AreaExample { 76 @State value: string = 'Text' 77 @State sizeValue: string = '' 78 79 build() { 80 Column() { 81 Text(this.value) 82 .backgroundColor(Color.Green) 83 .margin(30) 84 .fontSize(20) 85 .onClick(() => { 86 this.value = this.value + 'Text' 87 }) 88 .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { 89 console.info(`Ace: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 90 this.sizeValue = JSON.stringify(newValue) 91 }) 92 Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 93 } 94 .width('100%').height('100%').margin({ top: 30 }) 95 } 96} 97``` 98 99
