学习笔记（三十二）：[email protected] (布局回调)

概述：

提供注册组件布局和绘制完成回调通知的能力。

import {inspector} from '@kit.ArkUI'

二、绑定指定组件，返回对应的监听句柄

inspector.createComponentObserver

createComponentObserver(id: string): ComponentObserver

三、注册\取消注册 回调

参数：

1、type：必须填写字符串'layout'或'draw'。layout: 组件布局完成。draw: 组件绘制完成。

2、callback，

注册回调on 为 监听layout或draw的回调

取消注册回调off 为 需要注册or取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调

1、注册布局完成回调

on(type: 'layout', callback: () => void): void

2、注册绘制完成回调

on(type: 'draw', callback: () => void): void

3、取消布局注册回调

off(type: 'layout', callback?: () => void): void

4、取消绘制注册回调

off(type: 'draw', callback?: () => void): void

使用示例：

// ArkUi inspector 使用示例
// 提供注册组件布局和绘制完成回调通知的能力。

import {inspector} from '@kit.ArkUI'
@Entry
@Component
struct InspectorExample {
  @State message: string = 'Hello World';
  // 获取inspector
  observer : inspector.ComponentObserver = inspector.createComponentObserver('root')
  // 定义布局监听函数
  onLayoutComplete: ()=>void = ():void=>{}
  // 定义绘制监听函数
  onDrawComplete: ()=>void = ():void=>{}
  aboutToAppear(){
    // 监听组件布局完成时回调
    this.observer.on('layout',()=>{
      console.log('组件布局完成')
    })
    // 监听组件绘制完成时回调
    this.observer.on('draw',()=>{
      console.log('组件绘制完成')
    })
  }
  build() {
    Row() {
      Column() {
        Button('取消指定回调')
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.observer.off('layout',this.onLayoutComplete)
            this.observer.off('draw',this.onDrawComplete)
            console.log('取消指定注册回调')
          })
      }
      .width('100%')
    }
    .height('100%')
    .id('root')
  }
}