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 '@kit.ArkUI'
15```
16
17## inspector.createComponentObserver
18
19createComponentObserver(id: string): ComponentObserver
20
21Creates an observer for the specified component.
22
23**Atomic service API**: This API can be used in atomic services since API version 12.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Parameters**
28
29| Name| Type  | Mandatory| Description      |
30| ------ | ------ | ---- | ---------- |
31| id     | string | Yes  | Component ID.|
32
33**Return value**
34
35| Type             | Description                                            |
36| ----------------- | ------------------------------------------------ |
37|[ComponentObserver](#componentobserver)| Component observer, which is used to register and unregister listeners.|
38
39**Example**
40
41```ts
42let listener:inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID'); // Listen for callback events of the component whose ID is COMPONENT_ID.
43```
44
45## ComponentObserver
46
47Implements a component observer for completion of component layout and drawing, including the first query result when the observer is requested.
48
49### on
50
51on(type: 'layout', callback: () => void): void
52
53Registers a listener for completion of component layout.
54
55**Atomic service API**: This API can be used in atomic services since API version 12.
56
57**System capability**: SystemCapability.ArkUI.ArkUI.Full
58
59**Parameters**
60
61| Name  | Type  | Mandatory| Description|
62| -------- | ------ | ---- | -------------------------------------|
63| 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.|
64| callback | void   | Yes  | Callback invoked upon completion of component layout or drawing.|
65
66### off
67
68off(type: 'layout', callback?: () => void): void
69
70Unregisters the listener for completion of component layout.
71
72**Atomic service API**: This API can be used in atomic services since API version 12.
73
74**System capability**: SystemCapability.ArkUI.ArkUI.Full
75
76**Parameters**
77
78| Name  | Type  | Mandatory| Description|
79| -------- | ------ | ---- | -------------------------------------------- |
80| 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.|
81| callback | void   | No  | Callback to unregister. If this parameter is not specified, all callbacks of the specified type are unregistered.|
82
83### on
84
85on(type: 'draw', callback: () => void): void
86
87Registers a listener for completion of component drawing.
88
89**Atomic service API**: This API can be used in atomic services since API version 12.
90
91**System capability**: SystemCapability.ArkUI.ArkUI.Full
92
93**Parameters**
94
95| Name  | Type  | Mandatory| Description                                                        |
96| -------- | ------ | ---- | ------------------------------------------------------------ |
97| 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.|
98| callback | void   | Yes  | Callback invoked upon completion of component layout or drawing.                                    |
99
100### off
101
102off(type: 'draw', callback?: () => void): void
103
104Unregisters the listener for completion of component drawing.
105
106**Atomic service API**: This API can be used in atomic services since API version 12.
107
108**System capability**: SystemCapability.ArkUI.ArkUI.Full
109
110**Parameters**
111
112| Name  | Type  | Mandatory| Description                                                        |
113| -------- | ------ | ---- | ------------------------------------------------------------ |
114| 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.|
115| callback | void   | No  | Callback to unregister. If this parameter is not specified, all callbacks of the specified type are unregistered.|
116
117**Example**
118
119> **NOTE**
120>
121> You are advised to 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.
122
123  ```ts
124  import { inspector } from '@kit.ArkUI'
125
126  @Entry
127  @Component
128  struct ImageExample {
129    build() {
130      Column() {
131        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
132          Row({ space: 5 }) {
133            Image($r('app.media.app_icon'))
134              .width(110)
135              .height(110)
136              .border({ width: 1 })
137              .id('IMAGE_ID')
138          }
139        }
140      }.height(320).width(360).padding({ right: 10, top: 10 })
141    }
142
143    listener:inspector.ComponentObserver = inspector.createComponentObserver('IMAGE_ID') // You are advised to use this.getUIContext().getUIInspector().createComponentObserver().
144
145    aboutToAppear() {
146      let onLayoutComplete:()=>void=():void=>{
147          // do something here
148      }
149      let onDrawComplete:()=>void=():void=>{
150          // do something here
151      }
152      let offLayoutComplete:()=>void=():void=>{
153          // do something here
154      }
155      let offDrawComplete:()=>void=():void=>{
156          // do something here
157      }
158      let FuncLayout = onLayoutComplete // bind current js instance
159      let FuncDraw = onDrawComplete // bind current js instance
160      let OffFuncLayout = offLayoutComplete // bind current js instance
161      let OffFuncDraw = offDrawComplete // bind current js instance
162
163      this.listener.on('layout', FuncLayout)
164      this.listener.on('draw', FuncDraw)
165
166      // Unregister the callback with the corresponding query condition by using the handle. You can determine when to call this API.
167      // this.listener.off('layout', OffFuncLayout)
168      // this.listener.off('draw', OffFuncDraw)
169    }
170  }
171  ```
172