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