HarmonyOS(47) onSizeChange和onAreaChange

onSizeChange

组件区域变化时触发该回调。仅会响应由布局变化所导致的组件尺寸发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。

// 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 })}
}

onAreaChange

组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。

// 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'}).onAreaChange((oldValue: Area, newValue: Area) => {console.info(`Ace: on area 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 })}
}

onAreaChange和onSizeChange的区别

因为size的变化，必定会因此areai变化，所以

• onSizeChange调用的时候一定会触发onAreaChange
• onAreaChage调用的时候不一定会触发onSizeChange
  结合PanGesture手势事件，实验代码如下：

// xxx.ets
@Entry
@Component
struct PanGestureExample {@State offsetX: number = 0@State offsetY: number = 0positionX: number = 0positionY: number = 0private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All })@State mHeight:number = 200;build() {Column() {Column() {Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)}.height(this.mHeight).width(300).padding(20).border({ width: 3 }).margin(50).onClick(()=>{console.info('Pan click')// this.mHeight +=5;})  .onAreaChange((oldValue: Area, newValue: Area) => {console.error(`PanGesture onAreaChange: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)})  .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {console.info(`PanGesture onSizeChange: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)}).translate({ x: this.offsetX, y: this.offsetY }) // 以组件左上角为坐标原点进行移动，此处也可以调用position({ x: this.offsetX, y: this.offsetY }) 方法// 左右拖动触发该手势事件.gesture(PanGesture(this.panOption).onActionStart((event: GestureEvent) => {console.info('Pan start')}).onActionUpdate((event: GestureEvent) => {if (event) {this.offsetX = this.positionX + event.offsetXthis.offsetY = this.positionY + event.offsetY}}).onActionEnd((event: GestureEvent) => {//记录拖动结束前停留的位置this.positionX = this.offsetXthis.positionY = this.offsetYconsole.info('Pan end')}))}}
}

参考资料

HarmonyOS(45) 控件拖动或者拖拽PanGesture
组件尺寸变化事件
组件区域变化事件