HarmonyOS NEXT 内嵌在Tabs的组件不走onPageShow方法?

Question

HarmonyOS NEXT 内嵌在Tabs的组件不走onPageShow方法?

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

Tabs组件切换不执行onPageShow生命周期，因为onPageShow是页面级的生命周期，tabs切换触发的是子组件组件级的生命周期aboutToAppear()，可以将showPage()放在该生命周期内调用，如果需要每一次切换都要执行TabContent中的showPage方法，这边推荐使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的tabIndex，在父组件中通过@State定义一个currentTabIndex变量，在onTabBarClick回调中将index赋值给currentTabIndex，并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props和@Watch来监听父组件传递值的不同，执行各个tabContent中的showPage方法。
demo参考如下：

// xxx.ets 
import { FirstPage } from './FirstPage' 
 
@Entry 
@Component 
struct TabsExample { 
  @State fontColor: string = '#182431' 
  @State selectedFontColor: string = '#007DFF' 
  @State currentIndex: number = 0 
  private controller: TabsController = new TabsController() 
  @State mainPageState:boolean = false 
  @Builder tabBuilder(index: number, name: string) { 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 500 : 400) 
        .lineHeight(22) 
        .margin({ top: 17, bottom: 7 }) 
      Divider() 
        .strokeWidth(2) 
        .color('#007DFF') 
        .opacity(this.currentIndex === index ? 1 : 0) 
    }.width('100%') 
  } 
 
  build() { 
    Column() { 
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { 
        TabContent() { 
          FirstPage({mainPageState:this.mainPageState}).width('100%').height('100%').backgroundColor('#00CB87') 
 
        }.tabBar(this.tabBuilder(0, 'green')) 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor('#007DFF') 
        }.tabBar(this.tabBuilder(1, 'blue')) 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor('#FFBF00') 
        }.tabBar(this.tabBuilder(2, 'yellow')) 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor('#E67C92') 
        }.tabBar(this.tabBuilder(3, 'pink')) 
      } 
      .vertical(false) 
      .barMode(BarMode.Fixed) 
      .barWidth(360) 
      .barHeight(56) 
      .animationDuration(400) 
      .onChange((index: number) => { 
        this.currentIndex = index 
      }) 
      .width('100%') 
      .height('100%') 
      .margin({ top: 52 }) 
      .backgroundColor('#F1F3F5') 
    }.width('100%') 
  } 
 
  onPageShow(): void { 
    console.log('index--- onPageShow') 
    this.mainPageState = true 
  } 
  onPageHide(): void { 
    console.log('index--- onPageHide') 
    this.mainPageState = false 
  } 
}
import { router } from '@kit.ArkUI'; 
import { FaultLogger } from '@kit.PerformanceAnalysisKit'; 
 
@Entry 
@Component 
export struct FirstPage { 
  @State message: string = 'Hello World'; 
  @Link @Watch('mainIsShow') mainPageState:boolean 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold).onClick(()=>{ 
          router.pushUrl({ 
            url:'pages/DetailPage', 
 
          }) 
 
        }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
  mainIsShow(){ 
  } 
  aboutToAppear(): void { 
  } 
 
  onPageShow(): void { 
  } 
  onPageHide(): void { 
  } 
  aboutToRecycle(): void { 
  } 
 
}
import { Notification } from '@kit.NotificationKit'; 
 
@Entry 
@Component 
struct DetailPage { 
  @State message: string = '详情'; 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
  onPageShow(): void { 
  } 
  onPageHide(): void { 
   } 
  onBackPress(): boolean | void { 
  } 
}