HarmonyOS鸿蒙Next中怎么知道该组件离开了和再次进入了

HarmonyOS鸿蒙Next中怎么知道该组件离开了和再次进入了 有三个组件 Home、Hospital、User；现在想要知道，离开了三个组件在相应的组件里面，能够知道离开了或者再次进入了

cke_145.png


更多关于HarmonyOS鸿蒙Next中怎么知道该组件离开了和再次进入了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

【背景知识】

onContentWillChange：自定义Tabs页面切换拦截事件能力，新页面即将显示时触发该回调。
onChange：Tab页签切换后触发的事件。

【问题定位】

  1. Tabs组件自带多种切换页面的逻辑，包括滑动、点击、控制器多种方式进行页面切换，且默认可用。
  2. 分析问题可知，需要在任意一种方式触发页面切换时，实现切换拦截或执行其他逻辑。

【分析结论】

  1. Tabs提供多种交互响应的事件，其中onChange和onContentWillChange事件均可监听页面切换。
  2. onChange只能够在页面切换后触发监听，属于是事后处理，并不适用于问题场景。
  3. onContentWillChange能够在页面切换逻辑执行前触发，且能够通过返回值主动控制Tabs是否切换新页面，符合问题场景。

【修改建议】

监听onContentWillChange事件，当判断目的页面为当前显示页面时，目的页面的进入次数不变，离开次数不变，当目的页面不为当前显示页面时，目的页面的进入次数增加，原显示页面离开次数增加。

可参考以下代码：

import { hilog } from '@kit.PerformanceAnalysisKit';

interface InterfaceShowPage{
  enterCount:Array<number>;
  outCount:Array<number>
}

@Entry
@Component
struct testRootPage {
  @State message: string = 'Hello World';
  @State theShowIndex:number = 0;
  /*
   * enterCount: 页面进入次数数组，页面的Index为数组的索引，比如：第一页的enterCount为：thePageCount.enterCount[0]
   * outCount： 页面离开次数数组，页面的Index为数组的索引，比如：第一页的outCount为：thePageCount.outCount[0]
   * */
  private thePageCount:InterfaceShowPage = {
    enterCount:[],
    outCount:[]
  }
  aboutToAppear(): void {
    if(!this.thePageCount.enterCount[this.theShowIndex]){
      this.thePageCount.enterCount[this.theShowIndex] = 1;
    }
  }
  build() {
    Column() {
      Tabs(){
        TabContent(){
          mainPage()
        }

        TabContent(){
          homePage()
        }
      }
      .onChange((index:number)=>{
        this.theShowIndex = index;
      })
      .onContentWillChange((currentIndex:number,comingIndex:number)=>{
        if(currentIndex!=comingIndex){
          if(!this.thePageCount.enterCount[comingIndex]){
            this.thePageCount.enterCount[comingIndex]=0;
          }
          this.thePageCount.enterCount[comingIndex]++;

          if(!this.thePageCount.outCount[currentIndex]){
            this.thePageCount.outCount[currentIndex]=0;
          }
          this.thePageCount.outCount[currentIndex]++;
        }
        hilog.info(0x0000,'aTestLog',JSON.stringify(this.thePageCount))
        return true;
      })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct mainPage{
  build() {
    Column(){
      Text("我是MainPage")
    }
  }
}

@Component
struct homePage{
  build() {
    Column(){
      Text("我是HomePage")
    }
  }
}

更多关于HarmonyOS鸿蒙Next中怎么知道该组件离开了和再次进入了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


给组件设置onVisibleAreaChange方法

在HarmonyOS Next中，组件离开和再次进入可通过aboutToDisappear和aboutToAppear生命周期回调监听。当组件从页面移除时触发aboutToDisappear，重新进入可视区域时触发aboutToAppear。这两个方法属于ArkTS组件标准生命周期，适用于页面路由切换或组件显隐状态变化场景。开发者只需在自定义组件中重写对应方法即可实现监听逻辑。

在HarmonyOS Next中，可以通过以下方式监听组件的离开和进入事件：

1. 使用页面生命周期回调

  • aboutToAppear()：组件即将出现时触发（进入）
  • aboutToDisappear()：组件即将消失时触发（离开）

示例代码：

// Home页面示例
@Entry
@Component
struct Home {
  aboutToAppear() {
    console.log('Home页面进入')
  }

  aboutToDisappear() {
    console.log('Home页面离开')
  }

  build() {
    // 页面内容
  }
}

2. 使用路由监听（适用于页面跳转）

import router from '@ohos.router'

// 监听路由变化
router.on('routeChange', (routeInfo) => {
  if (routeInfo.type === RouterAction.PUSH) {
    console.log('进入页面:', routeInfo.name)
  } else if (routeInfo.type === RouterAction.POP) {
    console.log('离开页面:', routeInfo.name)
  }
})

3. 对于自定义组件 使用@State和@Watch装饰器监听组件状态变化：

@Component
struct MyComponent {
  @State @Watch('onVisibleChange') isVisible: boolean = true

  onVisibleChange() {
    if (this.isVisible) {
      console.log('组件进入可视区域')
    } else {
      console.log('组件离开可视区域')
    }
  }
}

应用场景建议：

  • 页面级状态管理使用生命周期回调
  • 跨页面导航监听使用路由事件
  • 组件显隐控制使用状态监听

这些方法可以帮助你准确追踪Home、Hospital、User三个组件的进入和离开状态。

回到顶部