当前位置: 首页 > news >正文

鸿蒙4.0开发笔记之ArkTS语法基础之条件渲染和循环渲染的使用(十五)

文章目录

    • 一、条件渲染(if)
    • 二、循环渲染(ForEach)

一、条件渲染(if)

1、定义
正如其他语言中的if…else…语句,ArkTS提供了渲染控制的能力,条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。
语法结构为:if(条件表达式/布尔值){ ... }else{ ... }

2、使用规则

(1)if、else if后跟随的条件语句可以使用状态变量。
(2)条件渲染语句在涉及到组件的父子关系时是“透明”的,当父组件和子组件之间存在一个或多个if语句时,必须遵守父组件关于子组件使用的规则。
(3)允许在容器组件内使用,通过条件渲染语句构建不同的子组件。
(4)每个分支内部的构建函数必须遵循构建函数的规则,并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。

3、更新机制
当条件语句使用状态变量时且if、else if后跟随的状态判断中使用的状态变量值变化时,条件渲染语句会进行更新,更新步骤如下:

  • 评估if和else if的状态判断条件,如果分支没有变化,请无需执行以下步骤。如果分支有变化,则执行2、3步骤:
  • 删除此前构建的所有子组件。
  • 执行新分支的构造函数,将获取到的组件添加到if父容器中。如果缺少适用的else分支,则不构建任何内容。

二、循环渲染(ForEach)

1、定义
ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用,作用就是***遍历每一个数据并用Text呈现在UI界面上。***语法结构如下:

ForEach(//数据源,为Array类型的数组。arr: Array,//组件生成函数itemGenerator: (item: any, index?: number) => void,//键值生成函数keyGenerator?: (item: any, index?: number): string => string
)

简答来说共有3个参数,第一个参数为需要遍历的数组,第二个参数为对每个遍历元素进行操作的函数,第三个参数为返回的每一个元素索引(唯一值,不能重复)。
详细参数介绍参考HarmonyOS的ArkTS语法官方文档:ForEach:循环渲染

2、键值生成规则

在ForEach循环渲染过程中,系统会为每个数组元素生成一个唯一且持久的键值,用于标识对应的组件。当这个键值变化时,ArkUI框架将视为该数组元素已被替换或修改,并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数,这是一个函数,开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数,则ArkUI框架会使用默认的键值生成函数

3、ForEach案例一:遍历数组并依次呈现

@Entry
@Component
struct Index {@State message: string = '循环渲染'//创建一个景色数组@State scenery: Array<string> = ['江上','清风','山间','明月','造物者']build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Divider()//使用ForEach渲染:遍历每一个数据并用Text呈现在UI界面上//第一个参数为需要遍历的数组,第二参数为对每个遍历元素进行操作的函数,第三参数为返回的每一个元素索引(唯一值)ForEach(this.scenery,(item1)=>{Text(item1).fontSize(30).fontStyle(FontStyle.Italic)},(item2)=>{return item2})}.width('100%')}.height('100%')}
}

01
4、ForEach案例二:遍历Object对象并依次呈现元素内容

@Entry
@Component
struct Index {@State message: string = '循环渲染'//创建一个对象数组@State obj:object[] = [{id:'001',name:'江上',age:16},{id:'002',name:'明月',age:25},{id:'003',name:'造物者',age:35}]build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Divider()//使用ForEach渲染:遍历每一个数据并用Text呈现在UI界面上//第一个参数为需要遍历的数组,第二参数为对每个遍历元素进行操作的函数,第三参数为返回的每一个元素索引(唯一值)//此处总共遍历3个项目,每一个项目下面都有三个元素:id,name,ageForEach(this.obj,(item1)=>{Text(`${item1.id}=> ${item1.name}=> ${item1.age} `).fontSize(30).fontStyle(FontStyle.Italic)},(item2)=>{return item2.id//错误示范:return item2})}.width('100%')}.height('100%')}
}

02

相关文章:

鸿蒙4.0开发笔记之ArkTS语法基础之条件渲染和循环渲染的使用(十五)

文章目录 一、条件渲染&#xff08;if&#xff09;二、循环渲染&#xff08;ForEach&#xff09; 一、条件渲染&#xff08;if&#xff09; 1、定义 正如其他语言中的if…else…语句&#xff0c;ArkTS提供了渲染控制的能力&#xff0c;条件渲染可根据应用的不同状态&#xff0…...

电子设备电路分析(2)-----高速激光脉冲探测器

今天来介绍一个高速激光脉冲探测器&#xff0c;能够快速探测高速激光脉冲&#xff0c;该装置的独特性在于能够分辨上升时间在纳秒量级的脉冲。 光电二极管 高速激光脉冲探测器的核心是一个PIN二极管&#xff0c;也就是光电二极管。光电二极管是一种将光转换为电流的半导体器件…...

WordPress(9)宝塔配置Redis

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、宝塔安装Redis2、安装好先关闭Redis1、Redis密码默认是没有的二、安装php、Redis扩展1.启动Redis三.WordPress 安装Redis1.安装Redis插件2.启动Redis前言 提示:这里可以添加本文要记录的…...

