鸿蒙5.0开发进阶：ArkTS API UI界面-@ohos.arkui.observer (无感监听)

最新推荐文章于 2025-11-25 07:23:10 发布
原创 最新推荐文章于 2025-11-25 07:23:10 发布 · 1.1k 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #鸿蒙系统 #ArkUI #ArkTS

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

@ohos.arkui.observer (无感监听)

提供UI组件行为变化的无感监听能力。

说明

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { uiObserver as observer } from '@kit.ArkUI';

NavDestination组件状态。

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

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

名称值说明
ON_SHOWN0

NavDestination组件显示。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

ON_HIDDEN1

NavDestination组件隐藏。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

ON_APPEAR12+2

NavDestination从组件树上挂载。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_DISAPPEAR12+3

NavDestination从组件树上卸载。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_WILL_SHOW12+4

NavDestination组件显示之前。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_WILL_HIDE12+5

NavDestination组件隐藏之前。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_WILL_APPEAR12+6

NavDestination挂载到组件树之前。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_WILL_DISAPPEAR12+7

NavDestination从组件树上卸载之前。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ON_BACKPRESS12+100

NavDestination组件返回。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

ScrollEventType12+

滚动事件的类型。

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

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

名称值说明
SCROLL_START0滚动事件开始。
SCROLL_STOP1滚动事件结束。

RouterPageState

routerPage生命周期触发时对应的状态。

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

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

名称值说明
ABOUT_TO_APPEAR0page即将显示。
ABOUT_TO_DISAPPEAR1page即将销毁。
ON_PAGE_SHOW2page显示。
ON_PAGE_HIDE3page隐藏。
ON_BACK_PRESS4page返回时。

TabContentState12+

TabContent组件的状态。

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

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

名称值说明
ON_SHOW0TabContent组件显示。
ON_HIDE1TabContent组件隐藏。

NavDestination组件信息。

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

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

名称类型必填说明
navigationIdResourceStr是包含NavDestination组件的Navigation组件的id。
nameResourceStr是NavDestination组件的名称。
stateNavDestinationState是NavDestination组件的状态。
index12+number是NavDestination在页面栈中的索引。
param12+Object否NavDestination组件的参数。
navDestinationId12+string是NavDestination组件的唯一标识ID。

Navigation组件信息。

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

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

名称类型必填说明
navigationIdstring是Navigation组件的id。
pathStackNavPathStack是Navigation组件的路由栈。

ScrollEventInfo12+

ScrollEvent滚动信息。

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

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

名称类型必填说明
idstring是滚动组件的id。
uniqueIdnumber是滚动组件的uniqueId。
scrollEventScrollEventType是滚动事件的类型。
offsetnumber是滚动组件的当前偏移量。

ObserverOptions12+

Observer选项。

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

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

名称类型必填说明
idstring是组件的id。

RouterPageInfo

RouterPageInfo包含的信息。

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

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

名称类型必填说明
contextUIAbilityContext | UIContext是触发生命周期的routerPage页面对应的上下文信息。
indexnumber是触发生命周期的routerPage在栈中的位置。
namestring是触发生命周期的routerPage页面的名称。
pathstring是触发生命周期的routerPage页面的路径。
stateRouterPageState是触发生命周期的routerPage页面的状态。
pageId12+string是触发生命周期的routerPage页面的唯一标识。

DensityInfo12+

屏幕像素密度变化回调包含的信息。

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

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

名称类型必填说明
contextUIContext是屏幕像素密度变化时页面对应的上下文信息。
densitynumber是变化后的屏幕像素密度。

Navigation组件页面切换的信息。

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

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

名称类型必填说明
contextUIAbilityContext | UIContext是触发页面切换的Navigation对应的上下文信息。
fromNavDestinationInfo | NavBar是页面切换的源页面。
toNavDestinationInfo | NavBar是页面切换的目的页面。
operationNavigationOperation是页面切换操作类型。

Navigation组件页面切换事件的监听选项。

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

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

