• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.inspector (Layout Callback)
2
3The **Inspector** module provides APIs for registering the component layout and drawing completion callbacks.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> Since API version 10, you can use the [getUIInspector](./js-apis-arkui-UIContext.md#getuiinspector) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [UIInspector](./js-apis-arkui-UIContext.md#uiinspector) object associated with the current UI context.
10
11## Modules to Import
12
13```ts
14import inspector from '@ohos.arkui.inspector'
15```
16
17## inspector.createComponentObserver
18
19createComponentObserver(id: string): ComponentObserver
20
21Creates an observer for the specified component.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type  | Mandatory| Description      |
28| ------ | ------ | ---- | ---------- |
29| id     | string | Yes  | Component ID.|
30
31**Return value**
32
33| Type             | Description                                            |
34| ----------------- | ------------------------------------------------ |
35|[ComponentObserver](#componentobserver)| Component observer, which is used to register and unregister listeners.|
36
37**Example**
38
39```ts
40let listener:inspector = inspector.createComponentObserver('COMPONENT_ID'); // Listen for callback events of the component whose ID is COMPONENT_ID.
41```
42
43## ComponentObserver
44
45Implements a component observer for completion of component layout and drawing, including the first query result when the observer is requested.
46
47### on
48
49on(type: 'layout', callback: () => void): void
50
51Registers a listener for completion of component layout.
52
53**System capability**: SystemCapability.ArkUI.ArkUI.Full
54
55**Parameters**
56
57| Name  | Type  | Mandatory| Description|
58| -------- | ------ | ---- | -------------------------------------|
59| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
60| callback | void   | Yes  | Callback invoked upon completion of component layout or drawing.|
61
62### off
63
64off(type: 'layout', callback?: () => void): void
65
66Unregisters the listener for completion of component layout.
67
68**System capability**: SystemCapability.ArkUI.ArkUI.Full
69
70**Parameters**
71
72| Name  | Type  | Mandatory| Description|
73| -------- | ------ | ---- | -------------------------------------------- |
74| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
75| callback | void   | No  | Callback to unregister. If this parameter is not specified, all callbacks of the specified type are unregistered.|
76
77### on
78
79on(type: 'draw', callback: () => void): void
80
81Registers a listener for completion of component drawing.
82
83**System capability**: SystemCapability.ArkUI.ArkUI.Full
84
85**Parameters**
86
87| Name  | Type  | Mandatory| Description                                                        |
88| -------- | ------ | ---- | ------------------------------------------------------------ |
89| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
90| callback | void   | Yes  | Callback invoked upon completion of component layout or drawing.                                    |
91
92### off
93
94off(type: 'draw', callback?: () => void): void
95
96Unregisters the listener for completion of component drawing.
97
98**System capability**: SystemCapability.ArkUI.ArkUI.Full
99
100**Parameters**
101
102| Name  | Type  | Mandatory| Description                                                        |
103| -------- | ------ | ---- | ------------------------------------------------------------ |
104| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
105| callback | void   | No  | Callback to unregister. If this parameter is not specified, all callbacks of the specified type are unregistered.|
106
107**Example**
108
109  ```ts
110  import inspector from '@ohos.arkui.inspector'
111
112  @Entry
113  @Component
114  struct ImageExample {
115    build() {
116      Column() {
117        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
118          Row({ space: 5 }) {
119            Image($r('app.media.app_icon'))
120              .width(110)
121              .height(110)
122              .border({ width: 1 })
123              .id('IMAGE_ID')
124          }
125        }
126      }.height(320).width(360).padding({ right: 10, top: 10 })
127    }
128
129    listener:inspector.ComponentObserver = inspector.createComponentObserver('IMAGE_ID')
130
131    aboutToAppear() {
132      let onLayoutComplete:()=>void=():void=>{
133          // do something here
134      }
135      let onDrawComplete:()=>void=():void=>{
136          // do something here
137      }
138      let FuncLayout = onLayoutComplete // bind current js instance
139      let FuncDraw = onDrawComplete // bind current js instance
140
141      this.listener.on('layout', FuncLayout)
142      this.listener.on('draw', FuncDraw)
143    }
144  }
145  ```
146