HarmonyOS 鸿蒙Next 如何实现根据数组元素对象属性的变化同步更新UI

发布于 1周前 作者 bupafengyu 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何实现根据数组元素对象属性的变化同步更新UI

@Observed
class WindowStatus {
  viewType: number = 0;
}

@Component
export struct TestPage {
  @State windowStatusArr: WindowStatus[] = [
    new WindowStatus(),
    new WindowStatus(),
    new WindowStatus(),
    new WindowStatus()
  ]

  build() {
    Column() {
      Button('change view type')
        .onClick(() => {
          this.windowStatusArr[0].viewType = 1;
        })
      if (this.windowStatusArr[0].viewType == 0) {
        Text('ViewType 0')
      } else if (this.windowStatusArr[0].viewType == 1) {
        Text('ViewType 1')
      }
    }
  }
}

在以上代码中，点击按钮后更改viewType，但是UI并没有刷新，请问要便捷的实现该业务场景，应该如何实现呢？


更多关于HarmonyOS 鸿蒙Next 如何实现根据数组元素对象属性的变化同步更新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以试试下面的代码：

// xxx.ets
[@Observed](/user/Observed)
class WindowStatus {
  viewType: number = 0;
}

@Component
export struct TestPage {
@State windowStatusArr: WindowStatus[] = [
new WindowStatus(),
new WindowStatus(),
new WindowStatus(),
new WindowStatus()
]


build() {
Column() {
Button(‘change view type’)
.onClick(() => {
this.windowStatusArr[0].viewType = 1;
})
Child({status: this.windowStatusArr[0]})
}
}
}


@Component
struct Child {
@ObjectLink status: WindowStatus;
build() {
Row() {
if (this.status.viewType == 0) {
Text(‘ViewType 0’)
} else if (this.status.viewType == 1) {
Text(‘ViewType 1’)
}
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

把需要显示的部分抽到自定义组件中，然后通过 @ObjectLink 状态管理器来进行状态同步。

更多关于HarmonyOS 鸿蒙Next 如何实现根据数组元素对象属性的变化同步更新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 实现根据数组元素对象属性的变化同步更新UI，可以通过以下方式实现：

  1. 数据绑定：利用鸿蒙系统的数据绑定机制，将UI组件与数据源进行绑定。当数据源（数组中的对象属性）发生变化时，UI组件会自动更新。

  2. 观察者模式：为数组中的对象属性设置观察者，当属性值变化时，通知UI组件进行更新。这可以通过鸿蒙系统提供的响应式编程框架实现。

  3. 事件驱动：当数组中的对象属性发生变化时，触发一个自定义事件。UI组件监听这个事件，并在事件发生时进行更新。

  4. 状态管理：使用全局状态管理工具（如鸿蒙系统提供的状态管理库），将数组对象属性的状态集中管理。UI组件订阅状态变化，当状态更新时，UI组件会重新渲染。

  5. 自定义组件：如果UI组件需要频繁更新，可以封装成自定义组件，在组件内部处理数据变化与UI更新的逻辑。

实现时，需要根据具体场景选择合适的方法。例如，对于简单的数据变化，数据绑定和观察者模式已经足够；对于复杂的状态管理，可以考虑使用状态管理库或自定义组件。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部