HarmonyOS 鸿蒙Next页面绘制完成后如何获取某个view的宽高和位置

HarmonyOS 鸿蒙Next页面绘制完成后如何获取某个view的宽高和位置 【关键字】

• 页面绘制
• view
• 宽高
• 位置

【问题描述】

怎么在页面绘制完成后获取某个view的宽高和位置？需要页面绘制后根据组件宽高，设置子窗口大小。

其中主要问题如下：

• 获取绘制完成后组件最终宽高。
• 设置子窗口时好像需要根据屏幕分辨率去计算实际大小，应该怎么计算？

【解决方案】

使用组件区域变化事件来监控组件变化时组件的位置和宽高。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#示例

示例demo如下：

@Entry
@Component
struct a {
@State value: string = 'Text142542535354'
@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得到的单位是vp，resize是px，这个要去换算一下。