HarmonyOS 鸿蒙Next 是否存在组件显示后的自动回调接口以获取组件布局尺寸 例如ondidbuild()

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 是否存在组件显示后的自动回调接口以获取组件布局尺寸 例如ondidbuild()

场景:需要在组件创建,完成布局后,使用this.getUIContext().getFrameNodeById(this.id001).getMeasuredSize()获取组件的实际尺寸。

问题:经过测试,在ondidbuild中获取对应节点,会得到null值,节点不存在。

需求:想知道是否存在组件完成布局后的生命周期回调。

其他:经过测试navdestination的onshown()回调是在布局完成后回调的。

示例代码:

import { hilog } from '@kit.PerformanceAnalysisKit';
import { FrameNode } from '@kit.ArkUI';

@Entry
@Component
struct CSondidbuild {
  @State message: string = 'Hello World';

  build() {
    Column(){
      CSondidbuild2()
    }
    .height('100%')
    .width('100%')

  }
}

@Builder
export function cs(){
  CSondidbuild2()
}

@Component
struct CSondidbuild2{
  private daohangqi:NavPathStack = new NavPathStack();
  readonly id001:string = 'cs001';
  private jiedian:FrameNode|null = this.getUIContext().getFrameNodeById(this.id001);
  private chicun:Size = {
    width:0,
    height:0
  }

  dayinChicun(dj:string){
    this.jiedian = this.getUIContext().getFrameNodeById(this.id001);
    if (this.jiedian) {
      this.chicun = this.jiedian.getMeasuredSize();
      hilog.info(1,dj,`PX-宽:${this.chicun.width},高:${this.chicun.height}`);
      hilog.info(1,dj,`VP-宽:${this.getUIContext().px2vp(this.chicun.width)},高:${this.getUIContext().px2vp(this.chicun.height)}`);
    }else {
      hilog.info(1,dj,`目标节点不存在`);
    }
  }

  onDidBuild(): void {
    hilog.info(1,'cs001组件生命周期onDidBuild','***************');
    this.dayinChicun('cs001组件生命周期onDidBuild');
  }

  build() {
    NavDestination(){
      Column(){
        Button('测试')
          .height(50)
          .width('50%')
          .onClick(() => {
            hilog.info(1,'测试按钮','***************');
            this.dayinChicun('测试按钮');
          })

        cszujian001()
          .height(50)
      }
      .height('100%')
      .width('100%')
      .id(this.id001)
    }
    .title('Eventhub功能测试页')
    .height('100%')
    .width('100%')
    .onShown(() => {
      hilog.info(1,'cs001NAV子页面onshown','***************');
      this.dayinChicun('cs001NAV子页面onshown');
    })
    .onReady((e:NavDestinationContext) => {
      if (e?.pathStack) {
        this.daohangqi = e.pathStack;
      }
    })
  }
}

@Component
struct cszujian001{
  readonly id001:string = 'cs002';
  private jiedian:FrameNode|null = this.getUIContext().getFrameNodeById(this.id001);
  private chicun:Size = {
    width:0,
    height:0
  }

  dayinChicun(dj:string){
    this.jiedian = this.getUIContext().getFrameNodeById(this.id001);
    if (this.jiedian) {
      this.chicun = this.jiedian.getMeasuredSize();
      hilog.info(1,dj,`PX-宽:${this.chicun.width},高:${this.chicun.height}`);
      hilog.info(1,dj,`VP-宽:${this.getUIContext().px2vp(this.chicun.width)},高:${this.getUIContext().px2vp(this.chicun.height)}`);
    }else {
      hilog.info(1,dj,`目标节点不存在`);
    }
  }

  onDidBuild(): void {
    hilog.info(1,'cs002组件生命周期onDidBuild','***************');
    this.dayinChicun('cs002组件生命周期onDidBuild');
  }

  build() {
    Column(){
      Button('测试子组件')
        .height(50)
        .width('45%')
        .onClick(() => {
          hilog.info(1,'测试子组件','***************');
          this.dayinChicun('测试子组件');
        })
    }
    .height('100%')
    .width('100%')
  }
}
2 回复

可以注册组件的layout完成事件监听,布局完成后回调方法中可以获取组件信息。

aboutToAppear(): void {

  this.inspectorListener = inspector.createComponentObserver('columnId'); //监听id为columnId的组件回调事件

  this.inspectorListener.on("layout", () => {

    console.log("layout finished");

    let compUtils: ComponentUtils = this.getUIContext().getComponentUtils();

    let componentInfo: componentUtils.ComponentInfo = compUtils.getRectangleById("columnId");

    console.log(`x: ${componentInfo.screenOffset.x}, y: ${componentInfo.screenOffset.y}`);

  })

}

aboutToDisappear(): void {

  if (this.inspectorListener) {}

  this.inspectorListener?.off('layout');

}

HarmonyOS 鸿蒙Next 存在组件显示后的自动回调接口以获取组件布局尺寸。在HarmonyOS鸿蒙Next中,虽然没有直接名为ondidbuild()的回调接口,但可以通过其他方式在组件显示后获取其布局尺寸。

具体来说,可以使用onAreaChange事件回调。该回调会在组件大小或位置发生变化时被触发,包括在组件首次显示时。通过onAreaChange,你可以获取到组件变化后的宽高以及相对于父元素和页面左上角的坐标位置。这是获取组件布局尺寸的一种有效方式。

请注意,onAreaChange返回的宽高单位可能是vp(虚拟像素),如果需要转换为px(物理像素),可能需要进行额外的换算。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部