HarmonyOS鸿蒙Next中自定义组件的展示和隐藏怎么监听？

HarmonyOS鸿蒙Next中自定义组件的展示和隐藏怎么监听？

我的主页Index.ets是一个导航页，里面的tabContent是一个自定义组件HomeTabPage，在HomeTabPage里通过按钮点击跳转PageA，PageA会对数据进行处理，当我从关闭PageA或从PageA返回时，展示HomeTabPage时，希望HomeTabPage能触发对应函数获取处理后的数据并打印信息。

8 回复

参考router无感监听：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer#uiobserveronrouterpageupdate11

更多关于HarmonyOS鸿蒙Next中自定义组件的展示和隐藏怎么监听？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用AppStorage + 无感监听达到期望效果，

【背景知识】

[@ohos.arkui.observer (无感监听)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer)：提供UI组件行为变化的无感监听能力。

【参考方案】

可参考页面埋点监听示例，通过[@ohos.arkui.observer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer)实现对页面访问次数及页面访问时间的监听统计。

  1. EntryAbility创建窗口处，调用PageTracingManager对象的initPageTracing方法初始化无感监听。
    // 初始化监听设置
PageTracingManager.getInstance().initPageTracing(uiContext)
  2. 通过[@ohos.arkui.observer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer)监听页面切换navDestinationSwitch、页面更新navDestinationUpdate、router页面状态变化routerPageUpdate三个事件。
    // 监听Navigation页面切换事件
uiObserver.on('navDestinationSwitch', callback)
// 监听Navigation页面更新事件
uiObserver.on('navDestinationUpdate', callback)
// 监听router页面状态变化
uiObserver.on('routerPageUpdate', callback)
  3. 在routerPageUpdate、navDestinationUpdate两个事件中，针对页面Appear、Disappear、Shown、Hidden四个状态处理页面访问次数增加及页面访问时间更新操作。
  4. 在监测页以列表形式展现各个页面的累计访问次数及访问总时间。
    // 整合监听数据并展示
let tracingIns = PageTracingManager.getInstance();
let accessCountMap = tracingIns.getAccessCountMap();
let accessTimeMap = tracingIns.getAccessTimeMap();
NEWS.forEach(...)

pop

支持设备PhonePC/2in1TabletTVWearable

pop(result: Object, animated?: boolean): NavPathInfo | undefined

弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
result Object 是 页面自定义处理结果。不支持boolean类型。
animated boolean 否 是否支持转场动画，
默认值：true。
true：支持转场动画。
false：不支持转场动画。

可以参考这个

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-visible-area-change-event#onvisibleareaapproximatechange17

感谢回复，但是这个是监听区域变化，和我的问题关系不大。

在HarmonyOS Next中，监听自定义组件的展示和隐藏，主要使用组件的生命周期回调函数。

对于@Component自定义组件：

  • 显示监听：在aboutToAppear()生命周期函数中处理。
  • 隐藏监听：在aboutToDisappear()生命周期函数中处理。

对于弹窗等容器组件，可通过其状态变化事件（如onStateChange）来监听显示/隐藏状态的变化。

在HarmonyOS Next中，可以通过自定义组件的生命周期回调或页面路由事件来监听其展示和隐藏状态。

对于你的场景，推荐以下两种方案：

方案一：利用自定义组件的 aboutToAppear / aboutToDisappear 生命周期

在 HomeTabPage 组件中，重写 aboutToAppear 生命周期函数。该函数会在组件即将显示时（例如从PageA返回时）被调用。

// HomeTabPage.ets
@Component
struct HomeTabPage {
  // 你的组件状态和方法...

  aboutToAppear(): void {
    // 在这里触发你的数据获取和打印函数
    this.yourDataFetchFunction();
    console.info('HomeTabPage is about to appear.');
  }

  // 可选：如果需要监听隐藏，可以重写 aboutToDisappear
  aboutToDisappear(): void {
    console.info('HomeTabPage is about to disappear.');
  }

  yourDataFetchFunction() {
    // 获取PageA处理后的数据并打印
  }
}

方案二：使用页面路由事件（配合UIAbility或页面内通信）

如果PageA处理数据后需要通知HomeTabPage，可以通过页面路由事件或公共状态管理来实现。

  1. 在PageA关闭或返回前触发事件：在PageA的返回逻辑中（例如点击返回按钮或调用router.back()前），可以通过EventHub或AppStorage等机制发布一个事件或更新一个全局状态。

  2. 在HomeTabPage中订阅事件或监听状态：

    • 使用EventHub（需要在同一个UIAbility上下文内）：
      // 在HomeTabPage的aboutToAppear中订阅
import common from '@ohos.app.ability.common';

let context: common.UIAbilityContext = ...; // 获取UIAbilityContext
let eventHub = context.eventHub;

aboutToAppear(): void {
  eventHub.on('dataUpdated', (data) => {
    // 处理数据并打印
  });
}

aboutToDisappear(): void {
  eventHub.off('dataUpdated');
}
    • 使用AppStorage（简易全局状态）：
      // PageA.ets 返回前更新数据
AppStorage.setOrCreate('processedData', yourData);

// HomeTabPage.ets 监听数据变化
@StorageLink('processedData') processedData: YourDataType = ...;

// 通过观察@StorageLink修饰的变量变化来触发操作

总结建议： 对于你描述的“从PageA返回时刷新”场景，方案一（aboutToAppear生命周期）是最直接和推荐的方式。你只需在HomeTabPage的aboutToAppear中调用数据获取函数即可，无需复杂的通信机制。如果PageA需要传递特定数据，可以结合路由参数（router.pushUrl时传递）或上述的轻量级状态共享。

回到顶部