鸿蒙 @ohos.arkui.observer (无感监听)
在鸿蒙开发中，@ohos.arkui.observer 模块提供了一种强大的无感监听机制，允许开发者监听组件的状态变化、滚动事件、页面切换等事件。这些功能对于实现复杂的交互逻辑和优化性能非常有帮助。本文将详细介绍 @ohos.arkui.observer 模块的使用方法，并提供一些实际代码示例。
一、监听 NavDestination 组件的状态变化
@ohos.arkui.observer 模块提供了监听 NavDestination 组件状态变化的功能。通过 observer.on('navDestinationUpdate') 方法，可以监听 NavDestination 组件的状态变化。
示例代码
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();@BuilderPageBuilder(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%')}
}
二、监听滚动事件
@ohos.arkui.observer 模块还提供了监听滚动事件的功能。通过 observer.on('scrollEvent') 方法，可以监听滚动事件的开始和结束。
示例代码
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%')}
}
三、监听页面切换事件
@ohos.arkui.observer 模块还提供了监听页面切换事件的功能。通过 observer.on('navDestinationSwitch') 方法，可以监听 Navigation 的页面切换事件。
示例代码
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();@BuilderPageBuilder(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%')}
}
四、监听绘制指令下发
@ohos.arkui.observer 模块还提供了监听绘制指令下发的功能。通过 observer.on('willDraw') 方法，可以监听每一帧绘制指令的下发。
示例代码
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);})}}
}
五、总结
@ohos.arkui.observer 模块为鸿蒙开发提供了强大的无感监听功能，支持监听 NavDestination 组件的状态变化、滚动事件、页面切换事件以及绘制指令下发。通过这些功能，开发者可以实现复杂的交互逻辑和优化性能。希望本文能帮助你更好地理解和使用 @ohos.arkui.observer 模块。如果有任何问题或需要进一步讨论，欢迎随时交流！