使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新

使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新

HarmonyOS
2024-07-05 17:33:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
jshyb

在实际应用开发中对于二维数组或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。要满足需求需要使用@Observed/@ObjectLink装饰器。

//(1)对象使用@Observed装饰器    
@Observed
export class Score {
  score: number = 0
  constructor(score: number) {
    this.score = score
  }
}
@Component
export struct ScoreItemView {
//(2)在自定义组件中使用@ObjectLink装饰器修饰需要动态改变的对象
  @ObjectLink score: Score

  build() {
    Row() {
      Text(this.score.score + "")
        .textAlign(TextAlign.Center)
        .fontSize(20)
        .margin(10)
        .layoutWeight(1)
    }.width("100%")
  }
}

@Entry
@Component
struct Index {
  @State scores: Score[] = [new Score(1), new Score(1), new Score(1)]

  aboutToAppear(): void {
  }

  build() {
    Column() {
      List() {
        ForEach(this.scores, (e: Score) => {
          ListItem() {
            ScoreItemView({score:e})
          }
        })
      }
      Button("+1").onClick(()=>{
        this.scores[0].score++//点击动态改变score的值
      })
    }.height("100%")
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}
分享
微博
QQ
微信
回复
2024-07-06 10:31:50
相关问题
@State 修饰变量改变,界面不刷新
1561浏览 • 1回复 待解决
修改ForEach使用数据对象UI刷新
1815浏览 • 1回复 待解决
ForEach数组发生改变UI刷新
591浏览 • 1回复 待解决
json 如何转换成自定义业务类对象
803浏览 • 1回复 待解决