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)  
}  
}

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

分享
微博
QQ
微信
回复
2024-10-29 17:42:22
相关问题
HarmonyOS TabContent页面生命周期不触发
351浏览 • 1回复 待解决
HarmonyOS Navigation跳转的组件生命周期
514浏览 • 2回复 待解决
HarmonyOS Navigation跳转生命周期咨询
541浏览 • 1回复 待解决
如何知晓navigation组件生命周期
220浏览 • 1回复 待解决
HarmonyOS页面onPageShow生命周期不回调
962浏览 • 1回复 待解决
HarmonyOS能否全局监听页面生命周期
540浏览 • 1回复 待解决
HarmonyOS 模块生命周期管理
208浏览 • 1回复 待解决
监听Ability生命周期
1130浏览 • 1回复 待解决
TabContent 内容的生命周期
338浏览 • 1回复 待解决
swiper切换监听生命周期
952浏览 • 1回复 待解决
如何监听subwindow生命周期
326浏览 • 1回复 待解决