HarmonyOS NEXT鸿蒙开发：ForEach循环渲染-马育民老师

# 介绍

[官方指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5 "官方指南")
[官方API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-rendering-control-foreach-V5 "官方API")

`ForEach` 接口，相当于 `for...of` 循环语句，用在 UI 界面中，对数组进行循环，并渲染在页面上

### 搭配

需要与容器组件配合使用，且接口返回的组件应当是允许包含在`ForEach` 父容器组件中的子组件。

### 应用场景

`ForEach` 内部是 `ListItem` 组件时，其父容器组件必须为 `List` 组件

# 接口

```
ForEach(arr,itemGenerator)
```

##### 参数

- arr：类型：`Array<Object>`，必填，数据源，为Array类型的数组。

- itemGenerator：类型：`(item: Object, index: number) => void`，必填，函数，为数组中的每个元素创建对应的组件

- item参数：arr数组中的数据项。

- index参数（可选）：arr数组中的数据项索引。

# 例子

[![](https://www.malaoshi.top/upload/0/0/1GW56vNfUl1.jpg)](https://www.malaoshi.top/upload/0/0/1GW56vNfUl1.jpg)

```

const SOUNDS:Array<Array<string>> = [
  ['声音1', 'a_muyu1.mp3'],
  ['声音2', 'a_muyu2.mp3'],
  ['声音3', 'a_muyu3.mp3'],
  ['声音4', 'a_muyu4.mp3'],
  ['声音5', 'a_muyu5.mp3'],
  ['声音6', 'a_muyu6.mp3'],
]

@Entry
@Component
struct ForEachDemo {
  @State message: string = 'Hello World';

build() {
    Column() {
      // 铃声列表
      List() {

ForEach(SOUNDS, (item:Array<string>,index:number)=>{
          ListItem() {
            Row() {
              Text(item[0])
                .fontSize(20)

Radio({
                value: item[1],
                group: "type"
              })
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .padding({
            top: 15,
            bottom: 15,
            left: 5
          })
        })
      }
      .width('90%')
      .height('100%')
      .divider({
        //设置分割线
        strokeWidth: 1,
        color: '#333',
        // startMargin: 10,
        // endMargin: 10
      })
      .scrollBar(BarState.On) // 显示滚动条
    }
    .height('100%')
    .width('100%')
  }
}
```

原文出处：https://malaoshi.top/show_1GW570S1SaU.html