HarmonyOS ArkTS实现JSON数组动态渲染原创

虹喵小仙女

发布于 2023-7-19 19:31

浏览

1收藏

原文链接：链接

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.