• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Class (UIInspector)
2
3提供注册组件布局和组件绘制送显完成回调通知的能力。
4
5> **说明：**
6>
7> - 本模块首批接口从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - 本Class首批接口从API version 10开始支持。
10>
11> - 以下API需先使用UIContext中的[getUIInspector()](arkts-apis-uicontext-uicontext.md#getuiinspector)方法获取到UIInspector对象，再通过该对象调用对应方法。
12
13## createComponentObserver
14
15createComponentObserver(id: string): inspector.ComponentObserver
16
17注册组件布局和组件绘制送显完成回调通知。
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名  | 类型     | 必填   | 说明      |
26| ---- | ------ | ---- | ------- |
27| id   | string | 是    | 指定组件id，该id通过通用属性[id](./arkui-ts/ts-universal-attributes-component-id.md#id)或者[key](./arkui-ts/ts-universal-attributes-component-id.md#key12)设置。 |
28
29**返回值：**
30
31| 类型                                                         | 说明                                               |
32| ------------------------------------------------------------ | -------------------------------------------------- |
33| [inspector.ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | 组件回调事件监听句柄，用于注册和取消注册监听回调。 |
34
35**示例：**
36
37<!--code_no_check-->
38```ts
39import { inspector, UIInspector } from '@kit.ArkUI'
40
41@Entry
42@Component
43struct UIInspectorExample {
44  build() {
45    Column() {
46      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
47        Row({ space: 5 }) {
48          Text("UIInspector")
49            .width(110)
50            .height(110)
51            .border({ width: 1 })
52            .id('TEXT_ID')
53        }.width(80).width(80)
54      }.width(80).width(80)
55    }.height(320).width(360).padding({ right: 10, top: 10 })
56  }
57
58  uiInspector: UIInspector = this.getUIContext().getUIInspector();
59  listener:inspector.ComponentObserver = this.uiInspector.createComponentObserver("TEXT_ID")
60
61  aboutToAppear() {
62    let onLayoutComplete:()=>void=():void=>{
63      console.info("TEXT_ID layout complete")
64    }
65    let onDrawComplete:()=>void=():void=>{
66      console.info("TEXT_ID draw complete")
67    }
68
69    this.listener.on('layout', onLayoutComplete)
70    this.listener.on('draw', onDrawComplete)
71
72    // 通过句柄向对应的查询条件取消注册回调，由开发者自行决定在何时调用。
73    // this.listener.off('layout', onLayoutComplete)
74    // this.listener.off('draw', onDrawComplete)
75  }
76}
77```
78