harmony 鸿蒙@ohos.arkui.observer (无感监听)

2025-06-12
浏览 (4)

@ohos.arkui.observer (无感监听)

提供UI组件行为变化的无感监听能力。

说明：

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

UIObserver仅能监听到本进程内的相关信息，不支持获取UIExtensionComponent等跨进程场景的信息。

导入模块

import { uiObserver } from '@kit.ArkUI';

NavDestinationState

NavDestination组件状态。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
ON_SHOWN	0	NavDestination组件显示。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_HIDDEN	1	NavDestination组件隐藏。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_APPEAR¹²⁺	2	NavDestination从组件树上挂载。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_DISAPPEAR¹²⁺	3	NavDestination从组件树上卸载。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_WILL_SHOW¹²⁺	4	NavDestination组件显示之前。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_WILL_HIDE¹²⁺	5	NavDestination组件隐藏之前。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_WILL_APPEAR¹²⁺	6	NavDestination挂载到组件树之前。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_WILL_DISAPPEAR¹²⁺	7	NavDestination从组件树上卸载之前。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
ON_ACTIVE¹⁷⁺	8	NavDestination组件处于激活态。原子化服务API：从API version 17开始，该接口支持在原子化服务中使用。
ON_INACTIVE¹⁷⁺	9	NavDestination组件处于非激活态。原子化服务API：从API version 17开始，该接口支持在原子化服务中使用。
ON_BACKPRESS¹²⁺	100	NavDestination组件返回。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

ScrollEventType¹²⁺

滚动事件的类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
SCROLL_START	0	滚动事件开始。
SCROLL_STOP	1	滚动事件结束。

RouterPageState

routerPage生命周期触发时对应的状态。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
ABOUT_TO_APPEAR	0	page即将显示。
ABOUT_TO_DISAPPEAR	1	page即将销毁。
ON_PAGE_SHOW	2	page显示。
ON_PAGE_HIDE	3	page隐藏。
ON_BACK_PRESS	4	page返回时。

TabContentState¹²⁺

TabContent组件的状态。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
ON_SHOW	0	TabContent组件显示。
ON_HIDE	1	TabContent组件隐藏。

NavDestinationInfo

NavDestination组件信息。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
navigationId	ResourceStr	是	包含NavDestination组件的Navigation组件的id。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
name	ResourceStr	是	NavDestination组件的名称。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
state	NavDestinationState	是	NavDestination组件的状态。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
index¹²⁺	number	是	NavDestination在页面栈中的索引。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。取值范围：[0, +∞)
param¹²⁺	Object	否	NavDestination组件的参数。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
navDestinationId¹²⁺	string	是	NavDestination组件的唯一标识ID。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
mode¹⁵⁺	NavDestinationMode	否	NavDestination类型。原子化服务API：从API version 15开始，该接口支持在原子化服务中使用。
uniqueId¹⁵⁺	number	否	NavDestination组件的uniqueId。原子化服务API：从API version 15开始，该接口支持在原子化服务中使用。

NavigationInfo¹²⁺

Navigation组件信息。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
navigationId	string	是	Navigation组件的id。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
pathStack	NavPathStack	是	Navigation组件的路由栈。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
uniqueId²⁰⁺	number	否	Navigation组件的uniqueId，可以通过queryNavigationInfo获取。原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。

ScrollEventInfo¹²⁺

ScrollEvent滚动信息。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
id	string	是	滚动组件的id。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
uniqueId	number	是	滚动组件的uniqueId。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
scrollEvent	ScrollEventType	是	滚动事件的类型。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
offset	number	是	滚动组件的当前偏移量。原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。
axis²⁰⁺	Axis	否	滚动组件的滚动方向。原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。

ObserverOptions¹²⁺

Observer选项。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
id	string	是	组件的id。

RouterPageInfo

RouterPageInfo包含的信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
context	UIAbilityContext \|UIContext	是	触发生命周期的routerPage页面对应的上下文信息。
index	number	是	触发生命周期的routerPage在栈中的位置。取值范围：[0, +∞)
name	string	是	触发生命周期的routerPage页面的名称。
path	string	是	触发生命周期的routerPage页面的路径。
state	RouterPageState	是	触发生命周期的routerPage页面的状态。
pageId¹²⁺	string	是	触发生命周期的routerPage页面的唯一标识。

