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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470186.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ue5 umg学习(一)

学习视频资料链接 2、UI编辑界面_哔哩哔哩_bilibili 打开ue5虚幻引擎 创建新的文件夹UI,在这个文件夹里写东西 点击停靠在布局中 双击点进UI文件夹 右键用户界面,选择控件蓝图 创建控件蓝图,重命名,在名称后面加一个_BP1代表是…

PYNQ 框架 - 中断(INTR)驱动

目录 1. 简介 2. 分析 2.1 Block Design 2.2 AXI Timer 2.2.1 IP 基本信息 2.2.2 IP 地址空间 2.2.3 级联模式 2.2.4 生成/捕获模式 2.3 AXI Interrupt 2.3.1 IP 基本信息 2.3.2 IP 地址空间 2.3.3 相关概念 2.3.4 参数配置 2.3.5 中断确认寄存器 3. PYNQ 代码 …

RAG综述:《A Comprehensive Survey of Retrieval-Augmented Generation (RAG)》

来源于《A Comprehensive Survey of Retrieval-Augmented Generation (RAG): Evolution, Current Landscape and Future Directions》 一、RAG所解决的问题 如何有效地从外部知识源检索相关信息,如何将这些信息无缝地融入到生成文本中,以及如何在保证生…

GitLab 如何跨版本升级?

本分分享 GitLab 跨版本升级的一些注意事项。 众所周知,GitLab 的升级必须要严格遵循升级路径,否则就会出现问题,导致升级失败。因此,在 GitLab 升级之前需要做好两件事情: 当前版本的确认升级路径的确认 极狐GitLa…

aws(学习笔记第十二课) 使用AWS的RDS-MySQL

aws(学习笔记第十二课) 使用AWS的RDS 学习内容: AWS的RDS-MySQL 1. 使用AWS的RDS 什么是RDS RDS就是Relation Database Service的缩写,是AWS提供的托管关系型数据库系统。让用户能够在 AWS Cloud 云中更轻松地设置、操作和扩展关系数据库。 数据库和we…

云原生-docker安装与基础操作

一、云原生 Docker 介绍 Docker 在云原生中的优势 二、docker的安装 三、docker的基础命令 1. docker pull(拉取镜像) 2. docker images(查看本地镜像) 3. docker run(创建并启动容器) 4. docker ps…

Spark 核心概念与宽窄依赖的详细解析

Spark 的介绍与搭建:从理论到实践_spark环境搭建-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交:本地与集群模式全解析-CSDN博客 Spark on YARN:Spark集群模式…

【css】html里面的图片宽度设为百分比,高度要与宽度一样

场景&#xff1a;展示图片列表的时候&#xff0c;原始图片宽高不一致。 外层div的宽度自适应&#xff0c;图片宽度不能固定数值&#xff0c;只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢&#xff1f; html代码 &#xff1a; <div cl…

c#使用COM接口设置excel单元格宽高匹配图片,如何计算?

c#使用COM接口设置excel单元格宽高如何换算 在实际工作中&#xff0c;经常需要在excel中插入图片。并设置单元格与图片对齐。但是excel单元格的宽度和高度使用不同的单位。单元格的宽度以字符宽度为单位&#xff0c;而高度以点为单位。如果按照实际值来设置&#xff0c;例如设…

RHCE web解析、dns配置、firewalld配置实验

RHCE web解析、dns配置、firewalld配置实验 实验一1.清理软件包2.安装软件包3.配置web服务查看默认测试页面报错讲解12 4.安装DNS解析需要的bind软件包5.修改网络配置&#xff0c;查错&#xff0c;修改权限 实验二配置文件haha.confnamed.confnamed.haha 实验一 1、学习方法 重…

JavaEE进阶----SpringMVC(三)---响应的获取

文章目录 1.cookie和session获取1.1servlet写法获取1.2spring获取cookie1.3传统方法获取session1.4sring获取session内容 2.访问静态页面3.一个项目部署多个服务4.responsebody的介绍5.返回html的片段6.不同相应content-type类型6.1text/html类型6.2application-json类型6.3 js…

Chromium 中MemoryMappedFile使用例子c++

文件映射基础介绍参考微软官网&#xff1a; 使用文件映射 - Win32 apps | Microsoft Learn 在文件中创建视图 - Win32 apps | Microsoft Learn 创建命名的共享内存 - Win32 apps | Microsoft Learn 使用大页面创建文件映射 - Win32 apps | Microsoft Learn 从文件句柄获取…

OpenHarmony4.1蓝牙芯片如何适配?触觉智能RK3568主板SBC3568演示

当打开蓝牙后没有反应时&#xff0c;需要排查蓝牙节点是否对应、固件是否加载成功&#xff0c;本文介绍开源鸿蒙OpenHarmony4.1系统下适配蓝牙的方法&#xff0c;触觉智能SBC3568主板演示 修改对应节点 开发板蓝牙硬件连接为UART1&#xff0c;修改对应的节点&#xff0c;路径为…

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…

生成 Django 中文文档 PDF 版

文章目录 背景克隆 Django 文档和翻译仓库配置 conf.py设置和同步翻译生成 .pot 文件运行 sphinx-intl update复制翻译文件 构建 PDF生成 tex 文件安装 MikTeX生成 PDF Sphinx 生成文档 背景 浏览看到一个帖子&#xff0c;有个评论说可以用 sphinx 构建一个 pdf&#xff0c;正…

mysql 实现分库分表之 --- 基于 MyCAT 的分片策略详解

引言 在我们日常工作的项目中&#xff0c;特别是面向 C 端用户的产品&#xff0c;随着业务量的逐步扩大&#xff0c;数据量也呈指数级增长。为了应对日益增长的数据库压力&#xff0c;数据库优化已成为项目中不可或缺的一环&#xff0c;而分库分表则是海量数据优化方案中的重要…

JUC-locks锁

JUC-locks锁 1、JUC-locks锁概述2、管程模型3、ReentrantLock可重入锁3.1 ReentrantLock源码3.2 Sync静态内部类3.3 NonfairSync非公平锁3.4 FairSync公平锁 如有侵权&#xff0c;请联系&#xff5e; 如有错误&#xff0c;也欢迎批评指正&#xff5e; 1、JUC-locks锁概述 java…

GEE 数据集——美国gNATSGO(网格化国家土壤调查地理数据库)完整覆盖了美国所有地区和岛屿领土的最佳可用土壤信息

目录 简介 代码 引用 网址推荐 知识星球 机器学习 gNATSGO&#xff08;网格化国家土壤调查地理数据库&#xff09; 简介 gNATSGO&#xff08;网格化国家土壤调查地理数据库&#xff09;数据库是一个综合数据库&#xff0c;完整覆盖了美国所有地区和岛屿领土的最佳可用土…

kettle开发-Day43-数据对比

前言&#xff1a; 随着数字化的深入&#xff0c;各种系统及烟囱的建立&#xff0c;各系统之间的架构和数据存储方式不同&#xff0c;导致做数据仓库或数据湖时发现&#xff0c;因自建的系统或者非标准化的系统经常存在物理删除而不是软删除。这就延伸出一个问题&#xff0c;经常…

哪款开放式耳机好用?5款实力出众的开放式耳机按头安利!

随着耳机市场日益火爆&#xff0c;许多品牌与款式不断涌现。但是&#xff0c;不少劣质产品在核心性能上缺乏专业优化&#xff0c;且选用低质材料&#xff0c;在音质还原度和佩戴舒适性等关键方面存在明显短板&#xff0c;导致性能欠佳&#xff0c;聆听体验不佳&#xff0c;还可…