鸿蒙NEXT开发：ArkUI框架UI界面-@ohos.arkui.observer (无感监听)
往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
[*] 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
@ohos.arkui.observer (无感监听)
提供UI组件行为变化的无感监听能力。
阐明
从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
导入模块
import { uiObserver as observer } from '@kit.ArkUI'; NavDestinationState
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组件隐藏。 NavDestinationInfo
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。 NavigationInfo12+
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是变化后的屏幕像素密度。 NavDestinationSwitchInfo12+
Navigation组件页面切换的信息。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填阐明contextUIAbilityContext | UIContext是触发页面切换的Navigation对应的上下文信息。fromNavDestinationInfo | NavBar是页面切换的源页面。toNavDestinationInfo | NavBar是页面切换的目的页面。operationNavigationOperation是页面切换操作范例。 NavDestinationSwitchObserverOptions12+
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组件的状态。indexnumber是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组件状态。 示例：
// Index.ets
// 演示 observer.on('navDestinationUpdate', callback)
// observer.off('navDestinationUpdate', callback)
import { uiObserver as observer } from '@kit.ArkUI';
@Component
struct PageOne {
build() {
NavDestination() {
Text("pageOne")
}.title("pageOne")
}
}
@Entry
@Component
struct Index {
private stack: NavPathStack = new NavPathStack();
@Builder
PageBuilder(name: string) {
PageOne()
}
aboutToAppear() {
observer.on('navDestinationUpdate', (info) => {
console.info('NavDestination state update', JSON.stringify(info));
});
}
aboutToDisappear() {
observer.off('navDestinationUpdate');
}
build() {
Column() {
Navigation(this.stack) {
Button("push").onClick(() => {
this.stack.pushPath({ name: "pageOne" });
})
}
.title("Navigation")
.navDestination(this.PageBuilder)
}
.width('100%')
.height('100%')
}
} 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.on('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组件状态。 示例：
// Index.ets
// 演示 observer.on('navDestinationUpdate', navigationId, callback)
// observer.off('navDestinationUpdate', navigationId, callback)
import { uiObserver as observer } from '@kit.ArkUI';
@Component
struct PageOne {
build() {
NavDestination() {
Text("pageOne")
}.title("pageOne")
}
}
@Entry
@Component
struct Index {
private stack: NavPathStack = new NavPathStack();
@Builder
PageBuilder(name: string) {
PageOne()
}
aboutToAppear() {
observer.on('navDestinationUpdate', { navigationId: "testId" }, (info) => {
console.info('NavDestination state update', JSON.stringify(info));
});
}
aboutToDisappear() {
observer.off('navDestinationUpdate', { navigationId: "testId" });
}
build() {
Column() {
Navigation(this.stack) {
Button("push").onClick(() => {
this.stack.pushPath({ name: "pageOne" });
})
}
.id("testId")
.title("Navigation")
.navDestination(this.PageBuilder)
}
.width('100%')
.height('100%')
}
} 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.on('navDestinationUpdate')示例。
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[] =
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(' 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(' 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('注册屏幕像素密度变化监听')
.margin({ bottom: 10 })
.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('注册绘制指令下发监听')
.margin({ bottom: 10 })
.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('注册布局完成监听')
.margin({ bottom: 10 })
.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>否需要被注销的回调函数。 https://i-blog.csdnimg.cn/direct/15ac2b59ab5c4731b627927d56a75698.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]