HarmonyOS(47) onSizeChange和onAreaChange

onSizeChange和onAreaChange

onSizeChange

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

java 复制代码
// 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。

dart 复制代码
// 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手势事件,实验代码如下:
dart 复制代码
// xxx.ets
@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0
  @State offsetY: number = 0
  positionX: number = 0
  positionY: number = 0
  private 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.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd((event: GestureEvent) => {
            //记录拖动结束前停留的位置
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
          })
      )
    }
  }
}

参考资料

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

相关推荐
财经三剑客3 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒3 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo5 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo5 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉5 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1115 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu1 天前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉1 天前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu1 天前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20001 天前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos