arkUI：遍历数据数组动态渲染（forEach）
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%");
}
}
}
2.5.2 源码1运行效果
3.结语
因为最近用到了forEach，由想起了二维数组的内容，于是将两者结合编写了本文。用以往后的回顾和查询。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！
4.定位日期
2024-11-11；
23:54；