HarmonyOSNEXT—应用通信之EventHub

HarmonyOSNEXT—应用通信之EventHub

序言

在应用开发过程中，我们对于应用中数据和响应事件的传递，都会选择不同的通信方式，在选择这些通信方式时，我们需要考虑不同通信方式下我们的实现逻辑，以及是否满足我们的需求，本文主要介绍，应用基于同一个上下文的通信方式

一、基于Ability的通信方式——EventHub

简介：

EventHub通过Ability实例的上下文对象来获取，主要用于同一Ability下的组件间通信，属于一种轻量级的通信方式，主要用于无复杂序列化开销的场景。

使用方式：

EventHub是基于订阅和发布的方式来触发事件响应的：

// 订阅事件
getContext().eventHub.on("click" , (param: string) => {
  console.log("Index eventhub message: " +  param);
  this.message = param
})

// 发布事件
getContext().eventHub.emit('click', "TestEventHubPage")

// 取消订阅
getContext().eventHub.off("click")

注意事项：取消订阅时，如果不传入callback，将取消所有订阅当前事件的回调

二、项目示例：

通过不同弹框的点击功能，在同一个页面中通过eventHub来传递弹框中的事件，主要作用是，多个页面的不同类型弹框，可以进行统一处理

// index.ets
import { TestDialog1 } from './component/TestDialog1';
import { TestDialog2 } from './component/TestDialog2';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  dialogController1: CustomDialogController = new CustomDialogController({
    builder: TestDialog1(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })

  dialogController2: CustomDialogController = new CustomDialogController({
    builder: TestDialog2(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })

  aboutToAppear(): void {
    getContext().eventHub.on("clickEvent" , (id: number, param: string) => {
      console.log("Index eventhub message: " +  param);
      switch (id) {
        case 0:
          if (param != "close") {
            this.message = param
          } else {
            this.dialogController1.close()
          }
          break;
        case 1:
          if (param != "close") {
            this.message = param
          } else {
            this.dialogController2.close()
          }
          break;
      }
    })
  }

  build() {
    Column({space: 20}) {
      Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).margin({top: 50})
      Button("第一个弹框")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.dialogController1.open()
        })
      Button("第二个弹框")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.dialogController2.open()
        })
    }
    .height('100%')
    .width('100%')
  }
}

// TestDialog1.ets
import { common } from "@kit.AbilityKit"

@CustomDialog
export struct TestDialog1 {
  controller: CustomDialogController
  eventHub: common.EventHub = getContext().eventHub
  // 间距
  @State column_space: number = 35

  build() {
    Column({ space: this.column_space }) {
      Text("dialogText1").fontSize(25)
      Button("点击1").onClick(() => {
        this.emitData("第一个dialog点击触发")
      })
      Button("关闭dialog1").onClick(() => {
        this.emitData("close")
      })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }
  /**
   * 发送dialog事件
   */
  private emitData(param: string) {
    this.eventHub.emit('clickEvent', 0, param)
  }
}

// TestDialog2.ets
import { common } from "@kit.AbilityKit"

@CustomDialog
export struct TestDialog2 {
  controller?: CustomDialogController
  eventHub: common.EventHub = getContext().eventHub
  // 间距
  @State column_space: number = 35

  build() {
    Column({ space: this.column_space }) {
      Text("dialogText2").fontSize(25)
      Button("点击2").onClick(() => {
        this.emitData("第二个dialog点击触发")
      })
      Button("关闭dialog2").onClick(() => {
        this.emitData("close")
      })
    }
    .id('deleteAlertDialog_Column')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }
  /**
   * 发送dialog事件
   */
  private emitData(param: string) {
    this.eventHub.emit('clickEvent', 1, param)
  }
}