在HarmonyOS NEXT开发中@ObjectLink到底怎么用?

在HarmonyOS NEXT开发中@ObjectLink到底怎么用?这个页面是数据是一个ClassA数组记作classA[],ClassA里面又有一个ClassB数组,大概是下面这样的:

@Observed 
export class ClassA { 
  a: number; 
  datas: ClassB[]; 
} 
 
@Observed 
export class ClassB { 
  b: number; 
  c: number; 
} 
 
@Entry 
@Component 
struct Index { 
  @State pageDatas: ClassA[] = [] 
 
  build() { 
 
 
    Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { 
 
 
      ForEach(this.pageDatas, (page_item: ClassA, page_index: number) => { 
 
 
        TabContent() { 
          PageView({ 
            page_item: page_item, 
          }) 
        } 
 
      } 
    } 
 
    @Component 
 
    export struct PageView { 
      @ObjectLink page_item: ClassA; 
 
      build() { 
 
        Column() { 
 
          Text(this.page_item.a + "") 
            .onClick((e: ClickEvent) => { 
 
              弹出Dialog, 
              选择a值 
              this.page_item.a = selecta 
            } 
 
          ForEach(this.page_item.datas, (item: ClassB, index: number) => { 
 
            ItemView({ 
              page_item: this.page_item 
              item: item 
            }) 
 
          }, (item: ClassB) => JSON.stringify(item)) 
 
        } 
 
      } 
    } 
 
    @ 
    Component 
 
    export struct ItemView { 
      @ObjectLink page_item: ClassA; 
      @ObjectLink item: ClassB; 
 
      build() { 
        Row() { 
 
 
          Button("加1") 
            .onClick((e: ClickEvent) => { 
              this.item.b = this.item.b + 1 
            } 
 
          TextInput({ text: this.item.b === 0 ? '' : this.item.b.toString() }) 
            .onChange((value: string) => { 
              if (value === null || value === undefined || value === '') { 
                this.item.b = 0 
              } else { 
                this.item.b = parseInt(value); 
              } 
            } 
 
 
          Text(this.page_item.a * item.b * item.c + "m³") 
        } 
      } 
    }

想要的效果是:
1、在Index页面的每个page里面点击对应弹出Dialog,选择a值,能够改变Text(this. page_item.a item .b item.c+“m³”)显示的值
2、在TextInput中输入对应的值也能够改变Text(this. page_item.a item .b item.c+“m³”)显示的值
3、Button点击后也能够改变TextInput中显示的值,并且也能够改变Text(this. page_item.a item .b item.c+“m³”)显示的值

阅读 774
avatarAI BotBETA
在HarmonyOS NEXT开发中,`@ObjectLink` 用于在组件之间建立数据绑定关系,使得子组件可以直接访问和修改父组件传递的数据对象。在你的示例中,`@ObjectLink` 用于 `PageView` 和 `ItemView` 组件,以便它们能够访问和修改 `ClassA` 和 `ClassB` 实例中的数据。

### 使用方法解释:

1. **在 `PageView` 组件中**:
   - 使用 `@ObjectLink page_item: ClassA;` 来绑定父组件 `Index` 传递的 `page_item` 对象。
   - 当 `Text` 组件的 `onClick` 事件触发时,通过弹出 Dialog 选择新的 `a` 值,并更新 `this.page_item.a`。由于 `page_item` 是通过 `@ObjectLink` 绑定的,所以更新会反映到所有引用该对象的组件中。

2. **在 `ItemView` 组件中**:
   - 使用 `@ObjectLink page_item: ClassA;` 和 `@ObjectLink item: ClassB;` 来分别绑定父组件 `PageView` 传递的 `page_item` 和 `item` 对象。
   - `Button` 的 `onClick` 事件增加 `this.item.b` 的值。
   - `TextInput` 的 `onChange` 事件根据输入的值更新 `this.item.b`。
   - `Text` 组件显示计算后的值 `this.page_item.a * this.item.b * this.item.c + "m³"`,由于 `page_item` 和 `item` 都是通过 `@ObjectLink` 绑定的,所以任何更新都会实时反映到 `Text` 组件的显示中。

### 注意事项:
- 确保 `ClassA` 和 `ClassB` 类被 `@Observed` 修饰,这样 HarmonyOS 框架才能检测到它们的属性变化并触发相应的更新。
- 使用 `@ObjectLink` 时,确保传递的数据对象是响应式的,即它们的变化能够被框架捕获并触发视图更新。
- 在 `onClick` 和 `onChange` 事件处理函数中,确保对输入值进行适当的验证和转换,以避免运行时错误。

通过上述方法,你可以实现你想要的效果:在 Index 页面的每个 page 里面点击对应弹出 Dialog 选择 a 值、在 TextInput 中输入对应的值、Button 点击后都能够改变 `Text` 组件显示的值。
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进