DensityInfo¹²⁺

屏幕像素密度变化回调包含的信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
context	UIContext	是	屏幕像素密度变化时页面对应的上下文信息。
density	number	是	变化后的屏幕像素密度。取值范围：[0, +∞)

NavDestinationSwitchInfo¹²⁺

Navigation组件页面切换的信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
context	UIAbilityContext \|UIContext	是	触发页面切换的Navigation对应的上下文信息。
from	NavDestinationInfo \|NavBar	是	页面切换的源页面。
to	NavDestinationInfo \|NavBar	是	页面切换的目的页面。
operation	NavigationOperation	是	页面切换操作类型。

NavDestinationSwitchObserverOptions¹²⁺

Navigation组件页面切换事件的监听选项。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
navigationId	ResourceStr	是	指定需要监听的Navigation的ID

TabContentInfo¹²⁺

TabContent页面的切换信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
tabContentId	string	是	TabContent组件的id。
tabContentUniqueId	number	是	TabContent组件的uniqueId。
state	TabContentState	是	TabContent组件的状态。
index	number	是	TabContent组件的下标索引。索引从0开始。
id	string	是	Tabs组件的id。
uniqueId	number	是	Tabs组件的uniqueId。

uiObserver.on(‘navDestinationUpdate’)

on(type: ‘navDestinationUpdate’, callback: Callback<NavDestinationInfo>): void

监听NavDestination组件的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationUpdate’，即NavDestination组件的状态变化。
callback	Callback<NavDestinationInfo>	是	回调函数。返回当前的NavDestination组件状态。

示例：

// Index.ets
// 演示 uiObserver.on('navDestinationUpdate', callback)
// uiObserver.off('navDestinationUpdate', callback)
import { uiObserver } from '@kit.ArkUI';

@Component
struct PageOne {
  build() {
    NavDestination() {
      Text("pageOne")
    }.title("pageOne")
  }
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationUpdate', (info) => {
      console.info('NavDestination state update', JSON.stringify(info));
    });
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationUpdate');
  }

  build() {
    Column() {
      Navigation(this.stack) {
        Button("push").onClick(() => {
          this.stack.pushPath({ name: "pageOne" });
        })
      }
      .title("Navigation")
      .navDestination(this.PageBuilder)
    }
    .width('100%')
    .height('100%')
  }
}

uiObserver.off(‘navDestinationUpdate’)

off(type: ‘navDestinationUpdate’, callback?: Callback<NavDestinationInfo>): void

取消监听NavDestination组件的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationUpdate’，即NavDestination组件的状态变化。
callback	Callback<NavDestinationInfo>	否	回调函数。返回当前的NavDestination组件状态。

示例：

参考uiObserver.on(‘navDestinationUpdate’)示例。

uiObserver.on(‘navDestinationUpdate’)

on(type: ‘navDestinationUpdate’, options: { navigationId: ResourceStr }, callback: Callback<NavDestinationInfo>): void

监听NavDestination组件的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationUpdate’，即NavDestination组件的状态变化。
options	{ navigationId: ResourceStr }	是	指定监听的Navigation的id。
callback	Callback<NavDestinationInfo>	是	回调函数。返回当前的NavDestination组件状态。

示例：

// Index.ets
// 演示 uiObserver.on('navDestinationUpdate', navigationId, callback)
// uiObserver.off('navDestinationUpdate', navigationId, callback)
import { uiObserver } from '@kit.ArkUI';

@Component
struct PageOne {
  build() {
    NavDestination() {
      Text("pageOne")
    }.title("pageOne")
  }
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationUpdate', { navigationId: "testId" }, (info) => {
      console.info('NavDestination state update', JSON.stringify(info));
    });
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationUpdate', { navigationId: "testId" });
  }

  build() {
    Column() {
      Navigation(this.stack) {
        Button("push").onClick(() => {
          this.stack.pushPath({ name: "pageOne" });
        })
      }
      .id("testId")
      .title("Navigation")
      .navDestination(this.PageBuilder)
    }
    .width('100%')
    .height('100%')
  }
}

uiObserver.off(‘navDestinationUpdate’)

off(type: ‘navDestinationUpdate’, options: { navigationId: ResourceStr }, callback?: Callback<NavDestinationInfo>): void

