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
@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中,Navigation
、Tabs
和TabContent
组件可以通过@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')
}
}
}
对于Tabs
和TabContent
,每个TabContent
可以视为一个独立的页面,因此可以在每个TabContent
中分别监听其生命周期事件。Navigation
组件的每个页面也可以使用相同的方式来监听生命周期。
通过这种方式,开发者可以在页面的不同生命周期阶段执行相应的操作,例如数据加载、资源释放等。