【Qt之QSqlRelationalTableModel】描述及使用

描述 QSqlRelationalDelegate链接: https://blog.csdn.net/MrHHHHHH/article/details/134690139 QSqlRelationalTableModel类为单个数据库表提供了一个可编辑的数据模型&#xff0c;并支持外键。 QSqlRelationalTableModel的行为类似于QSqlTableModel&#xff0c;但允许将列设…...

【Openstack Train安装】四、MariaDB/RabbitMQ 安装

本章介绍了MariaDB/RabbitMQ的安装步骤&#xff0c;MariaDB/RabbitMQ仅需要在控制节点安装。 在安装MariaDB/RabbitMQ前&#xff0c;请确保您按照以下教程进行了相关配置&#xff1a; 【Openstack Train安装】一、虚拟机创建 【Openstack Train安装】二、NTP安装 【Opensta…...

工业级路由器在智能交通系统(ITS)中的创新应用

智能交通系统&#xff08;ITS&#xff09;作为一种先进的交通管理与控制系统&#xff0c;旨在提高交通运输系统的效率、安全性和便捷性。随着科技的不断发展&#xff0c;智能交通系统已经成为城市交通管理的重要组成部分。而工业级路由器作为一种可靠的网络通信设备&#xff0c…...

React立即更新DOM

正常情况下&#xff0c;react会等待set完毕后再进行页面渲染&#xff0c;所以在set时无法拿到更新后的dom import { useRef, useState } from "react"export default () > {const div useRef(null)const [count, setCount] useState(0)const btnClick () >…...

[JavaScript前端开发及实例教程]计算器井字棋游戏的实现

计算器&#xff08;网页内实现效果&#xff09; HTML部分 <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>My Calculator&l…...

数据结构 / 队列 / 循环队列 / 结构体定义和创建

1. 结构体定义 //head.h#ifndef __QUEUE_HEAD_H__ #define __QUEUE_HEAD_H__#include <string.h> #include <stdlib.h> #include <stdio.h>#define MAXSIZE 5 //循环队列最多元素个数typedef char datatype; //数据元素类型typedef struct {datatype data[M…...

Java零基础——Redis篇

1.【熟悉】NoSQL的简介 1.1 什么是NoSQL NoSQL 是 Not Only SQL 的缩写&#xff0c;意即"不仅仅是SQL"的意思&#xff0c;泛指非关系型的数据库。强调Key-Value Stores和文档数据库的优点。 NoSQL产品是传统关系型数据库的功能阉割版本&#xff0c;通过减少用不到或…...

分支和循环

通常来说&#xff0c;C语言是结构化的程序设计语言&#xff0c;这里的结构包括顺序结构、选择结构、循环结构&#xff0c;C语言能够实现这三种结构&#xff0c;如果我们仔细分析&#xff0c;我们日常生活中所见的事情都可以拆分为这三种结构或者它们的组合。 下面我会仔细讲解我…...

MyBatis-xml版本

MyBatis 是一款优秀的持久层框架 MyBatis中文网https://mybatis.net.cn/ 添加依赖 <dependencies><!--mysql驱动--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47<…...

在eclipse中安装python插件:PyDev

在eclipse中安装插件PyDev&#xff0c;就可以在eclipse中开发python了。 PyDev的官网&#xff1a;https://www.pydev.org/ 不过可以直接在eclipse中用Marketplace安装&#xff08;备注&#xff1a;有可能一次安装不成功&#xff0c;是因为下载太慢了&#xff0c;多试几次&…...

25、pytest的测试报告插件allure

allure简介 在这里&#xff0c;你将找到使用allure创建、定制和理解测试报告所需的一切。开始让你的测试沟通更清晰&#xff0c;更有影响力。 Allure Report是一个实用程序&#xff0c;它处理由兼容的测试框架收集的测试结果并生成HTML报告。 安装allure 1、确保安装了Java…...

从零开始学习 JavaScript APl(七):实例解析关于京东案例头部案例和放大镜效果!

大家好关于JS APl 知识点已经全部总结了&#xff0c;第七部部分全部都是案例部分呢&#xff01;&#xff01;&#xff08;素材的可以去百度网盘去下载&#xff01;&#xff01;&#xff01;&#xff09; 目录 前言 一、个人实战文档 放大镜效果 思路分析&#xff1a; 关于其它…...

使用Pytoch实现Opencv warpAffine方法

随着深度学习的不断发展&#xff0c;GPU/NPU的算力也越来越强&#xff0c;对于一些传统CV计算也希望能够直接在GPU/NPU上进行&#xff0c;例如Opencv的warpAffine方法。Opencv的warpAffine的功能主要是做仿射变换&#xff0c;如果不了解仿射变换的请自行了解。由于Pytorch的图像…...

Hello World