取消监听NavDestination组件的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationUpdate’，即NavDestination组件的状态变化。
options	{ navigationId: ResourceStr }	是	指定监听的Navigation的id。
callback	Callback<NavDestinationInfo>	否	回调函数。返回当前的NavDestination组件状态。

示例：

参考uiObserver.on(‘navDestinationUpdate’)示例。

uiObserver.on(‘scrollEvent’)¹²⁺

on(type: ‘scrollEvent’, callback: Callback<ScrollEventInfo>): void

监听滚动事件的开始和结束。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’scrollEvent’，即滚动事件的开始和结束。
callback	Callback<ScrollEventInfo>	是	回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

uiObserver.off(‘scrollEvent’)¹²⁺

off(type: ‘scrollEvent’, callback?: Callback<ScrollEventInfo>): void

取消监听滚动事件的开始和结束。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’scrollEvent’，即滚动事件的开始和结束。
callback	Callback<ScrollEventInfo>	否	回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

uiObserver.on(‘scrollEvent’)¹²⁺

on(type: ‘scrollEvent’, options: ObserverOptions, callback: Callback<ScrollEventInfo>): void

监听滚动事件的开始和结束。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’scrollEvent’，即滚动事件的开始和结束。
options	ObserverOptions	是	指定监听的滚动组件的id。
callback	Callback<ScrollEventInfo>	是	回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

uiObserver.off(‘scrollEvent’)¹²⁺

off(type: ‘scrollEvent’, options: ObserverOptions, callback?: Callback<ScrollEventInfo>): void

取消监听滚动事件的开始和结束。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’scrollEvent’，即滚动事件的开始和结束。
options	ObserverOptions	是	指定监听的滚动组件的id。
callback	Callback<ScrollEventInfo>	否	回调函数。返回滚动事件的信息。

示例：

import { uiObserver } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller();
  options: uiObserver.ObserverOptions = { id: "testId" };
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7]

  build() {
    Column() {
      Column() {
        Scroll(this.scroller) {
          Column() {
            ForEach(this.arr, (item: number) => {
              Text(item.toString())
                .width('90%')
                .height(150)
                .backgroundColor(0xFFFFFF)
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .margin({ top: 10 })
            }, (item: string) => item)
          }.width('100%')
        }
        .id("testId")
        .height('80%')
      }
      .width('100%')

      Row() {
        Button('UIObserver on')
          .onClick(() => {
            uiObserver.on('scrollEvent', (info) => {
              console.info('scrollEventInfo', JSON.stringify(info));
            });
          })
        Button('UIObserver off')
          .onClick(() => {
            uiObserver.off('scrollEvent');
          })
      }

      Row() {
        Button('UIObserverWithId on')
          .onClick(() => {
            uiObserver.on('scrollEvent', this.options, (info) => {
              console.info('scrollEventInfo', JSON.stringify(info));
            });
          })
        Button('UIObserverWithId off')
          .onClick(() => {
            uiObserver.off('scrollEvent', this.options);
          })
      }
    }
    .height('100%')
  }
}

uiObserver.on(‘routerPageUpdate’)¹¹⁺

on(type: ‘routerPageUpdate’, context: UIAbilityContext|UIContext, callback: Callback<RouterPageInfo>): void

监听router中page页面的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’routerPageUpdate’，即router中page页面的状态变化。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<RouterPageInfo>	是	回调函数。携带pageInfo，返回当前的page页面状态。

示例：

// used in UIAbility
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { UIContext, window, uiObserver } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  private uiContext: UIContext|null = null;

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 注册监听，范围是abilityContext内的page
    uiObserver.on('routerPageUpdate', this.context, (info: uiObserver.RouterPageInfo) => {
      console.info('[uiObserver][abilityContext] got info: ' + JSON.stringify(info))
    })
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err) => {
      windowStage.getMainWindow((err: BusinessError, data) => {
        let windowInfo: window.Window = data;
        // 获取UIContext实例
        this.uiContext = windowInfo.getUIContext();
        // 注册监听，范围是uiContext内的page
        uiObserver.on('routerPageUpdate', this.uiContext, (info: uiObserver.RouterPageInfo)=>{
          console.info('[uiObserver][uiContext] got info: ' + JSON.stringify(info))
        })
      })
    });
  }

  // ... other function in EntryAbility
}

