鸿蒙ArkTs开发,后台触发数据变化后更新页面 UI事件

文章目录

  • 1、定义全局事件管理器
  • 2、触发事件
  • 3、页面监听事件

如果你的需求是后台触发状态变化后更新页面 UI,而不是通过页面跳转传递数据,可以通过以下方式实现:
通过自定义事件管理器,后台触发事件后通知页面更新 UI。

1、定义全局事件管理器

// EventManager.ts
type EventHandler = (data: any) => void;

class EventManager {
  private events: Map<string, EventHandler[]> = new Map();

  // 订阅事件
  on(eventName: string, handler: EventHandler) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, []);
    }
    this.events.get(eventName)?.push(handler);
  }

  // 取消订阅
  off(eventName: string, handler?: EventHandler) {
    if (handler) {
      const handlers = this.events.get(eventName)?.filter(h => h !== handler);
      if (handlers) {
        this.events.set(eventName, handlers);
      }
    } else {
      this.events.delete(eventName);
    }
  }

  // 发布事件
  emit(eventName: string, data?: any) {
    const handlers = this.events.get(eventName);
    if (handlers) {
      handlers.forEach(handler => handler(data));
    }
  }
}

export const eventManager = new EventManager();

2、触发事件

// 后台逻辑(如 Service 或定时任务)
import { eventManager } from './EventManager';

eventManager.emit('updateUI', { message: 'New message from background!' });

3、页面监听事件

// Page.ets
import { eventManager } from './EventManager';

@Entry
@Component
struct Page {
  @State message: string = 'Waiting for message...';

  aboutToAppear() {
    // 订阅事件
    eventManager.on('updateUI', (data) => {
      this.message = data.message; // 更新状态
    });
  }

  aboutToDisappear() {
    // 取消订阅
    eventManager.off('updateUI');
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .margin(20);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

你可能感兴趣的:(ui,鸿蒙)