HarmonyOS鸿蒙Next中跳出UI外比如我单例内的变量怎么设置成响应式变量呢

HarmonyOS鸿蒙Next中跳出UI外比如我单例内的变量怎么设置成响应式变量呢

我的需求是一个单例或控制器内的数据改变，页面也要跟着改变，A页面和B页面共同从单例内获取一个数组列表，B改变了顺序返回上一级A页面的时候A也要保持B改变后的顺序，比如两个页面都是通过private sportCtrl: SportController = SportController.getInstance();然后页面是通过ForEach(this.sportCtrl.selectedCards, (item: GridItemType, index: number)去渲染数据，我要怎么做才能让他自动重新渲染呢，还是说只能通过监听的方式

export class SportController {
  private static _instance: SportController | null = null;

  public selectedSports: string[] = [];
  public unSelectedSports: string[] = [];

  // 私有构造函数，防止外部实例化
  private constructor() {
    this.init();
  }

  // 获取单例实例
  public static getInstance(): SportController {
    if (!this._instance) {
      this._instance = new SportController();
    }
    return this._instance;
  }

  // 初始化运动数据
  private init(): void {
    this.selectedSports = ['running', 'cycling', 'swimming'];
    this.unSelectedSports = ['basketball', 'football', 'tennis'];
  }

  // 重置数据
  public reset(): void {
    this.selectedSports = [];
    this.unSelectedSports = [];
  }
}

更多关于HarmonyOS鸿蒙Next中跳出UI外比如我单例内的变量怎么设置成响应式变量呢的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

如果A、B是两个独立的页面，就需要使用监听的方式进行页面重新渲染：

更多关于HarmonyOS鸿蒙Next中跳出UI外比如我单例内的变量怎么设置成响应式变量呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如果你用过redux和vuex这类全局状态管理框架，那么可以选择官方出的 基于StateStore的全局状态管理 。

如果你还是想使用自己的单例，那可以在页面显示的时候，重新将单例的一些值，赋值给页面的状态变量。

比如：

// 组件
.onVisibleAreaChange([0, 1], (isExpanding: boolean, currentRatio: number) => {
  if (isExpanding && currentRatio > 0) {
    //重新赋值状态变量 
  }
})

// 或者 NavDestination 生命周期方法
.onShown(() => {
  //重新赋值状态变量 
})

在HarmonyOS Next中，要将单例内的变量设置为响应式变量，可以使用@Observed和@ObjectLink装饰器。首先用@Observed装饰单例类，然后在使用该变量的UI组件中用@ObjectLink标记变量。例如：

[@Observed](/user/Observed)
class Singleton {
  data: string = 'init'
}

const instance = new Singleton()

@Entry
@Component
struct MyComponent {
  [@ObjectLink](/user/ObjectLink) instanceData: Singleton

  build() {
    Text(this.instanceData.data)
  }
}

这样当单例中的data变化时，UI会自动更新。注意单例需用@Observed装饰，且需通过@ObjectLink引用。

在HarmonyOS Next中实现单例数据响应式更新，可以使用@Observed和@ObjectLink装饰器。修改你的代码示例如下：

  1. 首先创建可观察类：
[@Observed](/user/Observed)
class SportData {
  public selectedSports: string[] = [];
  public unSelectedSports: string[] = [];
}
  1. 修改控制器：
export class SportController {
  private static _instance: SportController | null = null;
  public sportData: SportData = new SportData();

  private constructor() {
    this.init();
  }

  public static getInstance(): SportController {
    if (!this._instance) {
      this._instance = new SportController();
    }
    return this._instance;
  }

  private init(): void {
    this.sportData.selectedSports = ['running', 'cycling', 'swimming'];
    this.sportData.unSelectedSports = ['basketball', 'football', 'tennis'];
  }
}
  1. 在页面组件中使用：
@Entry
@Component
struct MyPage {
  [@ObjectLink](/user/ObjectLink) sportData: SportData = SportController.getInstance().sportData;

  build() {
    Column() {
      ForEach(this.sportData.selectedSports, (item: string) => {
        Text(item)
      })
    }
  }
}

这样当控制器中的数据变化时，页面会自动更新。注意修改数据时需要确保引用变更（如使用数组的slice()或解构赋值），才能触发响应式更新。

回到顶部