@ohos.arkui.inspector (Layout Callback)

The Inspector module provides APIs for registering the component layout and drawing completion callbacks.

NOTE

The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Since API version 10, you can use the getUIInspector API in UIContext to obtain the UIInspector object associated with the current UI context.

Modules to Import

import inspector from '@ohos.arkui.inspector'

inspector.createComponentObserver

createComponentObserver(id: string): ComponentObserver

Creates an observer for the specified component.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

Example

let listener:inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID'); // Listen for callback events of the component whose ID is COMPONENT_ID.

ComponentObserver

Implements a component observer for completion of component layout and drawing, including the first query result when the observer is requested.

on

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

Registers a listener for completion of component layout.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

off

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

Unregisters the listener for completion of component layout.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

on

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

Registers a listener for completion of component drawing.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

off

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

Unregisters the listener for completion of component drawing.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

import inspector from '@ohos.arkui.inspector'

@Entry
@Component
struct ImageExample {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row({ space: 5 }) {
          Image($r('app.media.app_icon'))
            .width(110)
            .height(110)
            .border({ width: 1 })
            .id('IMAGE_ID')
        }
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }

  listener:inspector.ComponentObserver = inspector.createComponentObserver('IMAGE_ID')

  aboutToAppear() {
    let onLayoutComplete:()=>void=():void=>{
        // do something here
    }
    let onDrawComplete:()=>void=():void=>{
        // do something here
    }
    let offLayoutComplete:()=>void=():void=>{
        // do something here
    }
    let offDrawComplete:()=>void=():void=>{
        // do something here
    }
    let FuncLayout = onLayoutComplete // bind current js instance
    let FuncDraw = onDrawComplete // bind current js instance
    let OffFuncLayout = offLayoutComplete // bind current js instance
    let OffFuncDraw = offDrawComplete // bind current js instance

    this.listener.on('layout', FuncLayout)
    this.listener.on('draw', FuncDraw)

    // Unregister the callback with the corresponding query condition by using the handle. You can determine when to call this API.
    // this.listener.off('layout', OffFuncLayout)
    // this.listener.off('draw', OffFuncDraw)
  }
}