uiObserver.off(‘routerPageUpdate’)¹¹⁺

off(type: ‘routerPageUpdate’, context: UIAbilityContext|UIContext, callback?: Callback<RouterPageInfo>): void

取消监听router中page页面的状态变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’routerPageUpdate’，即router中page页面的状态变化。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<RouterPageInfo>	否	需要被注销的回调函数。

示例：

// used in UIAbility
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver, UIContext } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  // 实际使用前uiContext需要被赋值。参见示例uiObserver.on('routerPageUpdate')
  private uiContext: UIContext|null = null;

  onDestroy(): void {
    // 注销当前abilityContext上的所有routerPageUpdate监听
    uiObserver.off('routerPageUpdate', this.context)
  }

  onWindowStageDestroy(): void {
    // 注销在uiContext上的所有routerPageUpdate监听
    if (this.uiContext) {
      uiObserver.off('routerPageUpdate', this.uiContext);
    }
  }

  // ... other function in EntryAbility
}

uiObserver.on(‘densityUpdate’)¹²⁺

on(type: ‘densityUpdate’, context: UIContext, callback: Callback<DensityInfo>): void

监听屏幕像素密度变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’densityUpdate’，即屏幕像素密度变化。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<DensityInfo>	是	回调函数。携带densityInfo，返回变化后的屏幕像素密度。

示例：

import { uiObserver } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State density: number = 0;
  @State message: string = '未注册监听'

  densityUpdateCallback = (info: uiObserver.DensityInfo) => {
    this.density = info.density;
    this.message = '变化后的DPI：' + this.density.toString();
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('注册屏幕像素密度变化监听')
        .onClick(() => {
          this.message = '已注册监听'
          uiObserver.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
        })
    }
  }
}

uiObserver.off(‘densityUpdate’)¹²⁺

off(type: ‘densityUpdate’, context: UIContext, callback?: Callback<DensityInfo>): void

取消监听屏幕像素密度的变化。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’densityUpdate’，即屏幕像素密度变化。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<DensityInfo>	否	需要被注销的回调函数。若不指定具体的回调函数，则注销指定UIContext下所有densityUpdate事件监听。

import { uiObserver, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State density: number = 0;
  @State message: string = '未注册监听'

  densityUpdateCallback = (info: uiObserver.DensityInfo) => {
    this.density = info.density;
    this.message = '变化后的DPI：' + this.density.toString();
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('注册屏幕像素密度变化监听')
        .margin({ bottom: 10 })
        .onClick(() => {
          this.message = '已注册监听'
          uiObserver.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
        })
      Button('解除注册屏幕像素密度变化监听')
        .onClick(() => {
          this.message = '未注册监听'
          uiObserver.off('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
        })
    }
  }
}

uiObserver.on(‘willDraw’)¹²⁺

on(type: ‘willDraw’, context: UIContext, callback: Callback<void>): void

监听每一帧绘制指令下发情况。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’willDraw’，即是否将要绘制。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<void>	是	回调函数。

示例：

import { uiObserver } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  willDrawCallback = () => {
    console.info("willDraw指令下发");
  }
  build() {
    Column() {
      Button('注册绘制指令下发监听')
        .onClick(() => {
          uiObserver.on('willDraw', this.getUIContext(), this.willDrawCallback);
        })
    }
  }
}

uiObserver.off(‘willDraw’)¹²⁺

off(type: ‘willDraw’, context: UIContext, callback?: Callback<void>): void

取消监听每一帧绘制指令下发情况。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’willDraw’，即是否将要绘制。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<void>	否	需要被注销的回调函数。

import { uiObserver } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  willDrawCallback = () => {
    console.info("willDraw指令下发")
  }

  build() {
    Column() {
      Button('注册绘制指令下发监听')
        .margin({ bottom: 10 })
        .onClick(() => {
          uiObserver.on('willDraw', this.getUIContext(), this.willDrawCallback);
        })
      Button('解除注册绘制指令下发监听')
        .onClick(() => {
          uiObserver.off('willDraw', this.getUIContext(), this.willDrawCallback);
        })
    }
  }
}

uiObserver.on(‘didLayout’)¹²⁺

on(type: ‘didLayout’, context: UIContext, callback: Callback<void>): void

监听每一帧布局完成情况。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’didLayout’，即是否布局完成。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<void>	是	回调函数。

