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

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

HarmonyOS
2024-07-05 17:33:34
1018浏览
收藏 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)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
分享
微博
QQ
微信
回复
2024-07-06 10:31:50


相关问题
HarmonyOS @State可以修饰对象数组
718浏览 • 1回复 待解决
@State 修饰变量改变,界面不刷新
2607浏览 • 1回复 待解决
HarmonyOS @state可以修饰对象数组
684浏览 • 1回复 待解决
ArkTS如何自定义数组对象排序规则
1228浏览 • 1回复 待解决
修改ForEach使用数据对象UI刷新
3051浏览 • 1回复 待解决
HarmonyOS 数组对象排序
1224浏览 • 1回复 待解决
ForEach数组发生改变UI刷新
1715浏览 • 1回复 待解决