UIAbility 与 UI 之间的通信_鸿蒙 uiability 与struct页面通信-CSDN博客

在鸿蒙（HarmonyOS）应用开发中，UIAbility 与 UI 之间的通信指的是应用逻辑层（由 UIAbility 组件承载）与用户界面层（由 ArkUI 页面承载）之间的数据传递、事件交互和状态同步机制。UIAbility 负责管理应用的生命周期和全局业务逻辑，而 UI 层专注于界面渲染和用户交互，二者通过特定方式实现协作。

案例 1：UI 触发事件，UIAbility 响应处理

场景：用户点击按钮提交表单，UIAbility 处理数据并返回结果。
实现步骤：

UI 层触发事件：通过按钮点击事件调用 postAction 方法。
UIAbility 响应逻辑：UIAbility 接收事件并处理业务（如网络请求）。
结果回传 UI：通过回调函数或全局状态更新 UI。

// UI 页面 (IndexPage.ets)
import router from '@ohos.router';

@Entry
@Component
struct IndexPage {
  // 通过 UIAbility 的 Context 获取 UIAbility 实例
  private context = getContext(this) as common.UIAbilityContext;

  build() {
    Column() {
      Button('提交订单')
        .onClick(() => {
          // 通过 UIAbility 的 EventHub 发送事件
          this.context.eventHub.emit('submitOrder', { productId: '123' });
        })
    }
  }
}

// UIAbility 类 (OrderAbility.ts)
import UIAbility from '@ohos.app.ability.UIAbility';

export default class OrderAbility extends UIAbility {
  onCreate() {
    // 监听 UI 层发送的事件
    this.context.eventHub.on('submitOrder', (data) => {
      // 处理业务逻辑（如调用订单接口）
      this.submitOrderToServer(data.productId);
    });
  }

  private submitOrderToServer(productId: string) {
    // 模拟网络请求
    setTimeout(() => {
      // 通过 EventHub 将结果返回给 UI
      this.context.eventHub.emit('orderResult', { code: 200 });
    }, 1000);
  }
}

案例 2：UIAbility 主动更新 UI 状态

场景：后台定时任务（如倒计时）更新界面显示。
实现方式：UIAbility 通过全局状态管理（如 AppStorage）修改数据，UI 层自动响应变化。

// UIAbility 中更新全局状态
import UIAbility from '@ohos.app.ability.UIAbility';
import AppStorage from '@ohos.app.storage';

export default class TimerAbility extends UIAbility {
  private timerId: number = 0;

  onCreate() {
    AppStorage.SetOrCreate<number>('countdown', 60);
    this.startCountdown();
  }

  private startCountdown() {
    this.timerId = setInterval(() => {
      const current = AppStorage.Get<number>('countdown') ?? 0;
      if (current > 0) {
        AppStorage.Set<number>('countdown', current - 1);
      } else {
        clearInterval(this.timerId);
      }
    }, 1000);
  }
}

// UI 页面绑定全局状态
@Entry
@Component
struct TimerPage {
  @StorageLink('countdown') countdown: number = 60;

  build() {
    Text(`剩余时间：${this.countdown}s`)
      .fontSize(30)
  }
}

案例 3：UI 跳转时传递参数给 UIAbility

场景：从列表页跳转到详情页，传递选中项的 ID。
实现方式：通过 want 参数在 UIAbility 中获取跳转参数，并处理路由逻辑。

// UI 页面触发跳转
@Entry
@Component
struct ListPage {
  private context = getContext(this) as common.UIAbilityContext;

  build() {
    List() {
      ListItem() {
        Text('商品详情').onClick(() => {
          // 通过 Want 参数传递数据
          router.pushUrl({
            url: 'pages/DetailPage',
            params: { productId: '456' }
          });
        })
      }
    }
  }
}

// UIAbility 中处理路由逻辑
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';

export default class DetailAbility extends UIAbility {
  onNewWant(want: Want) {
    const productId = want.parameters?.productId;
    if (productId) {
      // 根据 productId 加载详情数据
      this.loadProductDetail(productId);
    }
  }

  private loadProductDetail(productId: string) {
    // 模拟数据加载
  }
}