HarmonyOS ArkTS实现JSON数组动态渲染_arkts json

HarmonyOS实现JSON数组动态渲染

链接：链接

创建一个数据对象类

此对象主要映射JSON数组数据，比如服务器传的数据是这样的

[
    {
        "id": 1,
        "name": "虹喵小仙女",
        "age": 19,
        "color": "#f0f0f0"
    }
]
1
2
3
4
5
6
7
8

创建的对象就是

@Observed
class PeopleInfo {
  public  id: number = ""
  public  name: string = ""
  public  age: number = ""
  public  color: string = ""

  constructor(data) {
    // 单个数据预处理
    let age = data["age"];
    if(age>18){
        this.id = data["id"]
        this.name = data["name"]
        this.color = data["color"]
    }else{
        // ...
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

创建组件

@Component
struct PeopleCard{
  @ObjectLink peopleInfo: PeopleInfo;

  build() {
    Row() {
      Text("名称："+this.peopleInfo.name).width("30%")
      Text(this.peopleInfo.age).width("50%")
      Text(this.peopleInfo.color).width("20%")
    }
    .width("100%")
    .height("60vp")
    .backgroundColor("#f0f0f0")
    .borderRadius("20vp")
    .padding("15vp")
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在页面中显示

@Entry
@Component
struct Index {
  
  @State peopleInfoArray: PeopleCard[] = []
    
  aboutToAppear(){
      let people = {
        "id": 1,
        "name": "虹喵小仙女",
        "age": 19,
        "color": "#f0f0f0"
    	};
      this.PeopleCard.push(people)
  }

  build() {
    Column(){
      Scroll(this.scrollerForScroll) {
        Column() {
          Row(){
            Button("修改第一个名字"){}.onClick(()=>{
				this.peopleInfoArray[0].name = "666";
            })
          }
          .width("100%")
          .height("30vp")
          .padding({left: "20vp"})

          List({ space: 10}) {
            ForEach(this.peopleInfoArray, (item,index) => {
              ListItem() {
                PeopleCard({tagInfo: this.peopleInfoArray[index]})
              }
              .width("90%")
              .margin({left:"5%"})
              .padding({left:"10vp",right:"10vp",top:"20vp",bottom:"20vp"})
            })
          }
          .width("100%")
          .height("100%")
          .edgeEffect(EdgeEffect.None)
        }
      }.width('100%').height('100%')
    }.width('100%').height('100%')
  }
}
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