名称类型必填说明
navigationIdResourceStr是指定需要监听的Navigation的ID

TabContentInfo12+

TabContent页面的切换信息。

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

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

名称类型必填说明
tabContentIdstring是TabContent组件的id。
tabContentUniqueIdnumber是TabContent组件的uniqueId。
stateTabContentState是TabContent组件的状态。
idstring是Tabs组件的id。
uniqueIdnumber是Tabs组件的uniqueId。

observer.on('navDestinationUpdate')

on(type: 'navDestinationUpdate', callback: Callback<NavDestinationInfo>): void

监听NavDestination组件的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。
callbackCallback<NavDestinationInfo>是回调函数。返回当前的NavDestination组件状态。

示例：

observer.on('navDestinationUpdate', (info) => {
  console.info('NavDestination state update', JSON.stringify(info));
});

observer.off('navDestinationUpdate')

off(type: 'navDestinationUpdate', callback?: Callback<NavDestinationInfo>): void

取消监听NavDestination组件的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。
callbackCallback<NavDestinationInfo>否回调函数。返回当前的NavDestination组件状态。

示例：

observer.off('navDestinationUpdate');

observer.on('navDestinationUpdate')

on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback<NavDestinationInfo>): void

监听NavDestination组件的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。
options{ navigationId: ResourceStr }是指定监听的Navigation的id。
callbackCallback<NavDestinationInfo>是回调函数。返回当前的NavDestination组件状态。

示例：

observer.on('navDestinationUpdate', { navigationId: "testId" }, (info) => {
    console.info('NavDestination state update', JSON.stringify(info));
});

observer.off('navDestinationUpdate')

off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback?: Callback<NavDestinationInfo>): void

取消监听NavDestination组件的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。
options{ navigationId: ResourceStr }是指定监听的Navigation的id。
callbackCallback<NavDestinationInfo>否回调函数。返回当前的NavDestination组件状态。

示例：

observer.off('navDestinationUpdate', { navigationId: "testId" });

observer.on('scrollEvent')12+

on(type: 'scrollEvent', callback: Callback<ScrollEventInfo>): void

监听滚动事件的开始和结束。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。
callbackCallback<ScrollEventInfo>是回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

observer.off('scrollEvent')12+

off(type: 'scrollEvent', callback?: Callback<ScrollEventInfo>): void

取消监听滚动事件的开始和结束。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。
callbackCallback<ScrollEventInfo>否回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

observer.on('scrollEvent')12+

on(type: 'scrollEvent', options: ObserverOptions, callback: Callback<ScrollEventInfo>): void

监听滚动事件的开始和结束。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。
optionsObserverOptions是指定监听的滚动组件的id。
callbackCallback<ScrollEventInfo>是回调函数。返回滚动事件的信息。

示例：

参考offscrollevent示例。

observer.off('scrollEvent')12+

off(type: 'scrollEvent', options: ObserverOptions, callback?: Callback<ScrollEventInfo>): void

取消监听滚动事件的开始和结束。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。
optionsObserverOptions是指定监听的滚动组件的id。
callbackCallback<ScrollEventInfo>否回调函数。返回滚动事件的信息。

示例：


import { uiObserver as observer } from '@kit.ArkUI'

@Entry
@Component
struct Index {
scroller: Scroller = new Scroller();
options: observer.ObserverOptions = { id: "testId" };
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7]

build() {
Column() {
Column() {
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item: number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}, (item: string) => item)
}.width('100%')
}
.id("testId")
.height('80%')
}
.width('100%')

Row() {
Button('UIObserver on')
.onClick(() => {
observer.on('scrollEvent', (info) => {
console.info('scrollEventInfo', JSON.stringify(info));
});
})
Button('UIObserver off')
.onClick(() => {
observer.off('scrollEvent');
})
}

Row() {
Button('UIObserverWithId on')
.onClick(() => {
observer.on('scrollEvent', this.options, (info) => {
console.info('scrollEventInfo', JSON.stringify(info));
});
})
Button('UIObserverWithId off')
.onClick(() => {
observer.off('scrollEvent', this.options);
})
}
}
.height('100%')
}
}

