• 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 '@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  ```ts
120  import { inspector } from '@kit.ArkUI'
121
122  @Entry
123  @Component
124  struct ImageExample {
125    build() {
126      Column() {
127        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
128          Row({ space: 5 }) {
129            Image($r('app.media.app_icon'))
130              .width(110)
131              .height(110)
132              .border({ width: 1 })
133              .id('IMAGE_ID')
134          }
135        }
136      }.height(320).width(360).padding({ right: 10, top: 10 })
137    }
138
139    listener:inspector.ComponentObserver = inspector.createComponentObserver('IMAGE_ID')
140
141    aboutToAppear() {
142      let onLayoutComplete:()=>void=():void=>{
143          // do something here
144      }
145      let onDrawComplete:()=>void=():void=>{
146          // do something here
147      }
148      let offLayoutComplete:()=>void=():void=>{
149          // do something here
150      }
151      let offDrawComplete:()=>void=():void=>{
152          // do something here
153      }
154      let FuncLayout = onLayoutComplete // bind current js instance
155      let FuncDraw = onDrawComplete // bind current js instance
156      let OffFuncLayout = offLayoutComplete // bind current js instance
157      let OffFuncDraw = offDrawComplete // bind current js instance
158
159      this.listener.on('layout', FuncLayout)
160      this.listener.on('draw', FuncDraw)
161
162      // Unregister the callback with the corresponding query condition by using the handle. You can determine when to call this API.
163      // this.listener.off('layout', OffFuncLayout)
164      // this.listener.off('draw', OffFuncDraw)
165    }
166  }
167  ```
168