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

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

HarmonyOS
3天前
浏览
收藏 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
微信
回复
2天前
相关问题
修改ForEach使用数据对象UI刷新
218浏览 • 1回复 待解决
json 如何转换成自定义业务类对象
378浏览 • 1回复 待解决
自定义弹窗变量如何传递给页面
984浏览 • 1回复 待解决
如何判断对象某个interface实现
389浏览 • 1回复 待解决
readonly修饰数组无法获取数组元素
538浏览 • 1回复 待解决
如何判断一个对象是否在对象数组
766浏览 • 1回复 待解决
自定义装饰器使用问题
226浏览 • 0回复 待解决
Tabs组件自定义导航栏UI问题
462浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
872浏览 • 1回复 待解决