observer.on('routerPageUpdate')11+

on(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback: Callback<RouterPageInfo>): void

监听router中page页面的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<RouterPageInfo>是回调函数。携带pageInfo，返回当前的page页面状态。

示例：

// used in UIAbility
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { UIContext, window, uiObserver as observer } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
private uiContext: UIContext | null = null;

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
// 注册监听，范围是abilityContext内的page
observer.on('routerPageUpdate', this.context, (info: observer.RouterPageInfo) => {
console.info('[uiObserver][abilityContext] got info: ' + JSON.stringify(info))
})
}

onWindowStageCreate(windowStage: window.WindowStage): void {
windowStage.loadContent('pages/Index', (err) => {
windowStage.getMainWindow((err: BusinessError, data) => {
let windowInfo: window.Window = data;
// 获取UIContext实例
this.uiContext = windowInfo.getUIContext();
// 注册监听，范围是uiContext内的page
observer.on('routerPageUpdate', this.uiContext, (info: observer.RouterPageInfo)=>{
console.info('[uiObserver][uiContext] got info: ' + JSON.stringify(info))
})
})
});
}

// ... other function in EntryAbility
}

observer.off('routerPageUpdate')11+

off(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback?: Callback<RouterPageInfo>): void

取消监听router中page页面的状态变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面的范围
callbackCallback<RouterPageInfo>否需要被注销的回调函。

示例：

// used in UIAbility
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver as observer, UIContext } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
// 实际使用前uiContext需要被赋值。参见示例observer.on('routerPageUpdate')
private uiContext: UIContext | null = null;

onDestroy(): void {
// 注销当前abilityContext上的所有routerPageUpdate监听
observer.off('routerPageUpdate', this.context)
}

onWindowStageDestroy(): void {
// 注销在uiContext上的所有routerPageUpdate监听
if (this.uiContext) {
observer.off('routerPageUpdate', this.uiContext);
}
}

// ... other function in EntryAbility
}

observer.on('densityUpdate')12+

on(type: 'densityUpdate', context: UIContext, callback: Callback<DensityInfo>): void

监听屏幕像素密度变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'densityUpdate'，即屏幕像素密度变化。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<DensityInfo>是回调函数。携带densityInfo，返回变化后的屏幕像素密度。

示例：

import { uiObserver as observer } from '@kit.ArkUI';

@Entry
@Component
struct Index {
@State density: number = 0;
@State message: string = '未注册监听'

densityUpdateCallback = (info: observer.DensityInfo) => {
this.density = info.density;
this.message = '变化后的DPI：' + this.density.toString();
}

build() {
Column() {
Text(this.message)
.fontSize(24)
.fontWeight(FontWeight.Bold)
Button('注册屏幕像素密度变化监听')
.onClick(() => {
this.message = '已注册监听'
observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
})
}
}
}

observer.off('densityUpdate')12+

off(type: 'densityUpdate', context: UIContext, callback?: Callback<DensityInfo>): void

取消监听屏幕像素密度的变化。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'densityUpdate'，即屏幕像素密度变化。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<DensityInfo>否需要被注销的回调函数。若不指定具体的回调函数，则注销指定UIContext下所有densityUpdate事件监听。
import { uiObserver as observer, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State density: number = 0;
  @State message: string = '未注册监听'

  densityUpdateCallback = (info: observer.DensityInfo) => {
    this.density = info.density;
    this.message = '变化后的DPI：' + this.density.toString();
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('注册屏幕像素密度变化监听')
        .onClick(() => {
          this.message = '已注册监听'
          observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
        })
      Button('解除注册屏幕像素密度变化监听')
        .onClick(() => {
          this.message = '未注册监听'
          observer.off('densityUpdate', this.getUIContext(), this.densityUpdateCallback);
        })
    }
  }
}

observer.on('willDraw')12+

on(type: 'willDraw', context: UIContext, callback: Callback<void>): void