示例：

import { uiObserver } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  didLayoutCallback = () => {
    console.info("Layout布局完成");
  }
  build() {
    Column() {
      Button('注册布局完成监听')
        .onClick(() => {
          uiObserver.on('didLayout', this.getUIContext(), this.didLayoutCallback);
        })
    }
  }
}

uiObserver.off(‘didLayout’)¹²⁺

off(type: ‘didLayout’, context: UIContext, callback?: Callback<void>): void

取消监听每一帧布局完成情况。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’didLayout’，即是否布局完成。
context	UIContext	是	上下文信息，用以指定监听页面的范围。
callback	Callback<void>	否	需要被注销的回调函数。

import { uiObserver } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  didLayoutCallback = () => {
    console.info("Layout布局完成")
  }

  build() {
    Column() {
      Button('注册布局完成监听')
        .margin({ bottom: 10 })
        .onClick(() => {
          uiObserver.on('didLayout', this.getUIContext(), this.didLayoutCallback);
        })
      Button('解除布局完成s监听')
        .onClick(() => {
          uiObserver.off('didLayout', this.getUIContext(), this.didLayoutCallback);
        })
    }
  }
}

uiObserver.on(‘navDestinationSwitch’)¹²⁺

on(type: ‘navDestinationSwitch’, context: UIAbilityContext|UIContext, callback: Callback<NavDestinationSwitchInfo>): void

监听Navigation的页面切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationSwitch’，即Navigation的页面切换事件。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面切换事件的范围。
callback	Callback<NavDestinationSwitchInfo>	是	回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。

示例：

// EntryAbility.ets
// 演示 uiObserver.on('navDestinationSwitch', UIAbilityContext, callback)
// uiObserver.off('navDestinationSwitch', UIAbilityContext, callback)
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver, window } from '@kit.ArkUI';
import { hilog } from "@kit.PerformanceAnalysisKit";

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    uiObserver.on('navDestinationSwitch', this.context, callBackFunc);
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
    uiObserver.off('navDestinationSwitch', this.context, callBackFunc);
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

// Index.ets
// 演示 uiObserver.on('navDestinationSwitch', UIContext, callback)
// uiObserver.off('navDestinationSwitch', UIContext, callback)
import { uiObserver } from '@kit.ArkUI';

@Component
struct PageOne {
  build() {
    NavDestination() {
      Text("pageOne")
    }.title("pageOne")
  }
}

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationSwitch', this.getUIContext(), callBackFunc)
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationSwitch', this.getUIContext(), callBackFunc)
  }

  build() {
    Column() {
      Navigation(this.stack) {
        Button("push").onClick(() => {
          this.stack.pushPath({ name: "pageOne" });
        })
      }
      .title("Navigation")
      .navDestination(this.PageBuilder)
    }
    .width('100%')
    .height('100%')
  }
}

uiObserver.off(‘navDestinationSwitch’)¹²⁺

off(type: ‘navDestinationSwitch’, context: UIAbilityContext|UIContext, callback?: Callback<NavDestinationSwitchInfo>): void

取消监听Navigation的页面切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationSwitch’，即Navigation的页面切换事件。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面切换事件的范围。
callback	Callback<NavDestinationSwitchInfo>	否	需要被注销的回调函数。

示例：

参考uiObserver.on(‘navDestinationSwitch’)示例。

uiObserver.on(‘navDestinationSwitch’)¹²⁺

on(type: ‘navDestinationSwitch’, context: UIAbilityContext|UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback: Callback<NavDestinationSwitchInfo>): void

监听Navigation的页面切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationSwitch’，即Navigation的页面切换事件。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面切换事件的范围。
observerOptions	NavDestinationSwitchObserverOptions	是	监听选项。
callback	Callback<NavDestinationSwitchInfo>	是	回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。

示例：

// EntryAbility.ets
// 演示 uiObserver.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback)
// uiObserver.off('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback)
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver, window } from '@kit.ArkUI';
import { hilog } from "@kit.PerformanceAnalysisKit"

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    uiObserver.on('navDestinationSwitch', this.context, {
      navigationId: "myNavId"
    }, callBackFunc);
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
    uiObserver.off('navDestinationSwitch', this.context, {
      navigationId: "myNavId"
    }, callBackFunc);
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

