HarmonyOS navigation主页面生命周期

navigation主页面生命周期是怎样的。

目前如下方法无法监听:

主页面的onPageShow、onPageHide在跳转子页面和返回后均不执行。

主页面子控件onAppear、onDisAppear在跳转子页面和返回后均不执行。


HarmonyOS
2024-10-29 10:49:14
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

​Navigation当前支持的生命周期函数:aboutToAppear->onReady->onAppear->onShow->onHide->onDisappear->aboutToDisappear;

aboutToAppear: 自定义组件析构销毁之前执行

onReady: 当NavDestination即将构建子组件之前会触发此回调。

onAppear: 组件挂载显示时触发此回调。

onShow: 当该NavDestination页面显示时触发此回调。

onHide: 当该NavDestination页面隐藏时触发此回调。

onDisappear: 组件卸载消失时触发此回调。

aboutToDisappear: 在自定义组件析构销毁之前执行.

onPageShow、onPageHide、onBackPress等生命周期回调函数,仅对@Entry装饰的自定义组件生效。

NavDestination定义的子页面,有Navigation作为入口,语义上不建议额外设置@Entry作为入口标记。

如果强行要将NavDestination设置@Entry,由于一个页面只能有一个@Entry,需要把NavDestination单独写在另一个文件里,添加@Entry再export使用。这是不推荐的做法。即使如此,Navigation跳转时,也不会执行这些对应的生命周期函数。

NavDestination提供了onShown、onHidden、onBackPressed、onReady属性可以设置对应的回调函数,可以通过这些属性设置。请参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5#navdestinationmode枚举说明-11

根据您描述的需求,跳转显示子页面不应该使用生命周期来对页面进行显隐控制,而是应该使用NavPathStack的路由管理的能力,通过NavPathStack进行页面跳转,来达到页面的显示隐藏。具体步骤如下:

step1: 创建NavPathStack对象pageStack,通常使用@Provide进行修饰,方便后续子组件通过@Comsumer获取,以实现子页面的路由跳转。

step2: 构建路由表pageMap,该方法通过@Builder进行修饰,通过传入的pageName属性,返回不同页面。

step3:在build创建Navigation组件(需要传入pageStack参数),通过navDestination属性传入路由表pageMap,并通过pageStack.pushPath()实现页面跳转。

示例代码如下:​

// 子页面  
@Component  
struct Page01 {  
  @Consume('pageInfos') pageInfos: NavPathStack;  
  build() {  
    NavDestination() {  
      Button('push Page01')  
        .width('80%')  
        .onClick(() => {  
          this.pageInfos.pushPathByName('Page01', '');  
        }).margin({top: 10, bottom: 10})  
      Button('push Dialog01').width('80%')  
        .onClick(() => {  
          this.pageInfos.pushPathByName('Dialog01', '');  
        }).margin({top: 10, bottom: 10})  
    }.title('Page01')  
  }  
}  
  
@Component  
struct Dialog01 {  
  @Consume('pageInfos') pageInfos: NavPathStack;  
  build() {  
    NavDestination() {  
      Stack() {  
        Column()  
          .width('100%')  
          .height('100%')  
          .backgroundColor(Color.Gray)  
          .opacity(0.1)  
          .onClick(() => {  
            this.pageInfos.pop();  
          })  
        Column() {  
          Text('Dialog01').fontSize(30).fontWeight(2)  
          Button('push Page01').width('80%')  
            .onClick(() => {  
              this.pageInfos.pushPathByName('Page01', '');  
            })  
            .margin({top: 10, bottom: 10})  
          Button('push Dialog01').width('80%')  
            .onClick(() => {  
              this.pageInfos.pushPathByName('Dialog01', '');  
            })  
            .margin({top: 10, bottom: 10})  
          Button('pop').width('80%')  
            .onClick(() => {  
              this.pageInfos.pop();  
            })  
            .margin({top: 10, bottom: 10})  
        }  
        .padding(10)  
        .width(250)  
        .backgroundColor(Color.White)  
        .borderRadius(10)  
      }  
    }  
    .hideTitleBar(true)  
    .mode(NavDestinationMode.DIALOG)  
  
@Entry  
@Component  
struct Index {  
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack() // 创建NavPathStack对象pageInfos  
  isLogin: boolean = false;  
  
// 构建路由表pageMap,该方法通过@Builder进行修饰,通过传入的name属性,返回不同页面。  
  @Builder  
  PagesMap(name: string) {  
    if (name == 'Page01') {  
      Page01()  
    } else if (name == 'Dialog01') {  
  Dialog01()  
}  
}  
build() {  
  // 在build创建Navigation组件(需要传入pageInfos参数),通过navDestination属性传入路由表pageMap,并通过pageInfos.pushPathByName实现页面跳转。  
  Navigation(this.pageInfos) {  
    Button('push Page01')  
      .width('80%')  
      .onClick(() => {  
        this.pageInfos.pushPathByName('Page01', '');  
      })  
  }  
  .mode(NavigationMode.Stack)  
  .titleMode(NavigationTitleMode.Mini)  
  .title('主页')  
  .navDestination(this.PagesMap)  
}  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.

tips: 由于需要维护this.PageMap的路由url和页面的关系,页面多的时候,PageMap会非常的庞大,建议如果页面特别多的话,可以将PagesMap抽成一个引射表。

分享
微博
QQ
微信
回复
2024-10-29 17:42:22
相关问题
HarmonyOS 页面生命周期问题
829浏览 • 1回复 待解决
HarmonyOS TabContent页面生命周期不触发
1252浏览 • 1回复 待解决
HarmonyOS Navigation生命周期
912浏览 • 1回复 待解决
HarmonyOS Navigation 生命周期
651浏览 • 1回复 待解决
HarmonyOS Navigation生命周期问题
687浏览 • 1回复 待解决
如何知晓navigation组件生命周期
893浏览 • 1回复 待解决
HarmonyOS Navigation跳转生命周期咨询
1216浏览 • 1回复 待解决
HarmonyOS Navigation跳转的组件生命周期
1877浏览 • 2回复 待解决