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 '@ohos.arkui.inspector' 15``` 16 17## inspector.createComponentObserver 18 19createComponentObserver(id: string): ComponentObserver 20 21绑定指定组件，返回对应的监听句柄。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------ | ------ | ---- | ---------- | 29| id | string | 是 | 指定组件id。 | 30 31**返回值：** 32 33| 类型 | 说明 | 34| ----------------- | ------------------------------------------------ | 35|[ComponentObserver](#componentobserver)| 组件回调事件监听句柄，用于注册和取消注册监听回调。 | 36 37**示例：** 38 39```ts 40let listener:inspector.ComponentObserver = inspector.createComponentObserver('COMPONENT_ID'); //监听id为COMPONENT_ID的组件回调事件 41``` 42 43## ComponentObserver 44 45组件布局绘制完成回调的句柄，包含了申请句柄时的首次查询结果。 46 47### on 48 49on(type: 'layout', callback: () => void): void 50 51通过句柄向对应的查询条件注册回调，当组件布局完成时会触发该回调。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明| 58| -------- | ------ | ---- | -------------------------------------| 59| type | string | 是 | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 | 60| callback | void | 是 | 监听layout或draw的回调。| 61 62### off 63 64off(type: 'layout', callback?: () => void): void 65 66通过句柄向对应的查询条件取消注册回调，当组件布局完成时不再触发指定的回调。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70**参数：** 71 72| 参数名 | 类型 | 必填 | 说明 | 73| -------- | ------ | ---- | -------------------------------------------- | 74| type | string | 是 | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 | 75| callback | void | 否 | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。| 76 77### on 78 79on(type: 'draw', callback: () => void): void 80 81通过句柄向对应的查询条件注册回调，当组件绘制完成时会触发该回调。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88| -------- | ------ | ---- | ------------------------------------------------------------ | 89| type | string | 是 | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 | 90| callback | void | 是 | 监听layout或draw的回调。 | 91 92### off 93 94off(type: 'draw', callback?: () => void): void 95 96通过句柄向对应的查询条件取消注册回调，当组件绘制完成时不再触发指定的回调。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100**参数：** 101 102| 参数名 | 类型 | 必填 | 说明 | 103| -------- | ------ | ---- | ------------------------------------------------------------ | 104| type | string | 是 | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 | 105| callback | void | 否 | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。 | 106 107**示例：** 108 109 ```ts 110 import inspector from '@ohos.arkui.inspector' 111 112 @Entry 113 @Component 114 struct ImageExample { 115 build() { 116 Column() { 117 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 118 Row({ space: 5 }) { 119 Image($r('app.media.app_icon')) 120 .width(110) 121 .height(110) 122 .border({ width: 1 }) 123 .id('IMAGE_ID') 124 } 125 } 126 }.height(320).width(360).padding({ right: 10, top: 10 }) 127 } 128 129 listener:inspector.ComponentObserver = inspector.createComponentObserver('IMAGE_ID') 130 131 aboutToAppear() { 132 let onLayoutComplete:()=>void=():void=>{ 133 // do something here 134 } 135 let onDrawComplete:()=>void=():void=>{ 136 // do something here 137 } 138 let offLayoutComplete:()=>void=():void=>{ 139 // do something here 140 } 141 let offDrawComplete:()=>void=():void=>{ 142 // do something here 143 } 144 let FuncLayout = onLayoutComplete // bind current js instance 145 let FuncDraw = onDrawComplete // bind current js instance 146 let OffFuncLayout = offLayoutComplete // bind current js instance 147 let OffFuncDraw = offDrawComplete // bind current js instance 148 149 this.listener.on('layout', FuncLayout) 150 this.listener.on('draw', FuncDraw) 151 152 // 通过句柄向对应的查询条件取消注册回调，由开发者自行决定在何时调用。 153 // this.listener.off('layout', OffFuncLayout) 154 // this.listener.off('draw', OffFuncDraw) 155 } 156 } 157 ``` 158