diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index e60154eb5627d61074981552236aca83f303de89..077d037070525cf36eeb9f3d87c93c7f87e03b90 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/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) diff --git a/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md b/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md new file mode 100644 index 0000000000000000000000000000000000000000..77978fd5c56da3fe92df2af8170ae573615e8f4b --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-arkui-inspector.md @@ -0,0 +1,119 @@ +# @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'。
layout: 组件布局完成。
draw: 组件绘制完成。 | +| callback | void | 是 | 监听layout或draw的回调。| + +### off + +off(type: 'layout', callback: () => void): void + +通过句柄向对应的查询条件取消注册回调,当组件布局或者绘制完成时不在触发指定的回调。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**参数:** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------ | ---- | -------------------------------------------------------------------------------------- | +| type | string | 是 | 必须填写字符串'layout'或‘draw’。
layout: 组件布局完成。
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