ArkUI - 循环控制（ForEach）

[cnwutianhao]

一、语法

ForEach(
  arr: Array,
  (item: any, index?: number) => {

  }, 
  keyGenerator?: (item: any, index?: number): string => {

  }
)

1. arr: Array

   要遍历的数据数组

   比如我们有一组2024春节档新片票房的数据：

   private items = [
     { name: '热辣滚烫', image: '1.', box_office: '13.41亿' },
     { name: '飞驰人生2', image: '', box_office: '11.90亿' },
     { name: '熊出没·逆转时空', image: '', box_office: '7.26亿' },
     { name: '第二十条', image: '', box_office: '5.50亿' },
     { name: '我们一起摇太阳', image: '', box_office: '5835.6万' }
   ]
   

   这个 item 就可以作为第一个参数 arr 传进来，ForEach 就会去遍历这个数组，拿到里面的每一个电影数据。

2. (item: any, index?: number) => { }

   页面组件生成的函数

   item 是数组中的元素，由于数组中元素的类型是不确定的，所以类型是 Any；
   index 是数组的角标，为可选参数。

3. keyGenerator?: (item: any, index?: number): string => { }

   键生成函数，为数组每一项生成一个唯一标示，组件是否重新渲染的判断标准

   假如我们以电影名称作为唯一标示，现在向这个数组中插入一条新的数据，在遍历的过程中，发现前面的N条数据的标示没有发生变化，因为名字没变，那这时候就不需要去重复渲染，只有最后插入的这条新数据，它的名字跟之前比是不存在的，是新的，这时候只需把这条新的渲染出来就可以了。这样就减少了不必要的渲染，提高了整个页面渲染效率。

二、示例代码

1. 首先自定义一个类 Item

   class Item {
     name: string
     image: ResourceStr
     box_office: string
   
     constructor(name: string, image: ResourceStr, box_office: string) {
       this.name = name
       this.image = image
       this.box_office = box_office
     }
   }
   

2. 在结构体 Index 里定义 items 成员变量，也就是电影的数组

   private items: Array<Item> = [
     { name: '热辣滚烫', image: $r('app.media.1'), box_office: '13.41亿' },
     { name: '飞驰人生2', image: $r('app.media.2'), box_office: '11.90亿' },
     { name: '熊出没·逆转时空', image: $r('app.media.3'), box_office: '7.26亿' },
     { name: '第二十条', image: $r('app.media.4'), box_office: '5.50亿' },
     { name: '我们一起摇太阳', image: $r('app.media.5'), box_office: '5835.6万' }
   ]
   

3. 使用 ForEach 循环遍历数组

   build() {
     Column({ space: 8 }) {
       ForEach(
         this.items,
         (item: Item) => {
           Row({ space: 8 }) {
             Image(item.image)
               .width(157)
               .height(220)
             Column() {
               Text(item.name)
                 .fontSize(20)
                 .fontWeight(FontWeight.Bold)
               Text(item.box_office)
                 .fontSize(18)
             }
             .height('100%')
             .alignItems(HorizontalAlign.Start)
           }
           .width('100%')
           .height(220)
         }
       )
     }
     .width('100%')
     .height('100%')
     .padding(8)
   }
   

4. 效果展示