ArkTS之循环渲染案例

 

 

/**
 * ArkTS之循环渲染
 */
@Component
struct MyChild {
  label:string

  build() {
    Text(this.label)
      .fontSize(30)
  }
}


@Entry
@Component
struct MyParent {
  @State
  my_array: Array<string> = ['one','two','three','four','five']

  build() {

    Column() {
      Button('点击修改第二个值')
        .fontSize(24)
        .fontColor(Color.Red)
        .onClick(()=>{
          this.my_array[1] = 'new_two'
        })

      Button('点击修改第三个值')
        .fontSize(24)
        .fontColor(Color.Red)
        .onClick(()=>{
          this.my_array[2] = 'new_three'
        })

      ForEach(this.my_array,(item:string, index:number)=>{
        MyChild({label:item})
          .margin({top:20})
      })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

 

 

来源B站公开视频：
华为大佬最新鸿蒙HarmonyOS4.0（鸿蒙4）开发应用从入门到实战视频教程