监听每一帧绘制指令下发情况。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'willDraw'，即是否将要绘制。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<void>是回调函数。

示例：

import { uiObserver as observer } from '@kit.ArkUI';

@Entry
@Component
struct Index {
willDrawCallback = () => {
console.info("willDraw指令下发");
}
build() {
Column() {
Button('注册绘制指令下发监听')
.onClick(() => {
observer.on('willDraw', this.getUIContext(), this.willDrawCallback);
})
}
}
}

observer.off('willDraw')12+

off(type: 'willDraw', context: UIContext, callback?: Callback<void>): void

取消监听每一帧绘制指令下发情况。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'willDraw'，即是否将要绘制。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<void>否需要被注销的回调函数。
import { uiObserver as observer } from '@kit.ArkUI';

@Entry
@Component
struct Index {
willDrawCallback = () => {
console.info("willDraw指令下发")
}

build() {
Column() {
Button('注册绘制指令下发监听')
.onClick(() => {
observer.on('willDraw', this.getUIContext(), this.willDrawCallback);
})
Button('解除注册绘制指令下发监听')
.onClick(() => {
observer.off('willDraw', this.getUIContext(), this.willDrawCallback);
})
}
}
}

observer.on('didLayout')12+

on(type: 'didLayout', context: UIContext, callback: Callback<void>): void

监听每一帧布局完成情况

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'didLayout'，即是否布局完成。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<void>是回调函数。

示例：

import { uiObserver as observer } from '@kit.ArkUI';

@Entry
@Component
struct Index {
didLayoutCallback = () => {
console.info("Layout布局完成");
}
build() {
Column() {
Button('注册布局完成监听')
.onClick(() => {
observer.on('didLayout', this.getUIContext(), this.didLayoutCallback);
})
}
}
}

observer.off('didLayout')12+

off(type: 'didLayout', context: UIContext, callback?: Callback<void>): void

取消监听每一帧布局完成情况。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'didLayout'，即是否布局完成。
contextUIContext是上下文信息，用以指定监听页面的范围。
callbackCallback<void>否需要被注销的回调函数。
import { uiObserver as observer } from '@kit.ArkUI';

@Entry
@Component
struct Index {
didLayoutCallback = () => {
console.info("Layout布局完成")
}

build() {
Column() {
Button('注册布局完成监听')
.onClick(() => {
observer.on('didLayout', this.getUIContext(), this.didLayoutCallback);
})
Button('解除布局完成s监听')
.onClick(() => {
observer.off('didLayout', this.getUIContext(), this.didLayoutCallback);
})
}
}
}

observer.on('navDestinationSwitch')12+

on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback: Callback<NavDestinationSwitchInfo>): void

监听Navigation的页面切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面切换事件的范围。
callbackCallback<NavDestinationSwitchInfo>是回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。

示例：

// EntryAbility.ets
// 演示 observer.on('navDestinationSwitch', UIAbilityContext, callback)
// observer.off('navDestinationSwitch', UIAbilityContext, callback)
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver as observer, window } from '@kit.ArkUI';
import { hilog } from "@kit.PerformanceAnalysisKit"

function callBackFunc(info: observer.NavDestinationSwitchInfo) {
console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
observer.on('navDestinationSwitch', this.context, callBackFunc);
}

onDestroy(): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
observer.off('navDestinationSwitch', this.context, callBackFunc);
}

onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}

onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}

onForeground(): void {
// Ability has brought to foreground
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}

onBackground(): void {
// Ability has back to background
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}
}
// Index.ets
// 演示 observer.on('navDestinationSwitch', UIContext, callback)
// observer.off('navDestinationSwitch', UIContext, callback)
import { uiObserver as observer } from '@kit.ArkUI';

@Component
struct PageOne {
build() {
NavDestination() {
Text("pageOne")
}.title("pageOne")
}
}

