HarmonyOS - UIObserver(无感监听)

概述

本篇文档主要介绍，在鸿蒙项目开发过程中，我们如何使用UIObserver对象提供的对UI组件行为变化的无感监听能力。

基于当前鸿蒙项目， 我们是把页面所有的数据都存放在一个叫UIState对象中， 并且ViewModel持有这个UIState对象，而且ViewModel中包含了所有业务的逻辑。

当我们在ViewModel中请求数据时，需要知道在什么时机去请求， 那么我们就需要再ViewModel中知道View的一些生命周期方法的变化。

使用鸿蒙提供的UIObserver即可实现该效果。

UIObserver无感监听Router

监听代码：

// 获取UIObserver对象
const lifecycleObserver: UIObserver = uiContext.getUIObserver()
lifecycleObserver.on('routerPageUpdate', (routerPageInfo: RouterPageInfo) => {
   
   
      console.log(`[lifecycle] routerPageUpdate============: ${
     
     this.stringify(routerPageInfo)}`)
    })

通过Router的方式push一个PageThree页面， 输出结果如下：

我们可以看到在页面状态发生变化时，注册的回调将会触发，开发者可以通过回调中传入的入参拿到页面的相关信息，如：页面的名字，索引，路径，生命周期状态等

回调方法的RouterPageInfo对象包含了上述的所有信息

UIObserver无感监听Navigation

示例代码：

const lifecycleObserver: UIObserver = uiContext.getUIObserver()

// 监听navDestination组件 切换到另外一个navDestination组件的变化
lifecycleObserver.on('navDestinationSwitch', (navDestinationSwitchInfo: uiObserver.NavDestinationSwitchInfo) => {
   
   
      console.log(`[lifecycle] navDestinationSwitch==================: ${
     
     this.stringify(navDestinationSwitchInfo)}`)
    })

// 监听navDestination组件（页面）生命周期发生变化
 lifecycleObserver.on('navDestinationUpdate', (navDestinationInfo: NavDestinationInfo) => {
   
   

      console.log(`[lifecycle] navDestinationUpdate=====================: ${
     
     this.stringify(navDestinationInfo)}`)
 })

输出结果：

根据结果可以知道， 通过上面的两个方法的监听， 我们可以知道页面的来源，当前页面的生命周期变化等信息。

UIObserver无感监听Tab

// 获取UIObserver对象
const lifecycleObserver: UIObserver = uiContext.getUIObserver()
// 注册tabContentUpdate的监听， 当tabContent组件变化时会回调
lifecycleObserver.on('tabContentUpdate', (tabContentInfo: uiObserver.TabContentInfo) => {
   
   
      console.log(`[lifecycle] tabContentUpdate====================: ${
     
     this.stringify(tabContentInfo)}`)

    })

测试结果：

其实关于UIObserver， 这里只介绍了比较常用的三种，官网文档中其实还有很多无感监听其他事件的api， 如果想知道更多请参考官方文档UIObsever官方文档

UIObserver的工具类封装

工具类示例代码

import {
   
    ArrayList } from '@kit.ArkTS'
import {
   
    router, uiObserver, UIObserver } from '@kit.ArkUI'

export interface ILifecycleId {
   
   
  tabId?: string
  pageId?: string
  navDestinationId?: string
}

export function getLifecycleId(component: CustomComponent, tabId?: string): ILifecycleId {
   
   
  return {
   
   
    tabId: tabId,
    pageId: component.queryRouterPageInfo()?.pageId,
    navDestinationId: component.queryNavDestinationInfo()?.navDestinationId,
  }
}

/**
 * 定义页面的个个生命周期的枚举， 具体的值参考个个监听回调方法中的状态值
 */
export enum LifecycleState {
   
   
  onCreate = 'onCreate', // 页面创建的时候
  onVisible = 'onVisible', // 页面显示
  onInvisible = 'onInvisible', // 页面隐藏
  onDestroy = 'onDestroy', // 页面

  onTabSelect = 'onTabSelect', // TabContent 组件显示（选中）
  onTabUnselect = 'onTabUnselect', // TabContent组件隐藏（未选中）
}

// 定义一个生命周期状态变量
export type TabLifeState = LifecycleState.onVisible | LifecycleState.onInvisible | LifecycleState.onTabSelect
  | LifecycleState.onTabUnselect


/**
 * 定义一个页面信息对象
 */
export interface ILifecycleObserver {
   
   
  tabId?: string
  pageId?: string
  navDestinationId?: string
  uiAbility?: boolean
  onReceive: (state: LifecycleState) => void
}

export class Lifecycle {
   
   
  /** 缓存监听的对象列表 */
  private observerList: ArrayList<ILifecycleObserver> = new ArrayList()
  /** 缓存Router下监听的列表 */
  private routerPageInfoMap: Map<string