• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.inspector (布局回调)
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @pengzhiwen3-->
5<!--Designer: @lmleon-->
6<!--Tester: @fredyuan0912-->
7<!--Adviser: @HelloCrease-->
8
9提供注册组件布局和组件绘制送显完成回调通知的能力。
10
11> **说明：**
12>
13> 从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14
15## 导入模块
16
17<!--deprecated_code_no_check-->
18```ts
19import { inspector } from '@kit.ArkUI';
20```
21
22## inspector.createComponentObserver<sup>(deprecated)</sup>
23
24createComponentObserver(id: string): ComponentObserver
25
26绑定指定组件，返回对应的监听句柄。
27
28> **说明：**
29>
30> 从API version 18开始废弃，建议使用[UIContext](arkts-apis-uicontext-uicontext.md)中的[getUIInspector](arkts-apis-uicontext-uicontext.md#getuiinspector)获取[UIInspector](arkts-apis-uicontext-uiinspector.md)实例，再通过此实例调用替代方法[createComponentObserver](arkts-apis-uicontext-uiinspector.md#createcomponentobserver)。
31>
32> 从API version 10开始，可以通过使用[UIContext](arkts-apis-uicontext-uicontext.md)中的[getUIInspector](arkts-apis-uicontext-uicontext.md#getuiinspector)方法获取当前UI上下文关联的[UIInspector](arkts-apis-uicontext-uiinspector.md)对象。
33
34**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
35
36**系统能力：** SystemCapability.ArkUI.ArkUI.Full
37
38**参数：**
39
40| 参数名 | 类型   | 必填 | 说明       |
41| ------ | ------ | ---- | ---------- |
42| id     | string | 是   | 指定组件id，该id通过通用属性[id](./arkui-ts/ts-universal-attributes-component-id.md#id)或者[key](./arkui-ts/ts-universal-attributes-component-id.md#key12)设置。 |
43
44**返回值：**
45
46| 类型              | 说明                                             |
47| ----------------- | ------------------------------------------------ |
48|[ComponentObserver](#componentobserver)| 组件回调事件监听句柄，用于注册和取消注册监听回调。 |
49
50**示例：**
51
52```ts
53let listener:inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID'); //监听id为COMPONENT_ID的组件回调事件
54```
55
56## ComponentObserver
57
58组件布局和组件绘制送显完成回调的句柄，包含了申请句柄时的首次查询结果。
59
60### on('layout')
61
62on(type: 'layout', callback: () => void): void
63
64通过句柄向对应的查询条件注册回调，当组件布局完成时会触发该回调。
65
66**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
67
68**系统能力：** SystemCapability.ArkUI.ArkUI.Full
69
70**参数：**
71
72| 参数名   | 类型   | 必填 | 说明|
73| -------- | ------ | ---- | -------------------------------------|
74| type     | string | 是   | 必须填写字符串'layout'。<br>layout: 组件布局完成。|
75| callback | () => void   | 是   | 监听layout的回调。|
76
77### off('layout')
78
79off(type: 'layout', callback?: () => void): void
80
81通过句柄向对应的查询条件取消注册回调，当组件布局完成时不再触发指定的回调。
82
83**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
84
85**系统能力：** SystemCapability.ArkUI.ArkUI.Full
86
87**参数：**
88
89| 参数名   | 类型   | 必填 | 说明 |
90| -------- | ------ | ---- | -------------------------------------------- |
91| type     | string | 是   | 必须填写字符串'layout'。<br>layout: 组件布局完成。|
92| callback | () => void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。callback需要和[on('layout')](#onlayout)方法中的callback为相同对象时才能取消回调成功。|
93
94### on('draw')
95
96on(type: 'draw', callback: () => void): void
97
98通过句柄向对应的查询条件注册回调，当组件绘制送显完成时会触发该回调。
99
100**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
101
102**系统能力：** SystemCapability.ArkUI.ArkUI.Full
103
104**参数：**
105
106| 参数名   | 类型   | 必填 | 说明                                                         |
107| -------- | ------ | ---- | ------------------------------------------------------------ |
108| type     | string | 是   | 必须填写字符串'draw'。<br>draw: 组件绘制送显完成。|
109| callback | () => void   | 是   | 监听draw的回调。                                     |
110
111### off('draw')
112
113off(type: 'draw', callback?: () => void): void
114
115通过句柄向对应的查询条件取消注册回调，当组件绘制送显完成时不再触发指定的回调。
116
117**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
118
119**系统能力：** SystemCapability.ArkUI.ArkUI.Full
120
121**参数：**
122
123| 参数名   | 类型   | 必填 | 说明                                                         |
124| -------- | ------ | ---- | ------------------------------------------------------------ |
125| type     | string | 是   | 必须填写字符串'draw'。<br>draw: 组件绘制送显完成。|
126| callback | () => void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。callback需要和[on('draw')](#ondraw)方法中的callback为相同对象时才能取消回调成功。 |
127
128### on('drawChildren')<sup>20+<sup>
129
130on(type: 'drawChildren',  callback: Callback\<void\>): void
131
132通过[ComponentObserver](#componentobserver)注册drawChildren事件回调方法，当组件的子组件绘制送显完成时会触发该回调方法。如果组件树中存在多个drawChildren事件回调，只会触发在最顶层的drawChildren事件回调。
133
134**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。
135
136**系统能力：** SystemCapability.ArkUI.ArkUI.Full
137
138**参数：**
139
140| 参数名   | 类型   | 必填 | 说明                                                         |
141| -------- | ------ | ---- | ------------------------------------------------------------ |
142| type     | string | 是   | 必须填写字符串'drawChildren'。<br>drawChildren: 子组件绘制送显完成。|
143| callback | Callback\<void\>  | 是   | 监听drawChildren的回调。                                     |
144
145### off('drawChildren')<sup>20+<sup>
146
147off(type: 'drawChildren', callback?: Callback\<void\>): void
148
149通过句柄向对应的查询条件取消注册回调，当组件绘制送显完成时不再触发指定的回调。
150
151**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。
152
153**系统能力：** SystemCapability.ArkUI.ArkUI.Full
154
155**参数：**
156
157| 参数名   | 类型   | 必填 | 说明                                                         |
158| -------- | ------ | ---- | ------------------------------------------------------------ |
159| type     | string | 是   | 必须填写字符串'drawChildren'。<br>drawChildren: 子组件绘制送显完成。|
160| callback | Callback\<void\>   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。callback需要和[on('drawChildren')20+](#ondrawchildren20)方法中的callback为相同对象时才能取消回调成功。 |
161
162**示例：**
163
164> **说明：**
165>
166> 推荐通过使用[UIContext](./arkts-apis-uicontext-uicontext.md)中的[getUIInspector](./arkts-apis-uicontext-uicontext.md#getuiinspector)方法获取当前UI上下文关联的[UIInspector](arkts-apis-uicontext-uiinspector.md)对象。
167
168  ```ts
169  import { inspector } from '@kit.ArkUI'
170
171  @Entry
172  @Component
173  struct ImageExample {
174    build() {
175      Column() {
176        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
177          Row({ space: 5 }) {
178            Image($r('app.media.app_icon'))
179              .width(110)
180              .height(110)
181              .border({ width: 1 })
182              .id('IMAGE_ID')
183          }
184        }
185      }.height(320).width(360).padding({ right: 10, top: 10 })
186    }
187
188    listener:inspector.ComponentObserver = this.getUIContext().getUIInspector().createComponentObserver('IMAGE_ID')
189
190    aboutToAppear() {
191      let onLayoutComplete:()=>void=():void=>{
192          // do something here
193      }
194      let onDrawComplete:()=>void=():void=>{
195          // do something here
196      }
197      let onDrawChildrenComplete:()=>void=():void=>{
198          // do something here
199      }
200      let FuncLayout = onLayoutComplete // bind current js instance
201      let FuncDraw = onDrawComplete // bind current js instance
202      let FuncDrawChildren = onDrawChildrenComplete // bind current js instance
203      let OffFuncLayout = onLayoutComplete // bind current js instance
204      let OffFuncDraw = onDrawComplete // bind current js instance
205      let OffFuncDrawChildren = onDrawChildrenComplete // bind current js instance
206
207      this.listener.on('layout', FuncLayout)
208      this.listener.on('draw', FuncDraw)
209      this.listener.on('drawChildren', FuncDrawChildren)
210
211      // 通过句柄向对应的查询条件取消注册回调，由开发者自行决定在何时调用。
212      // this.listener.off('layout', OffFuncLayout)
213      // this.listener.off('draw', OffFuncDraw)
214      // this.listener.off('drawChildren', OffFuncDrawChildren)
215    }
216  }
217  ```
218