HarmonyOS 鸿蒙Next 如何动态绑定数组对象

HarmonyOS 鸿蒙Next 如何动态绑定数组对象 如图，这是一个自定义组件
其中，layer由父组件传进来，是一个数组对象，其中的layer.tileImage是一个数组

cke_500.png

我的想法是将layer.tileImage赋给被监测的this.img，但是我发现在父组件修改layer.tileImage时，页面并不会动态更新


更多关于HarmonyOS 鸿蒙Next 如何动态绑定数组对象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

你父组件的layer或者layer.tileImage定义@Observed了吗？

更多关于HarmonyOS 鸿蒙Next 如何动态绑定数组对象的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有的，这些对象都用了@observed，

父子组件的代码都贴一下，

大佬，我发了，您帮忙看看，感谢！

你的子组件的img数组的赋值放在aboutToAppear里了？这个只在组件即将出现时回调，后续你的父组件的layer改变的时候已经不走aboutToAppear回调了吧

期待HarmonyOS能继续优化多屏协同功能，让跨设备体验更加完美。

是的，我想的是一开始就把layer.tileImage赋给被监测的img数组，后续layer.tileImag改变img数组也应该发生改变，

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

但是结果并没有该变，我也没有办法在每次layer.tileImage改变时又对img赋一次值，

所以你就要在父组件给个值A，当父组件的layer改变时同事改变A的值，子组件是根据父组件A的值进行UI调整。

希望HarmonyOS能继续加强在安全性方面的研发，保护用户的隐私和数据安全。

cke_268.png

这是父组件的代码，

mapView：由@observed修饰的类，包含一个layerList数组，该数组里面存储多个layer（@observed修饰）

我在父组件添加了一个事件，触发后会修改layer对象里面的tileImage数组

开发环境：deveco studio3.1     API9     Stage模型

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

我这里的修改只改变了数组长度，就是往里面push一个元素，但是页面并没能动态刷新

在HarmonyOS鸿蒙Next中，动态绑定数组对象可以通过使用@State和@Link装饰器来实现。@State用于声明一个状态变量，当状态变量发生变化时，UI会自动更新。@Link用于在父子组件之间共享状态。

假设你有一个数组对象items，你希望在UI中动态绑定并显示这个数组。首先，你需要在组件的build方法中使用ForEach来遍历数组，并为每个元素创建相应的UI组件。

@Entry
@Component
struct MyComponent {
  @State private items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  build() {
    Column() {
      ForEach(this.items, (item: string, index: number) => {
        Text(item)
          .fontSize(20)
          .margin(10)
      })
    }
  }
}

在这个例子中，items数组被声明为@State变量，ForEach用于遍历数组并生成Text组件。当items数组发生变化时，UI会自动更新。

如果你需要在子组件中修改父组件的数组，可以使用@Link装饰器来共享状态。

@Component
struct ChildComponent {
  @Link items: string[];

  build() {
    Column() {
      Button('Add Item')
        .onClick(() => {
          this.items.push('New Item');
        })
    }
  }
}

@Entry
@Component
struct ParentComponent {
  @State private items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  build() {
    Column() {
      ChildComponent({ items: $items })
      ForEach(this.items, (item: string, index: number) => {
        Text(item)
          .fontSize(20)
          .margin(10)
      })
    }
  }
}

在这个例子中，ChildComponent通过@Link装饰器与ParentComponent共享items数组。当ChildComponent中的按钮被点击时，items数组会被修改，并且UI会自动更新。

通过这种方式，你可以在HarmonyOS鸿蒙Next中实现数组对象的动态绑定和更新。

回到顶部