HarmonyOS ArkTS ForEach：循环渲染

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

ForEach(
  arr: Array,
  itemGenerator: (item: Array, index?: number) => void,
  keyGenerator?: (item: Array, index?: number): string => string
)

注意：实际开发中尽量不要使用全局变量,组件中使用全局变量不需要加this

let arr1: Array<string> = ['鸿蒙os', "flutter", `golang`]
let arr2: number[] = [1, 23, 45, 65]
//元组类型
let x: [string, number,boolean]=['this is str',12,false];
@Entry
@Component
struct ArrayPage {
  @State flag: boolean = true
  @State message: string = 'Hello World'
  arr3: string[] = ['鸿蒙os', "flutter", `golang`,"flutter", `php`,'ios']
  arr4: object[] = [
    {
      id: "1",
      title: "鸿蒙os",
      content: "鸿蒙os",
    },
    {
      id: "2",
      title: "flutter",
      content: "flutter",
    }
    ,
    {
      id: "3",
      title: "golang",
      content: "golang",
    }
  ]

  build() {
    Column(){
      Button("改变flag").onClick((event: ClickEvent) => {
        this.flag=!this.flag;
      }).margin({bottom:20})


      List({space:10}){  //Ctrl+点鼠标左键  看源代码
        if(this.flag){
          ListItem(){
            Text(`${x[0]}`)
              .fontSize(24)
              .width('100%')
              .height(60)
              .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
              .backgroundColor("blue")
              .borderRadius(20)
          }
        }

        ListItem(){
          Text(`${this.arr3[5]}`)
            .fontSize(24)
            .width('100%')
            .height(60)
            .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
            .backgroundColor("red")
            .borderRadius(20)
        }


        ForEach(this.arr3,(item,key)=>{
          ListItem(){
            Text(`${item}--${key}`)
              .fontSize(24)
              .width('100%')
              .height(60)
              .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
              .backgroundColor("#eee")
              .borderRadius(20)
          }
        })

        ForEach(arr2,(item,key)=>{
          ListItem(){
            Text(`${item}--${key}`)
              .fontSize(24)
              .width('100%')
              .height(60)
              .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
              .backgroundColor("#eee")
              .borderRadius(20)
          }
        },item=>item)

        ForEach(this.arr3,(item,key)=>{
          ListItem(){
            Text(`${item}--${key}`)
              .fontSize(24)
              .width('100%')
              .height(60)
              .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
              .backgroundColor("#eee")
              .borderRadius(20)
          }
        },(item)=>{
          return item
        })

        ForEach(this.arr4,(item,key)=>{
          ListItem(){
            Text(`${item.title}--id=${item.id}--key=${key}`)
              .fontSize(24)
              .width('100%')
              .height(60)
              .textAlign(TextAlign.Center)  //Ctrl+鼠标左键
              .backgroundColor("#eee")
              .borderRadius(20)
          }
        },item=>item)

      }
    }.height('100%')
    .width('100%')
    .padding(10)
  }
}