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

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%");}}
}

2.5.2 源码1运行效果

3.结语

因为最近用到了forEach，由想起了二维数组的内容，于是将两者结合编写了本文。用以往后的回顾和查询。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-11；
23:54；