下载 App

输入关键字搜索

开发者能力认证

鸿蒙高校创新赛

HarmonyOS 7

animation

HarmonyOS行业解决方案

layoutWeight

HarmonyOS模板&组件

bindPopup

bindsheet

CTRL+K

文档开发者中心

我的

Hello，

欢迎来到开发者联盟

ArkUI探索

ArkUI (方舟UI框架)

UI

HarmonyOS 5

【ArkUI路由/导航系列】六：Navigation组件的无感监听

上一章【ArkUI路由/导航系列】五：Navigation生命周期管理

无感监听功能可以对NavDestination页面的行为状态进行监听，当该行为发生时会触发开发者注册的无感监听回调。例如，通过如下代码开启navigation路由框架的两种监听：

收起
自动换行
深色代码主题
复制
// ObserverNavigation.ets

import { uiObserver } from "@kit.ArkUI"

@Component
struct ObserverNavigation {
  stack: NavPathStack = new NavPathStack()
  // 回调函数，当navDestinationUpdate发生时会回调该函数
  onNavDestinationUpdate(info: uiObserver.NavDestinationInfo): void {
    console.log('AceNavigation', 'navDestinationUpdate')
  }
  // 回调函数，当onNavDestinationSwitch发生时会回调该函数
  onNavDestinationSwitch(info: uiObserver.NavDestinationSwitchInfo): void {
    console.log('AceNavigation', 'navDestinationSwitch')
  }
  // 在Navigation所在的自定义组件aboutToAppear中，注册无感监听
  aboutToAppear(): void {
    // 注册navDestinationUpdate监听，当任意navDestination页面的状态发生更新时，例如创建、显示时触发该回调
    this.getUIContext().getUIObserver().on('navDestinationUpdate', this.onNavDestinationUpdate)
    // 注册navDestinationSwitch监听，当发生navDestination页面切换的行为时触发该回调
    this.getUIContext().getUIObserver().on('navDestinationSwitch', this.onNavDestinationSwitch)
    // 跳转到页面pageOne
    this.stack.pushPath({name: 'observerPageOne'})
  }

  build() {
    Navigation(this.stack) {}
    .id('ObserverNavigation')
    .hideNavBar(true)
  }
}

上面这个例子会对当前实例中所有的navigation进行监听。如果仅希望对某个指定的navigation进行监听，开发者可以通过指定navigationId来实现，例如：

收起
自动换行
深色代码主题
复制
// 在Navigation自定义组件的aboutToAppear中开启监听
aboutToAppear(): void {
  // 注册navDestinationUpdate监听，当id为`ObserverNavigation`的navigation内部的navDestination页面的状态发生更新时，例如创建、显示时触发该回调
  this.getUIContext().getUIObserver().on('navDestinationUpdate', { navigationId: 'ObserverNavigation' }, this.onNavDestinationUpdate)
  // 注册navDestinationSwitch监听，当id为`ObserverNavigation`的navigation发生navDestination页面切换的行为时触发该回调
  this.getUIContext().getUIObserver().on('navDestinationSwitch', { navigationId: 'ObserverNavigation' }, this.onNavDestinationSwitch)
}

无感监听也可以取消。类似于开启的过程，开发者可以通过指定navigationId来取消某个navigation上的监听，也可以取消当前实例中所有的监听，例如：

收起
自动换行
深色代码主题
复制
// 在Navigation自定义组件的aboutToDisappear中注销监听
aboutToDisappear(): void {
  // 为id为ObserverNavigation的navigation注销navDestinationUpdate监听，范围为所有绑定了this.onNavDestinationSwitch回调函数的监听器
  this.getUIContext().getUIObserver().off('navDestinationUpdate', { navigationId: 'ObserverNavigation' }, this.onNavDestinationUpdate)
  // 注销navDestinationSwitch监听，范围为所有绑定了this.onNavDestinationSwitch回调函数的监听器
  this.getUIContext().getUIObserver().off('navDestinationSwitch', this.onNavDestinationSwitch)
  // 注销navDestinationSwitch监听，范围当前实例中所有的navDestinationSwitch监听器
  this.getUIContext().getUIObserver().off('navDestinationSwitch')
}

对于开发者而言，页面生命周期中往往会有固定的代码逻辑。例如在每个页面onShown中将自己的信息上报，或者在页面创建出来时将自己上报。对于这样通用的、每个页面都需要增加的逻辑，开发者可以使用无感监听uiObserver进行优化。例如如下的代码，在Navigation中开启对页面onAppear的监听，当页面创建时，会弹出弹窗'当前创建页面: xxx'：

收起
自动换行
深色代码主题
复制
// ObserverNavigation.ets

@Component
struct ObserverNavigation {
  stack: NavPathStack = new NavPathStack()

  // 回调函数，当navDestinationUpdate发生时会回调该函数
  onNavDestinationUpdate(info: uiObserver.NavDestinationInfo): void {
    console.log('AceNavigation', 'navDestinationUpdate')
    // 当页面onAppear时，记录它的name属性
    if (info.state === uiObserver.NavDestinationState.ON_APPEAR) {
      promptAction.openToast({message: '当前创建页面: ' + info.name.toString()})
    }
  }

  aboutToAppear(): void {
    // 注册navDestinationUpdate监听，当id为`ObserverNavigation`的navigation内部的navDestination页面的状态发生更新时，例如创建、显示时触发该回调
    this.getUIContext().getUIObserver().on('navDestinationUpdate', { navigationId: 'ObserverNavigation' }, this.onNavDestinationUpdate)
    // 跳转到页面pageOne
    this.stack.pushPath({name: 'observerPageOne'})
  }
  
  build() {
    Navigation(this.stack) {

    }
    .id('ObserverNavigation')
    .hideNavBar(true)
  }
}