function callBackFunc(info: observer.NavDestinationSwitchInfo) {
console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

@Entry
@Component
struct Index {
private stack: NavPathStack = new NavPathStack();

@Builder
PageBuilder(name: string) {
PageOne()
}

aboutToAppear() {
observer.on('navDestinationSwitch', this.getUIContext(), callBackFunc)
}

aboutToDisappear() {
observer.off('navDestinationSwitch', this.getUIContext(), callBackFunc)
}

build() {
Column() {
Navigation(this.stack) {
Button("push").onClick(() => {
this.stack.pushPath({name: "pageOne"});
})
}
.title("Navigation")
.navDestination(this.PageBuilder)
}
.width('100%')
.height('100%')
}
}

observer.off('navDestinationSwitch')12+

off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback?: Callback<NavDestinationSwitchInfo>): void

取消监听Navigation的页面切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面切换事件的范围。
callbackCallback<NavDestinationSwitchInfo>否需要被注销的回调函数。

示例：

参考observer.on('navDestinationSwitch')示例。

observer.on('navDestinationSwitch')12+

on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback: Callback<NavDestinationSwitchInfo>): void

监听Navigation的页面切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面切换事件的范围。
observerOptionsNavDestinationSwitchObserverOptions是监听选项。
callbackCallback<NavDestinationSwitchInfo>是回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。

示例：

// EntryAbility.ets
// 演示 observer.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback)
// observer.off('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback)
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { uiObserver as observer, window } from '@kit.ArkUI';
import { hilog } from "@kit.PerformanceAnalysisKit"

function callBackFunc(info: observer.NavDestinationSwitchInfo) {
console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
observer.on('navDestinationSwitch', this.context, { navigationId: "myNavId" }, callBackFunc);
}

onDestroy(): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
observer.off('navDestinationSwitch', this.context, { navigationId: "myNavId" }, callBackFunc);
}

onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}

onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}

onForeground(): void {
// Ability has brought to foreground
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}

onBackground(): void {
// Ability has back to background
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}
}
// Index.ets
// 演示 observer.on('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback)
// observer.off('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback)
import { uiObserver as observer } from '@kit.ArkUI';

@Component
struct PageOne {
  build() {
    NavDestination() {
      Text("pageOne")
    }.title("pageOne")
  }
}

