harmony 鸿蒙Component Size Change Event

2025-06-12
浏览 (4)

Component Size Change Event

The size change event is triggered whenever the component’s size changes.

NOTE

This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.

onSizeChange

onSizeChange(event: SizeChangeCallback): T

Triggered 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.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
event	SizeChangeCallback	Yes	Size of the component before and after the change.

Return value

Type	Description
T	Current component.

SizeChangeCallback

SizeChangeCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void

Invoked when the component size changes.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
oldValue	SizeOptions	Yes	Width and height of the component before the change.
newValue	SizeOptions	Yes	Width and height of the component after the change.

Example

This 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.

// xxx.ets
@Entry
@Component
struct AreaExample {
  @State value: string = 'Text'
  @State sizeValue: string = ''

  build() {
    Column() {
      Text(this.value)
        .backgroundColor(Color.Green)
        .margin(30)
        .fontSize(20)
        .onClick(() => {
          this.value = this.value + 'Text'
        })
        .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
          console.info(`Ace: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
          this.sizeValue = JSON.stringify(newValue)
        })
      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
    }
    .width('100%').height('100%').margin({ top: 30 })
  }
}

onSizeChange