HarmonyOS ArkTS实现JSON数组动态渲染

HarmonyCat

已于 2024-03-11 14:32:43 修改

阅读量2.5k

点赞数 5

分类专栏： OpenHarmony / 星闪文章标签： harmonyos json 华为

于 2023-07-18 22:32:06 首次发布

本文链接：https://blog.youkuaiyun.com/hmxm6/article/details/131797844

版权

OpenHarmony / 星闪专栏收录该内容

11 篇文章

订阅专栏

文章介绍了如何在HarmonyOS平台上创建一个数据对象类来映射JSON数组，并通过组件进行动态渲染。示例中展示了如何构建PeopleInfo类，处理从服务器获取的JSON数据，并在页面上使用PeopleCard组件展示。此外，还提供了在页面中修改显示数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HarmonyOS实现JSON数组动态渲染

链接：链接

创建一个数据对象类

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

[
    {
        "id": 1,
        "name": "虹喵小仙女",
        "age": 19,
        "color": "#f0f0f0"
    }
]

创建的对象就是

@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{
        // ...
    }
  }
}

创建组件

@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")
  }
}

在页面中显示

@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%')
  }
}