世界上最著名的程序 from fastapi import FastAPIapp FastAPI()app.get("/") async def root():return {"message": "Hello World"}app.get("/hello/{name}") async def say_hello(name: str):return {"message": f"…...

【Python】Python读Excel文件生成xml文件

目录 ​前言 正文 1.Python基础学习 2.Python读取Excel表格 2.1安装xlrd模块 2.2使用介绍 2.2.1常用单元格中的数据类型 2.2.2 导入模块 2.2.3打开Excel文件读取数据 2.2.4常用函数 2.2.5代码测试 2.2.6 Python操作Excel官方网址 3.Python创建xml文件 3.1 xml语法…...

c++--类型行为控制

1.c的类 1.1.c的类关键点 c类型的关键点在于类存在继承。在此基础上&#xff0c;类存在构造&#xff0c;赋值&#xff0c;析构三类通用的关键行为。 类型提供了构造函数&#xff0c;赋值运算符&#xff0c;析构函数来让我们控制三类通用行为的具体表现。 为了清楚的说明类的构…...

笔记64:Bahdanau 注意力

本地笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\3.循环神经网络\第10章&#xff1a;动手学深度学习~注意力机制 a a a a a a a a a a a...

2026杭州本地GEO优化公司排名,优质机构一站式推荐

AI 搜索时代&#xff0c;不少杭州企业踩过这样的坑&#xff1a;花大价钱找服务商做 GEO 优化&#xff0c;每天产出大量文章&#xff0c;结果在豆包、DeepSeek 等 AI 大模型里搜不到品牌信息&#xff0c;询盘没涨、获客成本反倒飙升。GEO 优化从来不是 “堆文章”&#xff0c;而…...

为什么你的ElevenLabs马拉雅拉姆文输出失真?5步诊断法+3个预处理Python脚本立即修复

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs马拉雅拉姆文输出失真的根本成因 马拉雅拉姆语&#xff08;Malayalam&#xff09;作为印度喀拉拉邦的官方语言&#xff0c;拥有高度复杂的音节结构、连字规则&#xff08;conjunct consonant…...

Playnite完整指南:高效统一你的跨平台游戏库管理体验

Playnite完整指南&#xff1a;高效统一你的跨平台游戏库管理体验 【免费下载链接】Playnite Video game library manager with support for wide range of 3rd party libraries and game emulation support, providing one unified interface for your games. 项目地址: http…...

树莓派BlueZ源码编译安装与蓝牙协议栈深度配置指南

1. 项目概述与背景 如果你手头有一块树莓派&#xff0c;并且想用它来玩点物联网或者智能硬件项目&#xff0c;蓝牙功能几乎是绕不开的一环。无论是连接一个BLE温湿度传感器读取数据&#xff0c;还是控制一个蓝牙音箱&#xff0c;底层都需要一个稳定、功能完整的蓝牙协议栈来支…...

stm32 FOC从学习开发(七)SVPWM算法MATLAB仿真进阶:从模型搭建到代码生成

1. SVPWM算法仿真与代码生成全流程 搞电机控制的朋友都知道&#xff0c;SVPWM&#xff08;空间矢量脉宽调制&#xff09;是FOC&#xff08;磁场定向控制&#xff09;的核心算法之一。前几期我们聊过Clark变换、Park变换&#xff0c;也讲过SVPWM的基本原理&#xff0c;今天咱们就…...

从MHC到MCC:PIC32项目迁移实战指南与问题排查

1. 项目概述&#xff1a;从MHC到MCC的迁移之路如果你是一位长期使用Microchip PIC32系列微控制器的嵌入式开发者&#xff0c;那么“MPLAB Harmony配置器&#xff08;MHC&#xff09;”这个名字你一定不陌生。它曾经是Harmony框架下图形化配置工具的核心&#xff0c;帮助我们快速…...

个人代码问题记录

内容全部来自网上搜集&#xff0c;防止再次遇到同样问题找不到地方参考了&#xff0c;遇到问题解决了就更新 MATLAB 1&#xff0c;求逆问题&#xff0c;奇异 使用函数xlsqminnorm(A,b)或伪逆xpinv(A)*b 矩阵求逆若出现“矩阵接近奇异值&#xff0c;或者缩放错误“怎么办 2…...

利用 Taotoken 统一 API 为内部低代码平台集成 AI 能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 利用 Taotoken 统一 API 为内部低代码平台集成 AI 能力 为内部低代码平台引入 AI 能力&#xff0c;正成为提升平台自动化和智能化水…...

从0到1搭建AI心理健康预警系统:我是如何用BERT+BiLSTM捕捉情绪拐点的

一、 痛点&#xff1a;为什么通用大模型干不了这活&#xff1f;首先声明&#xff0c;我们不是大模型黑。但在心理预警这个场景下&#xff0c;直接用GPT-4或者文心一言的API&#xff0c;有三个致命伤&#xff1a;成本炸裂&#xff1a;​ 每天几万条的学生/员工咨询日志&#xff…...

天地协同:卫星如何成为5G物联网“组合拳”的关键一环

未来的物联网连接格局并非“卫星取代地面”或“地面压制卫星”的零和博弈&#xff0c;而是一个基于场景需求、优势互补的“组合式”解决方案。卫星连接的价值在于补充和增强更广泛的连接组合&#xff0c;与5G等地面蜂窝网络协同工作&#xff0c;共同构建一张无处不在、经济高效…...