// Index.ets
// 演示 uiObserver.on('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback)
// uiObserver.off('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback)
import { uiObserver } from '@kit.ArkUI';

@Component
struct PageOne {
  build() {
    NavDestination() {
      Text("pageOne")
    }.title("pageOne")
  }
}

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc)
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc)
  }

  build() {
    Column() {
      Navigation(this.stack) {
        Button("push").onClick(() => {
          this.stack.pushPath({ name: "pageOne" });
        })
      }
      .id("myNavId")
      .title("Navigation")
      .navDestination(this.PageBuilder)
    }
    .width('100%')
    .height('100%')
  }
}

uiObserver.off(‘navDestinationSwitch’)¹²⁺

off(type: ‘navDestinationSwitch’, context: UIAbilityContext|UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback?: Callback<NavDestinationSwitchInfo>): void

取消监听Navigation的页面切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’navDestinationSwitch’，即Navigation的页面切换事件。
context	UIAbilityContext \| UIContext	是	上下文信息，用以指定监听页面切换事件的范围。
observerOptions	NavDestinationSwitchObserverOptions	是	监听选项。
callback	Callback<NavDestinationSwitchInfo>	否	需要被注销的回调函数。

示例：

参考uiObserver.on(‘navDestinationSwitch’)接口示例。

uiObserver.on(‘tabContentUpdate’)¹²⁺

on(type: ‘tabContentUpdate’, callback: Callback<TabContentInfo>): void

监听TabContent页面的切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’tabContentUpdate’，即TabContent页面的切换事件。
callback	Callback<TabContentInfo>	是	回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。

示例：

import { uiObserver } from '@kit.ArkUI';

function callbackFunc(info: uiObserver.TabContentInfo) {
  console.info('tabContentUpdate', JSON.stringify(info));
}

@Entry
@Component
struct TabsExample {

  aboutToAppear(): void {
    uiObserver.on('tabContentUpdate', callbackFunc);
  }

  aboutToDisappear(): void {
    uiObserver.off('tabContentUpdate', callbackFunc);
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar('green').id('tabContentId0')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar('blue').id('tabContentId1')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar('yellow').id('tabContentId2')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar('pink').id('tabContentId3')
      }
      .width(360)
      .height(296)
      .backgroundColor('#F1F3F5')
      .id('tabsId')
    }.width('100%')
  }
}

uiObserver.off(‘tabContentUpdate’)¹²⁺

off(type: ‘tabContentUpdate’, callback?: Callback<TabContentInfo>): void

取消监听TabContent页面的切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’tabContentUpdate’，即TabContent页面的切换事件。
callback	Callback<TabContentInfo>	否	需要被注销的回调函数。

示例：

参考uiObserver.on(‘tabContentUpdate’)接口示例。

uiObserver.on(‘tabContentUpdate’)¹²⁺

on(type: ‘tabContentUpdate’, options: ObserverOptions, callback: Callback<TabContentInfo>): void

监听TabContent页面的切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’tabContentUpdate’，即TabContent页面的切换事件。
options	ObserverOptions	是	指定监听的Tabs组件的id。
callback	Callback<TabContentInfo>	是	回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。

示例：

import { uiObserver } from '@kit.ArkUI';

function callbackFunc(info: uiObserver.TabContentInfo) {
  console.info('tabContentUpdate', JSON.stringify(info));
}

@Entry
@Component
struct TabsExample {

  aboutToAppear(): void {
    uiObserver.on('tabContentUpdate', { id: 'tabsId' }, callbackFunc);
  }

  aboutToDisappear(): void {
    uiObserver.off('tabContentUpdate', { id: 'tabsId' }, callbackFunc);
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar('green').id('tabContentId0')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar('blue').id('tabContentId1')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar('yellow').id('tabContentId2')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar('pink').id('tabContentId3')
      }
      .width(360)
      .height(296)
      .backgroundColor('#F1F3F5')
      .id('tabsId')
    }.width('100%')
  }
}

uiObserver.off(‘tabContentUpdate’)¹²⁺

off(type: ‘tabContentUpdate’, options: ObserverOptions, callback?: Callback<TabContentInfo>): void

