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;