1# @ohos.arkui.inspector (布局回调)
2
3提供注册组件布局和绘制完成回调通知的能力。
4
5> **说明：**
6>
7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> 从API version 10开始，可以通过使用[UIContext](./js-apis-arkui-UIContext.md#uicontext)中的[getUIInspector](./js-apis-arkui-UIContext.md#getuiinspector)方法获取当前UI上下文关联的[UIInspector](./js-apis-arkui-UIContext.md#uiinspector)对象。
10
11## 导入模块
12
13```ts
14import { inspector } from '@kit.ArkUI'
15```
16
17## inspector.createComponentObserver
18
19createComponentObserver(id: string): ComponentObserver
20
21绑定指定组件，返回对应的监听句柄。
22
23**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
24
25**系统能力：** SystemCapability.ArkUI.ArkUI.Full
26
27**参数：**
28
29| 参数名 | 类型   | 必填 | 说明       |
30| ------ | ------ | ---- | ---------- |
31| id     | string | 是   | 指定组件id。 |
32
33**返回值：**
34
35| 类型              | 说明                                             |
36| ----------------- | ------------------------------------------------ |
37|[ComponentObserver](#componentobserver)| 组件回调事件监听句柄，用于注册和取消注册监听回调。 |
38
39**示例：**
40
41```ts
42let listener:inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID'); //监听id为COMPONENT_ID的组件回调事件
43```
44
45## ComponentObserver
46
47组件布局绘制完成回调的句柄，包含了申请句柄时的首次查询结果。
48
49### on
50
51on(type: 'layout', callback: () => void): void
52
53通过句柄向对应的查询条件注册回调，当组件布局完成时会触发该回调。
54
55**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
56
57**系统能力：** SystemCapability.ArkUI.ArkUI.Full
58
59**参数：**
60
61| 参数名   | 类型   | 必填 | 说明|
62| -------- | ------ | ---- | -------------------------------------|
63| type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
64| callback | void   | 是   | 监听layout或draw的回调。|
65
66### off
67
68off(type: 'layout', callback?: () => void): void
69
70通过句柄向对应的查询条件取消注册回调，当组件布局完成时不再触发指定的回调。
71
72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
73
74**系统能力：** SystemCapability.ArkUI.ArkUI.Full
75
76**参数：**
77
78| 参数名   | 类型   | 必填 | 说明 |
79| -------- | ------ | ---- | -------------------------------------------- |
80| type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
81| callback | void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。|
82
83### on
84
85on(type: 'draw', callback: () => void): void
86
87通过句柄向对应的查询条件注册回调，当组件绘制完成时会触发该回调。
88
89**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
90
91**系统能力：** SystemCapability.ArkUI.ArkUI.Full
92
93**参数：**
94
95| 参数名   | 类型   | 必填 | 说明                                                         |
96| -------- | ------ | ---- | ------------------------------------------------------------ |
97| type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
98| callback | void   | 是   | 监听layout或draw的回调。                                     |
99
100### off
101
102off(type: 'draw', callback?: () => void): void
103
104通过句柄向对应的查询条件取消注册回调，当组件绘制完成时不再触发指定的回调。
105
106**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
107
108**系统能力：** SystemCapability.ArkUI.ArkUI.Full
109
110**参数：**
111
112| 参数名   | 类型   | 必填 | 说明                                                         |
113| -------- | ------ | ---- | ------------------------------------------------------------ |
114| type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
115| callback | void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。callback需要和on方法中的callback为相同对象时才能取消回调成功。 |
116
117**示例：**
118
119> **说明：**
120>
121> 推荐通过使用[UIContext](./js-apis-arkui-UIContext.md#uicontext)中的[getUIInspector](./js-apis-arkui-UIContext.md#getuiinspector)方法获取当前UI上下文关联的[UIInspector](./js-apis-arkui-UIContext.md#uiinspector)对象。
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') // 建议使用 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 FuncLayout = onLayoutComplete // bind current js instance
153      let FuncDraw = onDrawComplete // bind current js instance
154      let OffFuncLayout = onLayoutComplete // bind current js instance
155      let OffFuncDraw = onDrawComplete // bind current js instance
156
157      this.listener.on('layout', FuncLayout)
158      this.listener.on('draw', FuncDraw)
159
160      // 通过句柄向对应的查询条件取消注册回调，由开发者自行决定在何时调用。
161      // this.listener.off('layout', OffFuncLayout)
162      // this.listener.off('draw', OffFuncDraw)
163    }
164  }
165  ```
166