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