HarmonyOS 循环渲染语句ForEach

下面 我们来说循环渲染
循环渲染真的最多的还是数组类型数据

我们编写代码如下

@Entry
@Component
struct Index {

  @State StringArr:string[] = ["小猫猫哦","小狗狗","大狗熊"];

  build() {
    Row() {
      Column() {
        Text(this.StringArr[0])
        Text(this.StringArr[1])
        Text(this.StringArr[2])
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们声明了一个字符串类型的数组 StringArr
然后 我们用Text组件分别展示了它的三个下标

但是 这样写不但看着很捞 而且 开发构成中 很多接口返回的数组 我们并没有办法确认他有多少个下标

我们可以这样写

@Entry
@Component
struct Index {

  @State StringArr:string[] = ["小猫猫哦","小狗狗","大狗熊"];

  build() {
    Row() {
      Column() {
        ForEach(
          this.StringArr,
          (item,index)=>{
            Text(item+" 元素下标为"+index)
          }
        )
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们声明一个 ForEach 循环函数 里面其实有三个参数 我们先说两个

第一个是 你要遍历那个数组 我们传入 this.StringArr
第二个参数是一个回调函数 返回值 第一个为 item 就是当前遍历的下标内容 然后 第二个参数 index 可以拿到当前内容的下标值
然后 我们用 Text 输出当前的内容和下标值
运行结果如下

也是没有任何问题

第三个蚕食为 键值生成器函数

简单说 返回一个字符串 做本次元素渲染的唯一标识
注意 第三个函数 返回的字符串值 每次循环必须不同 因为它是循环的唯一标识