arkUI：遍历数据数组动态渲染（forEach）

1 主要内容说明
2 相关内容
- 2.1 ForEach 的基本语法
- 2.2 简单遍历数组
- 2.2 多维数组遍历
- 2.4 使用唯一键
- 2.5 源码1的相关说明
- - 2.5.1 源码1 （遍历数据数组动态渲染）
  - 2.5.2 源码1运行效果
3.结语
4.定位日期

1 主要内容说明

在 ArkUI 中，ForEach 是用于遍历数据数组并动态渲染 UI 组件的一种方法。它类似于 JavaScript 中的 Array.forEach，但在 UI 框架中，它有特定的要求来确保每个渲染项都有唯一标识，以便在组件更新时保持高效、准确的渲染。通过 ForEach 方法，可以高效地遍历数据并动态生成 UI 项目，非常适合用于列表、网格等多项数据的展示。

2 相关内容

2.1 ForEach 的基本语法

ForEach(
  dataArray,       // 需要遍历的数据数组
  (item) => {      // 回调函数：每个遍历项的处理逻辑
    // 渲染逻辑
  },
  (key) => {       // 唯一键生成函数（可选）：返回每个项的唯一键值
    // 键值生成逻辑
  }
)

dataArray
---------- 需要遍历的数据，通常是一个数组。
回调函数 (item) => {...}
---------- 每次遍历的当前项。可以使用该回调函数中的 item 渲染每一项内容。
唯一键生成函数 (key) => {...}
---------- 这是可选参数，但建议使用。用于为每个渲染项生成唯一的键值。
---------- 生成的键可以是字符串或数值类型，以保证在 ForEach 渲染的每个组件项中都是唯一的。

2.2 简单遍历数组

ForEach(
  ["苹果", "香蕉", "菠萝"], // 数据数组
  (item) => {                // 遍历项
    Text(item);              // 渲染每一项为文本
  }
);

2.2 多维数组遍历

可以嵌套 ForEach 以处理多维数组，例如二维数组。以下示例展示了如何遍历一个二维数组

const fruits = [
  ["苹果1号", "苹果2号"],
  ["香蕉1号", "香蕉2号"],
];

ForEach(
  fruits,
  (subArray) => {           // 每个 subArray 是一个子数组
    ForEach(
      subArray,
      (fruit) => {
        Text(fruit);
      }
    );
  }
);

2.4 使用唯一键

为了避免重复的键，推荐使用第三个参数生成唯一键。以下示例展示了如何基于元素值生成唯一键

ForEach(
  fruits,
  (subArray) => {
    ForEach(
      subArray,
      (fruit) => {
        Text(fruit);
      },
      (fruit) => fruit  // 使用 fruit 字符串本身作为唯一键
    );
  }
);

当数据变动时，ForEach 会根据唯一键来判断是否需要重新渲染特定项。如果没有唯一键，可能会出现渲染错误或性能问题。对于复杂结构或大量数据，确保键的唯一性可以提高渲染效率，避免多余的 UI 刷新。

2.5 源码1的相关说明

源码1定义了一个名为 PageForEach 的组件，在该组件中使用了三组 Flex 布局，每组 Flex 布局内通过 ForEach 方法遍历并渲染 arr 数组中的数据。arr 是一个二维字符串数组，包含不同水果的编号信息。

ForEach 循环：
---------- 每个 ForEach 循环内都嵌套了两层遍历：
---------- 第一层遍历 arr 的行（每种水果的编号列表）。
---------- 第二层遍历每个水果编号，并将其渲染成 Text 文本。
---------- 在第二个和第三个 Flex 布局的 ForEach 中，指定了唯一键生成函数以防止渲染重复项。
---------- 第三个flex布局中，设置了一个叫“自命名键”的键，因为只有一个键，所以forEach只会输出第一个元素的内容，第一层数组会进行一次循环，每次第二层数组只会根据“自命名键”单个键输出第一个元素的内容。第一层数组是有多个二层数组的。

2.5.1 源码1 （遍历数据数组动态渲染）

@Entry
@Component
struct PageForEach {
  // 定义一个二维数组，保存不同种类的水果名称
  @State arr: string[][] = [
    ["苹果1号", "苹果2号", "苹果1号", "苹果4号"],
    ["香蕉1号", "香蕉2号", "香蕉1号", "香蕉4号"],
    ["菠萝1号", "菠萝2号", "菠萝1号", "菠萝4号"],
    ["西瓜1号", "西瓜2号", "西瓜1号", "西瓜4号"],
    ["椰子1号", "椰子2号", "椰子1号", "椰子4号"],
  ];

  // 页面构建方法
  build() {
    Column() {
      // 第一个 Flex 布局，宽度设置为 25%
      Flex({
        wrap: FlexWrap.Wrap,
      }) {
        ForEach(
          this.arr,
          (item1: string[]) => {
            ForEach(
              item1,
              (item2: string) => {
                // 将数组中的每个字符串显示为文本
                Text(item2)
                  .width("25%")  // 设置每个文本的宽度为 25%
                  .textAlign(TextAlign.Center)  // 文本居中对齐
              }
            );
          }
        );
      }
      .width("100%")  // Flex 布局宽度占满整个容器
      .backgroundColor("#ffecec00")  // 背景色
      .margin("5%");  // 外边距

      // 第二个 Flex 布局，宽度设置为 33%
      Flex({
        wrap: FlexWrap.Wrap,
      }) {
        ForEach(
          this.arr,
          (item1: string[]) => {
            ForEach(
              item1,
              (item2: string) => {
                Text(item2)
                  .width("33%")  // 设置每个文本的宽度为 33%
                  .textAlign(TextAlign.Center)
              },
              (item3: string) => {
                // 每个 item 的唯一键
                return item3;
              }
            );
          }
        );
      }
      .width("100%")
      .backgroundColor("#ff11d92f")
      .margin("5%");

      // 第三个 Flex 布局，使用自定义的键
      Flex({
        wrap: FlexWrap.Wrap,
      }) {
        ForEach(
          this.arr,
          (item1: string[]) => {
            ForEach(
              item1,
              (item2: string) => {
                Text(item2)
                  .width("33%")
                  .textAlign(TextAlign.Center)
              },
              (item3: string) => {
                // 设置自定义的键值 "自命名键"（注意：所有元素使用相同键可能会影响性能）
                return "自命名键";
              }
            );
          }
        );
      }
      .width("100%")
      .backgroundColor("#ffec5e5e")
      .margin("5%");
    }
  }
}