网站备案 需要什么,建设企业网站登录,金融网站建设,北京高端企业网站建设arkUI#xff1a;遍历数据数组动态渲染#xff08;forEach#xff09; 1 主要内容说明2 相关内容2.1 ForEach 的基本语法2.2 简单遍历数组2.2 多维数组遍历2.4 使用唯一键2.5 源码1的相关说明2.5.1 源码1 #xff08;遍历数据数组动态渲染#xff09;2.5.2 源码1运行效果 … 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
