1# 组件尺寸变化事件
2
3该事件指组件显示的尺寸发生变化时触发的事件。
4
5>  **说明：**
6>
7>  从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## onSizeChange
10
11onSizeChange(event: SizeChangeCallback): T
12
13组件区域变化时触发该回调。仅会响应由布局变化所导致的组件尺寸发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。
14
15**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
16
17**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
18
19**系统能力：** SystemCapability.ArkUI.ArkUI.Full
20
21**参数：**
22
23| 参数名   | 类型                      | 必填 | 说明                                                         |
24| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
25| event | [SizeChangeCallback](#sizechangecallback) | 是   | 目标元素变化前后的尺寸。 |
26
27**返回值：**
28
29| 类型 | 说明 |
30| -------- | -------- |
31| T | 返回当前组件。 |
32
33## SizeChangeCallback
34
35SizeChangeCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void
36
37组件区域变化时的回调类型。
38
39**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
40
41**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
42
43**系统能力：** SystemCapability.ArkUI.ArkUI.Full
44
45**参数：**
46
47| 参数名   | 类型                      | 必填 | 说明                                                         |
48| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
49| oldValue | [SizeOptions](ts-types.md#sizeoptions) | 是   | 目标元素变化之前的宽高。 |
50| newValue | [SizeOptions](ts-types.md#sizeoptions) | 是   | 目标元素变化之后的宽高。 |
51
52
53## 示例
54
55该示例通过Text组件设置组件尺寸变化事件，当Text尺寸变化时可以触发onSizeChange事件，获取相关参数。
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![onSizeChange](figures/onSizeChange.gif)
85