Add js-apis-arkui-inspector.md

Signed-off-by: Nhuangdong57 <huangdong57@huawei.com>

zh-cn/application-dev/reference/apis/Readme-CN.md

@@ -187,6 +187,7 @@
   - [@ohos.animator (动画)](js-apis-animator.md)
   - [@ohos.arkui.componentSnapshot (组件截图)](js-apis-arkui-componentSnapshot.md)
   - [@ohos.arkui.drawableDescriptor (DrawableDescriptor)](js-apis-arkui-drawableDescriptor.md)
+  - [@ohos.arkui.inspector（布局回调）](js-apis-arkui-inspector.md)
   - [@ohos.arkui.UIContext (UIContext)](js-apis-arkui-UIContext.md)
   - [@ohos.curves (插值计算)](js-apis-curve.md)
   - [@ohos.font (注册自定义字体)](js-apis-font.md)
@@ -485,4 +486,4 @@
     - [remoteAbilityInfo](js-apis-bundle-remoteAbilityInfo.md)
     - [shortcutInfo](js-apis-bundle-ShortcutInfo.md)
   - data/rdb
-    - [resultSet (结果集)](js-apis-data-resultset.md) 
\ No newline at end of file
+    - [resultSet (结果集)](js-apis-data-resultset.md) 

zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md

+# @ohos.arkui.inspector (布局回调)
+
+提供注册组件布局和绘制完成回调通知的能力。
+
+> **说明：**
+>
+> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## 导入模块
+
+```js
+import inspector from '@ohos.arkui.inspector'
+```
+
+
+## inspector.createComponentObserver
+
+createComponentObserver(id: string): ComponentObserver
+
+绑定指定组件，返回对应的监听句柄。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：** 
+
+| 参数名 | 类型   | 必填 | 说明       |
+| ------ | ------ | ---- | ---------- |
+| id     | string | 是   | 指定组件id。 |
+
+**返回值：** 
+
+| 类型              | 说明                                             |
+| ----------------- | ------------------------------------------------ |
+|[ComponentObserver](#componentobserver)| 组件回调事件监听句柄，用于注册和取消注册监听回调。 |
+
+**示例：** 
+
+```js
+let listener = inspector.createComponentObserver('1000'); //监听id为1000的组件回调事件
+```
+
+
+## ComponentObserver
+
+组件布局绘制完成回调的句柄，包含了申请句柄时的首次查询结果。
+
+### on
+
+on(type: 'layout', callback: () => void): void
+
+通过句柄向对应的查询条件注册回调，当组件布局或者绘制完成时会触发该回调。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：** 
+
+| 参数名   | 类型   | 必填 | 说明                                                                                   |
+| -------- | ------ | ---- | -------------------------------------------------------------------------------------- |
+| type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
+| callback | void   | 是   | 监听layout或draw的回调。|
+
+### off
+
+off(type: 'layout', callback: () => void): void
+
+通过句柄向对应的查询条件取消注册回调，当组件布局或者绘制完成时不在触发指定的回调。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：** 
+
+| 参数名   | 类型   | 必填 | 说明                                                                                   |
+| -------- | ------ | ---- | -------------------------------------------------------------------------------------- |
+| type     | string | 是   | 必须填写字符串'layout'或‘draw’。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
+| callback | void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。                             |
+
+**示例：**
+
+  ```js
+import inspector from '@ohos.arkui.inspector';
+
+@Entry
+@Component
+struct ImageExample {
+    build() {
+      Column() {
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.  Start }) {
+          Row({ space: 5 }) {
+            Image($r('app.media.app_icon'))
+              .width(110)
+              .height(110)
+              .border({ width: 1 })
+              .key('1000')
+          }
+        }
+      }
+    }.height(320).width(360).padding({ right: 10, top: 10 })
+  }
+
+  listener = inspector.createComponentObserver('1000')
+
+  aboutToAppear() {
+    let FuncLayout = this.onLayoutComplete.bind(this) // bind current js instance
+    let FuncDraw = this.onDrawComplete.bind(this) // bind current js instance
+    
+    this.listener.on('layout', FuncLayout)
+    this.listener.on('draw', FuncDraw)
+  }
+
+  onLayoutComplete() {
+    // do something here
+  }
+  
+  onDrawComplete() {
+    // do something here
+  }
+}
+  ```
\ No newline at end of file