取消监听TabContent页面的切换事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	监听事件，固定为’tabContentUpdate’，即TabContent页面的切换事件。
options	ObserverOptions	是	指定监听的Tabs组件的id。
callback	Callback<TabContentInfo>	否	需要被注销的回调函数。

示例：

参考uiObserver.on(‘tabContentUpdate’)接口示例。

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI（方舟UI框架）

harmony 鸿蒙ARKUI_TextPickerCascadeRangeContent

harmony 鸿蒙ARKUI_TextPickerRangeContent

harmony 鸿蒙ArkUI_AnimateCompleteCallback

harmony 鸿蒙ArkUI_AttributeItem

harmony 鸿蒙ArkUI_ColorStop

harmony 鸿蒙ArkUI_ContextCallback

harmony 鸿蒙ArkUI_EventModule

harmony 鸿蒙ArkUI_ExpectedFrameRateRange

harmony 鸿蒙ArkUI_IntOffset

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/XuNYFC

harmony 鸿蒙@ohos.arkui.observer (无感监听)

@ohos.arkui.observer (无感监听)

导入模块

NavDestinationState

ScrollEventType12+

RouterPageState

TabContentState12+

NavDestinationInfo

NavigationInfo12+

ScrollEventInfo12+

ObserverOptions12+

RouterPageInfo

DensityInfo12+

NavDestinationSwitchInfo12+

NavDestinationSwitchObserverOptions12+

TabContentInfo12+

uiObserver.on(‘navDestinationUpdate’)

uiObserver.off(‘navDestinationUpdate’)

uiObserver.on(‘navDestinationUpdate’)

uiObserver.off(‘navDestinationUpdate’)

uiObserver.on(‘scrollEvent’)12+

uiObserver.off(‘scrollEvent’)12+

uiObserver.on(‘scrollEvent’)12+

uiObserver.off(‘scrollEvent’)12+

uiObserver.on(‘routerPageUpdate’)11+

uiObserver.off(‘routerPageUpdate’)11+

uiObserver.on(‘densityUpdate’)12+

uiObserver.off(‘densityUpdate’)12+

uiObserver.on(‘willDraw’)12+

uiObserver.off(‘willDraw’)12+

uiObserver.on(‘didLayout’)12+

uiObserver.off(‘didLayout’)12+

uiObserver.on(‘navDestinationSwitch’)12+

uiObserver.off(‘navDestinationSwitch’)12+

uiObserver.on(‘navDestinationSwitch’)12+

uiObserver.off(‘navDestinationSwitch’)12+

uiObserver.on(‘tabContentUpdate’)12+

uiObserver.off(‘tabContentUpdate’)12+

uiObserver.on(‘tabContentUpdate’)12+

uiObserver.off(‘tabContentUpdate’)12+

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

ScrollEventType¹²⁺

TabContentState¹²⁺

NavigationInfo¹²⁺

ScrollEventInfo¹²⁺

ObserverOptions¹²⁺

DensityInfo¹²⁺

NavDestinationSwitchInfo¹²⁺

NavDestinationSwitchObserverOptions¹²⁺

TabContentInfo¹²⁺

uiObserver.on(‘scrollEvent’)¹²⁺

uiObserver.off(‘scrollEvent’)¹²⁺

uiObserver.on(‘scrollEvent’)¹²⁺

uiObserver.off(‘scrollEvent’)¹²⁺

uiObserver.on(‘routerPageUpdate’)¹¹⁺

uiObserver.off(‘routerPageUpdate’)¹¹⁺

uiObserver.on(‘densityUpdate’)¹²⁺

uiObserver.off(‘densityUpdate’)¹²⁺

uiObserver.on(‘willDraw’)¹²⁺

uiObserver.off(‘willDraw’)¹²⁺

uiObserver.on(‘didLayout’)¹²⁺

uiObserver.off(‘didLayout’)¹²⁺

uiObserver.on(‘navDestinationSwitch’)¹²⁺

uiObserver.off(‘navDestinationSwitch’)¹²⁺

uiObserver.on(‘navDestinationSwitch’)¹²⁺

uiObserver.off(‘navDestinationSwitch’)¹²⁺

uiObserver.on(‘tabContentUpdate’)¹²⁺

uiObserver.off(‘tabContentUpdate’)¹²⁺

uiObserver.on(‘tabContentUpdate’)¹²⁺

uiObserver.off(‘tabContentUpdate’)¹²⁺