Navigation+Tabs+TabContent如何监听生命周期 HarmonyOS 鸿蒙Next

Navigation+Tabs+TabContent如何监听生命周期 HarmonyOS 鸿蒙Next 场景描述:我有个首页MainPage页面,build()方法里面是用Navigation+Tabs+TabContent实现Tabs内容切换的,Tabs里面两个TabContent页面,A和B,例如A页面会跳转到C

问题:当我A页面跳转到C之后,C再返回到A页面,我该如何监听到A的生命周期变化,我需要在A tab页面再次可见时候做请求更新的操作;我试过给TabContent和A页面都套上NavDestination,但都没用发监听到onShown和onHidden回调

下面是大致的伪代码:

@Entry
@Component
struct MainPage{
  @Provide('appPathStack') appPathStack: NavPathStack = new NavPathStack();
  build() {
    Navigation() {
      Tabs() {
        TabContent() {
          A()
        }

        TabContent() {
          B()
        }
      }
    }
  }
}

@Component
struct A {
  @Consume('appPathStack') appPathStack: NavPathStack;

  build() {
    NavDestination() {
      //内容
      Text('跳转C') {

      }.onClick(() => {
        this.appPathStack.pushPathByName('C', null)
      })
    }.onShown(() => {
      //未执行,从C回A不执行
      console.log('A onShown')
    })
    .onHidden(() => {
      //未执行,跳转不执行
      console.log('A onHidden')
    })
  }

  onPageShow(): void {
    //走一次,从C回A不执行
    console.log('A onPageShow')
  }

  onPageHide(): void {
    //未执行
    console.log('A onPageHide')
  }
}

@Component
struct C {
  @Consume('appPathStack') appPathStack: NavPathStack;

  build() {
    NavDestination() {
      //内容
    }.onShown(() => {
      //正常打印
      console.log('C onShown')
    })
    .onHidden(() => {
      //正常打印
      console.log('C onHidden')
    })
  }
}

更多关于Navigation+Tabs+TabContent如何监听生命周期 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

@Entry @Component struct MainPage { @Provide(‘appPathStack’) appPathStack: NavPathStack = new NavPathStack(); @State index: number = 0; @State isShow: boolean = false;

onPageShow(): void { this.isShow = !this.isShow }

build() { Navigation() { Tabs() { TabContent() { A({ isShow: this.isShow, currentTabIndex: this.index }) }

    TabContent() {
      C({ isShow: this.isShow, currentTabIndex: this.index })
    }
  }.onChange((index: number) => {
    console.log("tabContent页面切换,当前索引:" + index)
    this.index = index
  })
}

} }

@Component struct A { @Link @Watch(‘refresh’) isShow: boolean; @Prop currentTabIndex: number = 0; private aIndex: number = 0;

refresh() { if (this.currentTabIndex == this.aIndex) { console.log(‘页面显示,刷新页面A’) } }

build() { NavDestination() { //内容 Text(‘页面A’) } } }

@Component struct C { @Link @Watch(‘refresh’) isShow: boolean; @Prop currentTabIndex: number = 0; private cIndex: number = 1;

refresh() { if (this.currentTabIndex == this.cIndex) { console.log(‘页面显示,刷新页面C’) } }

build() { NavDestination() { //内容 Text(‘页面C’) } } }


这样试试

更多关于Navigation+Tabs+TabContent如何监听生命周期 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


搞笑那 要是tabContent 里面的逻辑多了 全放在一个页面里面 几千行代码了

那还如何做到调低耦合性,如何做到代码简化

哥们你有点扯远了,这没涉及到什么耦合之类的;只是讨论tabContent是否有类似Android一样的onResume生命周期,

tab有onChange事件,在onChange事件中做处理

onChange在tab切换的时候可以,但A->C->A这样的场景不行;另外推到后台,再打开应用的场景也不行,触发不了onChange,

有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html

TabContent中的页面,是@Component修复的,他的生命周期函数有:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • onDidBuild:组件build()函数执行完成之后回调该接口,开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

你代码中,写的opPageShow(),是@Entry修饰的页面的生命周期,所以不会生效。生命周期可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5

使用Tabs + TabContent,TabContent页面生命周期只会初始化一次,页面A -> 页面C -> 页面A,第2此进入页面A之后,@Component的生命周期就不会再被触发了。

再说NavDestination的生命周期,NavDestination生命周期,需要使用Navigation的NavPathStack方式跳转,才能触发他的生命周期,所以你上面用的组件很多,但是方式不对,触发不了生命周期。

如果想TabContent点击之后,触发页面刷新,推荐你使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的tabIndex,在父组件中通过@State定义一个currentTabIndex变量,在onTabBarClick回调中将index赋值给currentTabIndex,并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props@Watch来监听父组件传递值的不同,执行各个tabContent中的更新请求方法

嗯,其实通过监听onTabBarClick还是Tab的其他事件,都可以做到让TabContent的子组件进行刷新,这个倒不是纠结点。而是在纠结页面A -> 页面C -> 页面A,第二次进入页面A之后A tab页如何触发刷新问题,或者是APP在A页面时候,APP推到后台,再打开APP时候,A如何监听生命周期问题;看了你上述的回答,貌似这种问题是无解,

楼下这个方式可以的,tab有onChange事件,在onChange事件中做处理,并不是无解的,

onChange在tab切换的时候可以,但A->C->A这样的场景不行;另外推到后台,再打开应用的场景也不行,触发不了onChange,

在HarmonyOS中,NavigationTabsTabContent组件可以通过@OnPageShow@OnPageHide@OnPageActive@OnPageInactive等装饰器来监听页面的生命周期事件。

  • @OnPageShow:当页面显示时触发。
  • @OnPageHide:当页面隐藏时触发。
  • @OnPageActive:当页面变为活动状态时触发。
  • @OnPageInactive:当页面变为非活动状态时触发。

这些装饰器可以直接应用在页面的方法上,以响应相应的生命周期事件。例如:

@Entry
@Component
struct MyPage {
  @OnPageShow
  onPageShow() {
    console.log('Page is shown');
  }

  @OnPageHide
  onPageHide() {
    console.log('Page is hidden');
  }

  @OnPageActive
  onPageActive() {
    console.log('Page is active');
  }

  @OnPageInactive
  onPageInactive() {
    console.log('Page is inactive');
  }

  build() {
    Column() {
      Text('My Page')
    }
  }
}

对于TabsTabContent,每个TabContent可以视为一个独立的页面,因此可以在每个TabContent中分别监听其生命周期事件。Navigation组件的每个页面也可以使用相同的方式来监听生命周期。

通过这种方式,开发者可以在页面的不同生命周期阶段执行相应的操作,例如数据加载、资源释放等。

回到顶部