HarmonyOS 5.0 应用开发——Ability 与 Page 数据传递

作者：高心星

2024-12-06
江苏
本文字数：3390 字
阅读完需：约 11 分钟

【高心星出品】

Ability 与 Page 数据传递

基于当前的应用模型，可以通过以下几种方式来实现 UIAbility 组件与 UI 之间的数据同步。

使用 EventHub 进行数据通信：在基类 Context 中提供了 EventHub 对象，可以通过发布订阅方式来实现事件的传递。在事件传递前，订阅者需要先进行订阅，当发布者发布事件时，订阅者将接收到事件并进行相应处理。
使用 AppStorage/LocalStorage 进行数据同步：ArkUI 提供了 AppStorage 和 LocalStorage 两种应用级别的状态管理方案，可用于实现应用级别和 UIAbility 级别的数据同步。

Page 向 Ability 传递数据

EventHub 为 UIAbility 组件提供了事件机制，使它们能够进行订阅、取消订阅和触发事件等数据通信能力。

在基类 Context 中，提供了 EventHub 对象，可用于在 UIAbility 组件实例内通信。使用 EventHub 实现 UIAbility 与 UI 之间的数据通信需要先获取 EventHub 对象，本章节将以此为例进行说明。

下面案例实现：页面点击按钮发送颜色给 ability，从而修改 ability 的窗口背景色。

EntryAbility 代码

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { window } from '@kit.ArkUI';
export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');    // 注册event_01事件监听    this.context.eventHub.on('event_01',(data:Record<string,Object>)=>{       // 获取页面传递的数据  设置窗口背景颜色       this.context.windowStage.getMainWindowSync().setWindowBackgroundColor(data!.color as string)    })  }
  onDestroy(): void {    //关闭监听    this.context.eventHub.off('event_01')    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  }
  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/eventpage', (err) => {      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.');    });  }
  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');  }}

复制代码

eventpage 页面代码

import { common } from '@kit.AbilityKit';
@Entry@Componentstruct Eventpage {  @State message: string = 'Hello World';  private context:common.UIAbilityContext=getContext(this) as common.UIAbilityContext  build() {   Column(){     Button('向EntryAbility发送数据更改背景颜色')       .width('60%')       .onClick(()=>{         // 提交数据         this.context.eventHub.emit('event_01',{color:'#ff0000'})       })   }   .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)  }}

复制代码

Ability 向 Page 传递数据

ArkUI 提供了 AppStorage 和 LocalStorage 两种应用级别的状态管理方案，可用于实现应用级别和 UIAbility 级别的数据同步。使用这些方案可以方便地管理应用状态，提高应用性能和用户体验。其中，AppStorage 是一个全局的状态管理器，适用于多个 UIAbility 共享同一状态数据的情况；而 LocalStorage 则是一个局部的状态管理器，适用于单个 UIAbility 内部使用的状态数据。

下面一个案例：在 ability 获取窗口可布局界面的宽度和高度（窗口高度-通知栏高度）

EntryAbility 代码

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { AppStorageV2, window } from '@kit.ArkUI';
export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');    // 注册event_01事件监听    this.context.eventHub.on('event_01',(data:Record<string,Object>)=>{       // 获取页面传递的数据  设置窗口背景颜色       this.context.windowStage.getMainWindowSync().setWindowBackgroundColor(data!.color as string)    })


  }
  onDestroy(): void {    //关闭监听    this.context.eventHub.off('event_01')    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  }
  onWindowStageCreate(windowStage: window.WindowStage): void {    // Main window is created, set main page for this ability    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');    // 获取窗口可布局的宽度和高度    let win=windowStage.getMainWindowSync()    // 获得通知栏区域    let notifybar=win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect    let width=win.getWindowProperties().windowRect.width    let height=win.getWindowProperties().windowRect.height-notifybar.height    // 保存到appstorage中    AppStorage.setOrCreate('width', width);    AppStorage.setOrCreate('height', height);    windowStage.loadContent('pages/eventpage', (err) => {      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.');    });  }
  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');  }}

复制代码

eventpage 页面代码

import { common } from '@kit.AbilityKit';
@Entry@Componentstruct Eventpage {  @State message: string = 'Hello World';  // 获取ability传过来的宽度和高度 单位是px  @StorageProp('width') wd: number = 0  @StorageProp('height') ht: number = 0  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  build() {    Column() {      Button('向EntryAbility发送数据更改背景颜色')        .width('60%')        .onClick(() => {          // 提交数据          this.context.eventHub.emit('event_01', { color: '#ff0000' })        })      Column() {        Text('宽度为： ' + this.wd).width('100%').fontSize(20)        Text('高度为： ' + this.ht).width('100%').fontSize(20)      }      // 设置组件的宽和高      .width(this.wd / 2 + 'px')      .height(this.ht / 3 + 'px')      .border({ width: 3, color: Color.Red, style: BorderStyle.Dashed })      .justifyContent(FlexAlign.Center)      .margin(20)    }    .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)  }}

复制代码

发布于: 刚刚阅读数: 6

原文链接:【http://xie.infoq.cn/article/2e889e6e8c15530a7e2f4cd30】。文章转载请联系作者。

高心星

关注

天将降大任于斯人也，必先苦其心志。 2024-10-17 加入

华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。

发布

暂无评论

创作场景

HarmonyOS 5.0 应用开发——Ability 与 Page 数据传递

Ability 与 Page 数据传递

Page 向 Ability 传递数据

Ability 向 Page 传递数据

高心星

评论