HarmonyOS鸿蒙Next中监听从NavDestination回到Navigation并做处理

HarmonyOS鸿蒙Next中监听从NavDestination回到Navigation并做处理 子页面NavDestination里面有onShown和onHidden生命周期，貌似Navigation主页面没有，主页面跳转到子页面时，主页面需要监听页面是否可见做对应的处理，想问下这个要怎么实现，感谢，具体的场景是主页上有一些数据请求的逻辑，在跳转到子页面，主页面不可见时不去请求数据，子页面回到主页面后再去请求数据。

3 回复

onPageShow()方法仅在@Entry装饰的自定义组件中生效，由于子页面并不是使用@Entry修饰的，所以在关闭子页面时并不会触发主页面的onPageShow()方法。

可以用以下两种方式触发主页面的onPageShow()

1、监听Navigation的onNavBarStateChange()事件，在回调中判断显示隐藏： 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#onnavbarstatechange9

2、使用无感监听observer.on(‘navDestinationUpdate’)： 在主页面中添加上述监听，在回调方法中进行判断：①、判断结果中的name是否等于紧跟主页面之后打开的子页面；②、判断state状态是否等于1 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-observer-V5#observeronnavdestinationupdate

参考示例如下：

NavigationTestPage.ets

import { PageOneTmp } from './PageOne'
import observer from '@ohos.arkui.observer'

[@Entry](/user/Entry)
@Component
struct NavigationTestPage {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  aboutToAppear(): void {
    observer.on('navDestinationUpdate', (info) => {
      console.info('------>NavDestination state update', JSON.stringify(info));
    });
  }
  aboutToDisappear(): void {
    observer.off('navDestinationUpdate');
  }
  @Builder
  PageMap() {
    PageOneTmp()
  }
  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈
          })
      }
    }.title('NavIndex').navDestination(this.PageMap)
    .onNavBarStateChange((isVisible: boolean) => {
      console.info('------>isVisible：' + isVisible)
    })
  }
  onPageShow(): void {
    console.info('------>主页显示')
  }
}

PageOne.ets

@Component
export struct PageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Button('clear', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.clear() //清除栈中所有页面
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

更多关于HarmonyOS鸿蒙Next中监听从NavDestination回到Navigation并做处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，监听从 NavDestination 回到 Navigation 的场景可以通过 NavController 的 addOnDestinationChangedListener 方法实现。该方法允许开发者监听导航目的地的变化，并在用户从 NavDestination 返回 Navigation 时执行相应的处理逻辑。

具体实现步骤如下：

  1. 获取 NavController 实例：首先，确保你已经在当前的 Ability 或 Page 中获取了 NavController 的实例。通常可以通过 NavHostFragment 或 NavHostAbility 来获取。

  2. 添加目的地变化监听器：使用 NavController 的 addOnDestinationChangedListener 方法，添加一个 OnDestinationChangedListener 监听器。该监听器会在导航目的地发生变化时被调用。

  3. 判断返回事件：在 OnDestinationChangedListener 的 onDestinationChanged 方法中，判断当前导航目的地是否为 Navigation。如果是，则表示用户从 NavDestination 返回了 Navigation，此时可以执行相应的处理逻辑。

示例代码如下：

import { NavController, OnDestinationChangedListener, NavDestination } from '@ohos.router';

// 获取 NavController 实例
let navController: NavController = ...;

// 添加目的地变化监听器
navController.addOnDestinationChangedListener(new OnDestinationChangedListener({
    onDestinationChanged: (controller: NavController, destination: NavDestination, args: Object) => {
        // 判断是否返回到 Navigation
        if (destination.name === 'Navigation') {
            // 执行处理逻辑
            // ...
        }
    }
}));

通过这种方式，你可以在用户从 NavDestination 回到 Navigation 时捕获事件，并执行自定义的处理逻辑。

在HarmonyOS鸿蒙Next中，监听从NavDestination回到Navigation的操作，可以通过NavController的addOnDestinationChangedListener方法实现。具体步骤如下：

  1. 获取NavController：首先获取当前页面的NavController实例。
  2. 添加监听器：使用addOnDestinationChangedListener方法添加一个OnDestinationChangedListener，在回调方法中判断目标NavDestination是否为Navigation。
  3. 处理逻辑：在回调方法中执行回到Navigation时的处理逻辑。

示例代码如下：

NavController navController = Navigation.findNavController(view);
navController.addOnDestinationChangedListener((controller, destination, arguments) -> {
    if (destination.getId() == R.id.navigation) {
        // 处理回到Navigation的逻辑
    }
});

通过这种方式，可以在用户从NavDestination回到Navigation时执行自定义操作。

回到顶部