ForEach

The development framework provides ForEach to iterate arrays and create components for each array item. If a large number of elements are involved in ForEach, the page loading may become slow. For best possible results, you are advised to use LazyForEach instead. ForEach is defined as follows:

ForEach(
    arr: any[], // Array to be iterated
    itemGenerator: (item: any, index?: number) => void, // child component generator
    keyGenerator?: (item: any, index?: number) => string // (optional) Unique key generator, which is recommended.
)

ForEach

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

Table 1 Parameters

NOTE - ForEach must be used in container components.

• The generated child components are allowed in the parent container component of ForEach. The child component generator function can contain the if/else conditional statement, and the if/else conditional statement can contain ForEach.

• The call sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. Below is an example of incorrect usage: ts > ForEach(anArray, item => {Text(`${++counter}. item.label`)}) > > > Below is an example of correct usage: > > ts > ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), > item => Text(`${item.i}. item.data.label`), > item => item.data.id.toString()) >

Example

The following is an example of a simple-type array:

// xxx.ets
@Entry
@Component
struct MyComponent {
    @State arr: number[] = [10, 20, 30]
    build() {
        Column() {
            Button() {
                Text('Reverse Array')
            }.onClick(() => {
                this.arr.reverse()
            })

            ForEach(this.arr,                         // Parameter 1: array to be iterated
                    (item: number) => {               // Parameter 2: item generator
                        Text(`item value: ${item}`)
                        Divider()
                    },
                    (item: number) => item.toString() // Parameter 3: unique key generator, which is optional but recommended.
            )
        }
    }
}

The following is an example of a complex-type array:

// xxx.ets
class Month {
  year: number
  month: number
  days: Array<number>

  constructor(year, month, days) {
    this.year = year;
    this.month = month;
    this.days = days;
  }
}

@Entry
@Component
struct Calendar1 {
// simulate with 6 months
  @State calendar: Month[] = [
    new Month(2020, 1, [...Array(31).keys()]),
    new Month(2020, 2, [...Array(28).keys()]),
    new Month(2020, 3, [...Array(31).keys()]),
    new Month(2020, 4, [...Array(30).keys()]),
    new Month(2020, 5, [...Array(31).keys()]),
    new Month(2020, 6, [...Array(30).keys()]),
  ]

  build() {
    Column() {
      Button('next month')
        .onClick(() => {
          this.calendar.shift()
          this.calendar.push({
            year: 2020,
            month: 7,
            days: [...Array(31)
              .keys()]
          })
        })
      ForEach(this.calendar,
        (item: Month) => {
          Text('month:' + item.month)
            .fontSize(30)
            .padding(20)
          Grid() {
            ForEach(item.days,
              (day: number) => {
                GridItem() {
                  Text((day + 1).toString())
                    .fontSize(30)
                }
              },
              (day: number) => day.toString())
          }
          .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
          .rowsGap(20)
        },
        // field is used together with year and month as the unique ID of the month.
        (item: Month) => (item.year * 12 + item.month).toString())
    }
  }
}

你可能感兴趣的文章

开源鸿蒙 UI Development

开源鸿蒙 ArkUI Overview

开源鸿蒙 File Organization

开源鸿蒙 app.js

开源鸿蒙 “js” Tag

开源鸿蒙 Lifecycle

开源鸿蒙 Multi-Language Capability

开源鸿蒙 Resource Limitations and Access

开源鸿蒙 CSS

开源鸿蒙 HML