HarmonyOS 关于@State或@Link 修饰Array的应用

现有一个数据Bean类型如下：

export class TagBean { 
  title: string = "" 
  id: string = "" 
  is_choose: boolean = false 
}

用@State或@Link修饰该Bean的Array数组，如：@Link tagBeans: TagBean[]

目前发现一个问题，在List()中的ForEach(this.tagBeans)内写Text()，背景设置为：.backgroundColor($r(item.is_choose ? “颜色A” : “颜色B”))

在点击事件中使tagBeans[index].is_choose=true，无法实时更新UI状态

但如果使用额外的string对象去记录点击id，判断(this.chooseIds.indexOf(item.id) >= 0)，就可以实现实时更新UI。

HarmonyOS

Heiang

2024-11-28 09:09:34

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5

demo参考如下：

import util from '@ohos.util'; 
 
@Observed 
class TagBean { 
  key: string = util.generateRandomUUID(true); 
  name: string; 
  is_Choose: boolean; 
 
  constructor(name: string, is_choose: boolean) { 
    this.name = name; 
    this.is_Choose = is_choose; 
  } 
} 
 
@Component 
struct ViewListItem { 
  @ObjectLink tagBean: TagBean; 
 
  build() { 
    ListItem() { 
      Text(this.tagBean.name) 
        .width('100%') 
        .height(100) 
        .fontSize(16) 
        .textAlign(TextAlign.Center) 
        .borderRadius(10) 
        .backgroundColor(this.tagBean.is_Choose ? Color.White : Color.Red) 
    }.onClick(() => { 
      this.tagBean.is_Choose = !this.tagBean.is_Choose 
    }) 
  } 
} 
 
@Entry 
@Component 
struct ObservedDemo { 
  @State tagBeans: Array<TagBean> = [ 
    new TagBean('小红1', false), 
    new TagBean('小红2', false), 
    new TagBean('小红3', false), 
    new TagBean('小红4', false), 
    new TagBean('小红5', false), 
    new TagBean('小红6', false), 
    new TagBean('小红7', false), 
    new TagBean('小红8', false), 
    new TagBean('小红9', false), 
  ] 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.tagBeans, (item: TagBean) => { 
          ViewListItem({ tagBean: item }) 
        }, (item: TagBean) => item.key) 
      } 
      .listDirection(Axis.Vertical) 
      .friction(0.6) 
      .divider({ 
        strokeWidth: 2, 
        color: 0xFFFFFF, 
        startMargin: 20, 
        endMargin: 20 
      }) 
      .edgeEffect(EdgeEffect.Spring) 
      .width('90%') 
    } 
    .backgroundColor(Color.Black) 
    .width('100%') 
    .height('100%') 
  } 
}"

2024-11-28 15:37:03

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 关于@State或@Link 修饰Array的应用

订阅鸿蒙技术特刊，精选内容抢先看