function callBackFunc(info: observer.NavDestinationSwitchInfo) {
  console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`)
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  PageBuilder(name: string) {
    PageOne()
  }

  aboutToAppear() {
    observer.on('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc)
  }

  aboutToDisappear() {
    observer.off('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc)
  }

  build() {
    Column() {
      Navigation(this.stack) {
        Button("push").onClick(() => {
          this.stack.pushPath({name: "pageOne"});
        })
      }
      .id("myNavId")
      .title("Navigation")
      .navDestination(this.PageBuilder)
    }
    .width('100%')
    .height('100%')
  }
}

observer.off('navDestinationSwitch')12+

off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback?: Callback<NavDestinationSwitchInfo>): void

取消监听Navigation的页面切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。
contextUIAbilityContext | UIContext是上下文信息，用以指定监听页面切换事件的范围。
observerOptionsNavDestinationSwitchObserverOptions是监听选项。
callbackCallback<NavDestinationSwitchInfo>否需要被注销的回调函数。

示例：

参考observer.on('navDestinationSwitch')接口示例。

observer.on('tabContentUpdate')12+

on(type: 'tabContentUpdate', callback: Callback<TabContentInfo>): void

监听TabContent页面的切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。
callbackCallback<TabContentInfo>是回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。

示例：

import { uiObserver as observer } from '@kit.ArkUI';

function callbackFunc(info: observer.TabContentInfo) {
console.info('tabContentUpdate', JSON.stringify(info));
}

@Entry
@Component
struct TabsExample {

aboutToAppear(): void {
observer.on('tabContentUpdate', callbackFunc);
}

aboutToDisappear(): void {
observer.off('tabContentUpdate', callbackFunc);
}

build() {
Column() {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar('green').id('tabContentId0')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar('blue').id('tabContentId1')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar('yellow').id('tabContentId2')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar('pink').id('tabContentId3')
}
.width(360)
.height(296)
.backgroundColor('#F1F3F5')
.id('tabsId')
}.width('100%')
}
}

observer.off('tabContentUpdate')12+

off(type: 'tabContentUpdate', callback?: Callback<TabContentInfo>): void

取消监听TabContent页面的切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。
callbackCallback<TabContentInfo>否需要被注销的回调函数。

示例：

参考observer.on('tabContentUpdate')接口示例。

observer.on('tabContentUpdate')12+

on(type: 'tabContentUpdate', options: ObserverOptions, callback: Callback<TabContentInfo>): void

监听TabContent页面的切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。
optionsObserverOptions是指定监听的Tabs组件的id。
callbackCallback<TabContentInfo>是回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。

示例：

import { uiObserver as observer } from '@kit.ArkUI';

function callbackFunc(info: observer.TabContentInfo) {
console.info('tabContentUpdate', JSON.stringify(info));
}

@Entry
@Component
struct TabsExample {

aboutToAppear(): void {
observer.on('tabContentUpdate', { id: 'tabsId' }, callbackFunc);
}

aboutToDisappear(): void {
observer.off('tabContentUpdate', { id: 'tabsId' }, callbackFunc);
}

build() {
Column() {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar('green').id('tabContentId0')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar('blue').id('tabContentId1')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar('yellow').id('tabContentId2')

TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar('pink').id('tabContentId3')
}
.width(360)
.height(296)
.backgroundColor('#F1F3F5')
.id('tabsId')
}.width('100%')
}
}

observer.off('tabContentUpdate')12+

off(type: 'tabContentUpdate', options: ObserverOptions, callback?: Callback<TabContentInfo>): void

取消监听TabContent页面的切换事件。

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

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

参数：

参数名类型必填说明
typestring是监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。
optionsObserverOptions是指定监听的Tabs组件的id。
callbackCallback<TabContentInfo>否需要被注销的回调函数。

鸿蒙5.0进阶开发：UI开发-Router切换Navigation
AyomQAQ的博客
12-20 1078
本文主要从页面跳转、动效和生命周期等方面介绍如何从Router切换到Navigation。
HarmonyOS核心知识点：Router切换Navigation
wuliusan5的博客
03-21 869
基本实现跟上述Router动态路由类似开发者自定义路由管理模块，各个提供路由页面的模块均依赖此模块；构建Navigation组件时，将NavPactStack注入路由管理模块，路由管理模块对NavPactStack进行封装，对外提供路由能力；各个路由页面不再提供组件，转为提供@build封装的构建函数，并再通过WrappedBuilder封装后，实现全局封装；各个路由页面将模块名称、路由名称、WrappedBuilder封装后构建函数注册如路由模块。
鸿蒙列表，item组件封装传参问题？@ObjectLink 和@Observerd
weixin_39971163的博客
12-25 912
ArtTS不支持这么做，也就是Link修饰的数据必须得是最外层的 State数据，想要实现我们刚刚的设想，我们还得另辟蹊径。-后续ObjectLink 和Observerd会解决这个问题。案例中：父组件的总和，是需要再传一个list数据进去，在子组件中使用@link 进行数据双向更新，才能实现ui试图更新的，因为鸿蒙数据只支持单层数据响应式更新。当然，如果只是对item内容进行纯ui渲染， 可以不使用装饰器修饰，直接进行数据传递和接受渲染即可。鸿蒙列表渲染，封装内容组件，进行item传参会报错？
鸿蒙ArkTS/ArkUI实战-装饰器@State、@Observed和@ObjectLink
Androiddddd的博客
11-30 4495
给大家分享一份我正在学习的《鸿蒙零基础入门学习指南》，希望能对那些想要学习鸿蒙，但是有没有方向的人提供一点帮助。
ArkTS @Observed、@ObjectLink状态装饰器的使用
a_strong_pig的博客
12-20 2116
ArkTS @Observed、@ObjectLink状态装饰器以及方法传递(bind)的使用
鸿蒙NEXT开发：ArkUI框架UI界面-@ohos.arkui.observer (无感监听)
ZPYQAQ的博客
03-12 1050
提供UI组件行为变化的无感监听能力。
鸿蒙开发5.0案例分析：基于原生能力的组件封装
2501_91726121的博客
05-28 703
应用中可基于自定义modifier扩展属性，基于@link传递属性值。如在选购商品时页面，选中之前和选中之后的样式表现不同。方案商品页面的文本组件Text并没有设置边框、背景颜色属性。通过自定义modifier为文本组件扩展设置边框、背景颜色、边框颜色属性。选择颜色、尺寸时，选择前后会表现不同的样式。核心代码1.自定义modifier继承CommonModifier ，并且定义setGroup2设置组件加载时的属性样式，定义setGroup1设置组件点击触发时的属性样式。// 组件点击时触发的样式。
鸿蒙5.0开发实战案例：Router切换Navigation
liudiaosi6的博客
05-30 1015
基本实现跟上述Router动态路由类似开发者自定义路由管理模块，各个提供路由页面的模块均依赖此模块；构建Navigation组件时，将NavPactStack注入路由管理模块，路由管理模块对NavPactStack进行封装，对外提供路由能力；各个路由页面不再提供组件，转为提供@build封装的构建函数，并再通过WrappedBuilder封装后，实现全局封装；各个路由页面将模块名称、路由名称、WrappedBuilder封装后构建函数注册如路由模块。
鸿蒙5.0开发常见问题【ArkUI组件能否支持继承？】
鸿蒙的技术博客
06-16 225
ArkUI采用声明式语法设计，组件以struct定义且不支持继承。为满足复用需求，开发者可使用attributeModifier动态属性扩展组件，部分功能已实现，其余需求将持续优化。对于需要在基类页面统一处理的业务逻辑，可通过无感监听页面生命周期的observer功能实现。这些方案为开发者提供了灵活的组件扩展和生命周期管理方式。
鸿蒙HarmonyOS NEXT开发（5.0）Router切换Navigation
wexzmij54187的博客
09-26 1761
Navigation作为导航容器组件，可以挂载在单个page节点下，也可以叠加、嵌套。Navigation管理了标题栏、内容区和工具栏，内容区用于显示用户自定义页面的内容，并支持页面的路由能力。
【三分屏开发实战】：深入理解Android 14源码并实现三分屏功能
![【三分屏开发实战】：深入理解Android 14...该技术不仅提高了设备的生产力，还为开发者带来了新的界面设计和交互逻辑的挑战。本章将介绍三分屏的基本概念以及它在不同应用场景下的作用。 ## 1.2 开发环境搭建 三分
鸿蒙 router的params传参
03-21
下面是一段基于 `observer` 的无感监听示例： ```javascript import observer from '@ohos.arkui.observer'; function handleRouteChange(info) { console.info(`Current route info: ${JSON.stringify(info)}`); ...
Electron for HarmonyOS：跨平台底层原理探析
已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！
11-24 992
Electron 自 2013 年诞生以来，凭借 **“HTML/CSS/JS + Chromium + Node.js”** 的组合，成为桌面端跨平台开发的事实标准（VS Code、Slack、Discord 等均基于此）。而 HarmonyOS（鸿蒙）作为华为推出的全场景分布式操作系统，其应用生态以 ArkTS/JS + ArkUI + Stage 模型 为核心。
鸿蒙Cordova开发踩坑记录：LocalStorage的“失忆症“
小淼淼的博客
11-24 680
摘要：本文揭示了鸿蒙混合开发中LocalStorage数据丢失问题，发现应用更新或重签名会导致沙箱重建，使WebView存储目录失效。为解决该问题，提出基于Native Preferences的持久化方案：1）封装NativeStorage插件通过JSBridge与前端交互；2）采用双写策略同步LocalStorage与Native存储；3）启动时实施数据迁移确保兼容性。同时强调避免存储大对象、保持签名一致及合理控制flush时机等注意事项。最终建议采用"LocalStorage+Preferen
HarmonyOS在智能穿戴中的生物识别
最新发布
2509_93942294的博客
11-25 361
系统能通过这些细微的、节律性的变化，不仅确认“是你”，还能推断出你的情绪压力水平、睡眠阶段甚至潜在的健康风险。举个例子，手表采集到你的心电原始数据，可以通过分布式软总线，安全地流转到你的手机上进行更复杂的算法分析（比如房颤筛查），分析结果再回流到手表显示。心电的波形，特别是P波、QRS波群、T波的形态、间隔和幅度，是比心率更为复杂和个性化的生物标识。无缝身份认证： 系统可以综合你的心率模式、活动状态等连续生物特征，在你拿起手机或靠近电脑时，实现无感的自动解锁，真正做到“你就是密码”。
【HarmonyOS 6】在UI控件上滑动也会触发onClick点击事件？
路漫漫亦无涯
11-24 101
HarmonyOS 6开发中遇到滑动触发onClick事件的问题，原因是滑动后抬起手指会触发默认点击事件。从API12开始，onClick新增distanceThreshold参数可设置移动阈值，当手指移动超过该阈值时点击识别失败。解决方案是在onClick中添加distanceThreshold参数并设置为1vp，这样轻微滑动就不会误触发点击事件。本文通过示例代码演示了问题复现和解决方法，提醒开发者注意API新特性的使用。
HarmonyOS 跨设备迁移与协同：深入技术实现与创新应用
不懂先生的博客
11-25 99
HarmonyOS 的分布式架构是其实现跨设备迁移与协同的基石。它基于“一次开发，多端部署”的理念，通过分布式软总线、分布式数据管理和分布式任务调度三大核心组件，构建了一个虚拟的“超级终端”。跨设备迁移的典型流程包括：设备发现、迁移触发、状态序列化、数据传输和状态恢复。整个过程由系统自动管理，开发者只需实现关键回调。设备发现：通过获取附近可用的设备列表。迁移触发：用户通过手势（如拖拽）或系统事件发起迁移。状态序列化：应用将当前状态（如 UI 状态、变量值）序列化为可传输的数据。数据传输。
HarmonyOS在智能电视中的语音交互
2509_93942966的博客
11-25 403
经过一周使用，语音助手能记住你的偏好——说“继续看上次那个”，它会准确恢复你三天前观看的纪录片进度。在任意界面——无论是设置菜单、影视播放还是应用列表，只需说出“查看上个月的历史记录”、“清除缓存”或“切换到游戏模式”，系统都能精准响应。笔者测试时，直接说“把亮度调到40%，色温调暖”，电视瞬间完成两项设置调整，这种效率是传统遥控器操作无法比拟的。一边看电视学做菜，手上沾满面粉时直接说“电视，暂停”、“滚动到食材清单”，整个学习过程无需触碰任何设备。一、 从“语音遥控”到“场景管家”的跨越。
HarmonyOS在智能穿戴中的健康监测
2509_93947720的博客
11-25 174
当我深夜加班时，手表持续监测我的心率变异性，手机同步记录我的工作强度，平板则生成综合健康报告——这一切都在HarmonyOS的调度下静默完成。记得有次登山，我的手表监测到血氧饱和度下降，立即通过手机的网络连接，向预设的紧急联系人发送了提醒。这种设备间的智能协作，让健康监测突破了单设备的能力边界。未来，随着更多医疗机构的接入和算法模型的优化，这种基于HarmonyOS的健康监测有望成为每个人身边的私人健康顾问。在这个过程中，我们看到的不仅是一个操作系统的进化，更是智能科技与健康生活方式的深度交融。
@ohos.arkui.observer (无感监听)使用场景
03-21
`@ohos.arkui.observer` 是鸿蒙（HarmonyOS NEXT）ArkUI框架中用于 **无侵入式监听UI组件行为** 的模块，主要支持以下功能： 1. **全局事件监听** 无需修改组件代码即可监听点击事件（如`onClick`和手势事件）、...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值