HarmonyOS 如何对tab页生命周期监控

1.参考TabContent中的onWillShow和onWillHide事件https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabcontent.md#onwillhide12

2.尝试使用下onVisibleAreaChange回调，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

onVisibleAreaChange的demo：

@Entry
@Component
struct TabBarStyleExample1 {
  @State message:string = "hello word"
  @State color:Color = Color.Black
  @Builder
  MyColum(){
    Childs({colors:this.color,message:this.message})
  }
  build() {
    Column({ space: 5 }) {
      Text("底部页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink'))
          .onWillShow(() => {
            this.message = "Pink"
            this.color = Color.Pink
            console.info("Pink will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Pink will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
          .onWillShow(() => {
            this.message = "Yellow"
            this.color = Color.Yellow
            console.info("Yellow will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Yellow will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
          .onWillShow(() => {
            this.message = "Blue"
            this.color = Color.Blue
            console.info("Blue will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Blue will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
          .onWillShow(() => {
            this.message = "Green"
            this.color = Color.Green
            console.info("Green will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Green will hide")
          })
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)

    }
  }
}

@Reusable
@Component
struct Childs{
  @State colors:Color = Color.Green;
  @Prop@Watch('onChage') message:string = ''

  onChage(){
    console.log(':::onChage')
  }

  build() {
    Column(){
      Text(this.message)
    }.width('100%').height('100%').backgroundColor(this.colors)
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      console.info(':::Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
    })

  }
}
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.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.