!20768 修改示例代码,添加多实例描述

Merge pull request !20768 from huangdong/002bug-fix

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

@@ -198,7 +198,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.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)

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

@@ -34,6 +34,26 @@ getFont(): Font
 uiContext.getFont();
 ```
 
+### getUIInspector
+
+getUIInspector(): UIInspector
+
+获取UIInspector对象。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**返回值：**
+
+| 类型  | 说明          |
+| ----- | ----------------- |
+| [UInspector](#uiinspector) | 返回UIInspector实例对象。 |
+
+**示例：**
+
+```ts
+uiContext.getUIInspector();
+```
+
 ### getMediaQuery
 
 getMediaQuery(): MediaQuery
@@ -490,6 +510,37 @@ font.registerFont({
 });
 ```
 
+## UIInspector
+
+以下API需先使用UIContext中的[getUIInspector()](#getuiinspector)方法获取到UIInspector对象，再通过该对象调用对应方法。
+
+### createComponentObserver
+
+createComponentObserver(id: string): ComponentObserver
+
+注册组件布局和绘制完成回调通知。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名     | 类型                          | 必填   | 说明          |
+| ------- | --------------------------- | ---- | ----------- |
+| id | string | 是    | 指定组件id。 |
+
+**返回值：** 
+
+| 类型                                    | 说明                                               |
+| --------------------------------------- | -------------------------------------------------- |
+| [ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | 组件回调事件监听句柄，用于注册和取消注册监听回调。 |
+
+**示例：**
+
+```ts
+let inspector = uiContext.getUIInspector();
+let listener = inspector.createComponentObserver('COMPONENT_ID');
+```
+
 ## MediaQuery
 
 以下API需先使用UIContext中的[getMediaQuery()](#getmediaquery)方法获取到MediaQuery对象，再通过该对象调用对应方法。

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

@@ -5,7 +5,8 @@
 > **说明：**
 >
 > 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
+>
+> 从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)对象。
 
 ## 导入模块
 
@@ -13,7 +14,6 @@
 import inspector from '@ohos.arkui.inspector'
 ```
 
-
 ## inspector.createComponentObserver
 
 createComponentObserver(id: string): ComponentObserver
@@ -37,10 +37,9 @@ createComponentObserver(id: string): ComponentObserver
 **示例：** 
 
 ```js
-let listener = inspector.createComponentObserver('1000'); //监听id为1000的组件回调事件
+let listener = inspector.createComponentObserver('COMPONENT_ID'); //监听id为COMPONENT_ID的组件回调事件
 ```
 
-
 ## ComponentObserver
 
 组件布局绘制完成回调的句柄，包含了申请句柄时的首次查询结果。
@@ -55,8 +54,8 @@ on(type: 'layout', callback: () => void): void
 
 **参数：** 
 
-| 参数名   | 类型   | 必填 | 说明                                                                                   |
-| -------- | ------ | ---- | -------------------------------------------------------------------------------------- |
+| 参数名   | 类型   | 必填 | 说明|
+| -------- | ------ | ---- | -------------------------------------|
 | type     | string | 是   | 必须填写字符串'layout'或'draw'。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
 | callback | void   | 是   | 监听layout或draw的回调。|
 
@@ -70,10 +69,10 @@ off(type: 'layout', callback?: () => void): void
 
 **参数：** 
 
-| 参数名   | 类型   | 必填 | 说明                                                                                   |
-| -------- | ------ | ---- | -------------------------------------------------------------------------------------- |
+| 参数名   | 类型   | 必填 | 说明 |
+| -------- | ------ | ---- | -------------------------------------------- |
 | type     | string | 是   | 必须填写字符串'layout'或‘draw’。<br>layout: 组件布局完成。<br>draw: 组件绘制完成。 |
-| callback | void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。                             |
+| callback | void   | 否   | 需要取消注册的回调，如果参数缺省则取消注册该句柄下所有的回调。|
 
 **示例：**
 
@@ -91,13 +90,13 @@ struct ImageExample {
             .width(110)
             .height(110)
             .border({ width: 1 })
-            .id('1000')
+            .id('IMAGE_ID')
         }
       }
     }.height(320).width(360).padding({ right: 10, top: 10 })
   }
 
-  listener = inspector.createComponentObserver('1000')
+  listener = inspector.createComponentObserver('IMAGE_ID')
 
   aboutToAppear() {
     let FuncLayout = this.onLayoutComplete.bind(this) // bind current js instance