HarmonyOS 如何当List中item中的元素变化时，引起布局刷新

可以使用@Observed装饰器和@ObjectLink装饰器进行搭配，当item的属性值发生改变时会触发UI渲染、引起布局更新，官网文档参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5

如果是在组件中无法使用@Observed装饰器和@ObjectLink，因为此时只能监听到list的第一层变化，所以只有当list的元素数量发生变化时才能触发UI刷新。可参考如下代码：

import { promptAction } from '@kit.ArkUI';
import { plainToClass, Type } from 'class-transformer';
import 'reflect-metadata';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State list: Person[] = [new Person('Peppa1', '12'), new Person('Peppa2', '12'), new Person('Peppa3', '12')]

  build() {
    Column({ space: 5 }) {
      Text(JSON.stringify(this.list))
        .width('100%')
        .textAlign(TextAlign.Center)

      List() {
        ForEach(this.list, (item: Person, index: number) => {

          ListItem() {
            // TestComp({ item: item })
            Column() {
              Text(item.name)
                .backgroundColor(Color.Red)
                .width('100%')
                .textAlign(TextAlign.Center)
                .onClick(() => {

                  item.name = Date.now().toString()
                  this.list[index] = item
                  let list2 = this.list
                  this.list = []
                  this.list = list2
                })
            }.justifyContent(FlexAlign.Center)

          }
        }, (item: Person) => JSON.stringify(item.name))
      }

      Button('删除一个数组元素').onClick(() => {

        this.list.pop()
        console.log(`数组内容：${JSON.stringify(this.list)}`)
      })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

@Observed
class Person {
  constructor(name: string, age: string) {
    this.name = name;
    this.age = age;
  }

  name: string
  age: string
}

@Component
struct TestComp {
  @ObjectLink @Watch('change2') item: Person
  @State @Watch('change') num: number = 0

  change() {
    promptAction.showToast({ message: `${JSON.stringify(this.num)}` })
  }

  change2() {
    console.log(`change2`)
  }

  build() {
    Column() {
      Text(JSON.stringify(this.num))
      Text(JSON.stringify(this.item))
      Text(this.item.name)
        .backgroundColor(Color.Red)
        .width('100%')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.item.name = Date.now().toString()
          this.num = this.num + 1
          console.log(`num: ${this.num}`);
          console.log(`item: ${JSON.stringify(this.item)}`);
        })
    }.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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.