鸿蒙5.0版开发：ArkTS组件（组件区域变化事件）

组件区域变化事件

组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。

说明：

从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

onAreaChange回调执行仅与本组件有关，对祖先或子孙组件上的onAreaChange的回调没有严格的执行顺序和限制保障。

onAreaChange

onAreaChange(event: (oldValue: Area, newValue: Area) => void): T

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
oldValue	Area	是	返回目标元素变化之前的宽高以及目标元素相对父元素和页面左上角的坐标位置。
newValue	Area	是	返回目标元素变化之后的宽高以及目标元素相对父元素和页面左上角的坐标位置。

返回值：

类型	说明
T	返回当前组件。

示例

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

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。

为帮助想转行鸿蒙或正在学习鸿蒙的开发者们提升全面技能、有机会入职BATJ等大厂公司，特别制作了这个专辑——这一次鸿蒙全套资料整体放出。

内容包含了：ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战、BAT大厂面试真题等等—鸿蒙（HarmonyOS NEXT）技术知识点学习资料。

需要获取以上提到的这些全套鸿蒙学习资料的（全套资料+大厂面试真题），请麻烦关注+好评之后。

直接点击此→【点我直接获取】  即可获取哦~~

HarmonyOS NEXT（5.0版）南向+北向进阶学习路线

HarmonyOS NEXT全套学习资料：（南向开发+北向开发+BATJ面试真题）

看完三件事❤️

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注作者公众号 『 蜀道衫 』，不定期分享原创知识。
• 关注后回复【666】扫码即可获取学习资料包。
• 同时可以期待后续文章ing🚀。