鸿蒙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,age
        ForEach(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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机服务器中了locked勒索病毒的正确处理流程,locked勒索病毒解密

随着网络技术在企业生产运营中的进行&#xff0c;越来越多的企业开始利用网络走向数字化办公模式&#xff0c;数字化办公是企业的较为智能与先进的办公系统&#xff0c;这要求企业在日常工作中要确保计算机系统的安全&#xff0c;以防网络安全威胁时间的产生。近期&#xff0c;…

Image Segmentation Using Deep Learning: A Survey

论文标题&#xff1a;Image Segmentation Using Deep Learning:A Survey作者&#xff1a;发表日期&#xff1a;阅读日期 &#xff1a;研究背景&#xff1a;scene understanding,medical image analysis, robotic perception, video surveillance, augmented reality, and image…

光伏系统方案设计的注意点

随着太阳能技术的日益发展&#xff0c;光伏系统已经成为一种重要的可再生能源解决方案。然而&#xff0c;设计一个高效、可靠的光伏系统需要考虑到许多因素。本文将探讨光伏系统方案设计的注意点&#xff0c;包括系统规模、地理位置、组件选择、系统布局和运维策略。 系统规模 …

服务器——单个显卡的CPU占用比达到100%,但GPU使用率为0(卡住了)的解决办法

一、现象&#xff1a; 二、解决办法 先输入 htop&#xff0c;进入任务管理器。然后找到对应进程&#xff0c;按F9&#xff0c;再按一下9。

CVE初探之漏洞反弹Shell(CVE-2019-6250)

概述 ZMQ(Zero Message Queue)是一种基于消息队列得多线程网络库&#xff0c;C编写&#xff0c;可以使得Socket编程更加简单高效。 该编号为CVE-2019-6250的远程执行漏洞&#xff0c;主要出现在ZMQ的核心引擎libzmq(4.2.x以及4.3.1之后的4.3.x)定义的ZMTP v2.0协议中。 这一…

etcd 与 Consul 的一致性读对比

本文分享和对比了 etcd 和 Consul 这两个存储的一致性读的实现。 作者&#xff1a;戴岳兵&#xff0c;爱可生研发中心工程师&#xff0c;负责项目的需求开发与维护工作。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。 本…

如何从eureka-server上进行服务发现,负载均衡远程调用服务

在spring cloud的maven的pom文件中添加eureka-client的依赖坐标 <!--eureka-client依赖--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependen…

Apache Kafka CVE-2023-25194(metasploit版)

Step1&#xff1a;用docker搭建环境 Step2&#xff1a;docker查看映射端口 Step3&#xff1a;访问特定端口&#xff0c;然后靶标应用。 Step4&#xff1a;用metasploit进行攻击&#xff1a; 首先&#xff0c;打开metasploit&#xff0c;然后查询需要攻击的板块&#xff0…

如何搭建软件测试环境?

关于如何搭建测试环境&#xff0c;也是面试会经常问到的一个问题&#xff0c;一般常见于一些创业公司&#xff0c;因为测试环境不够完善&#xff0c;可能会遇到搭建环境这个问题。 一般来说&#xff0c;测试环境搭建都属于运维的工作范畴&#xff0c;但是可能有些创业公司就没有…

103.进程概述

目录 1.并行和并发 区别&#xff1a; 2.PCB 3.进程状态 4. 进程命令 从严格意义上来讲&#xff0c;程序和进程是两个不同的概念&#xff0c;他们的状态&#xff0c;占用的系统资源都是不同的。 程序&#xff1a;程序是一种静态实体&#xff0c;是存储在计算机存储介质上的…

Python通过 psd-tools 解析 PSD 文件

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com PSD&#xff08;Photoshop Document&#xff09;是Adobe Photoshop软件中使用的图像文件格式&#xff0c;包含图层、通道、蒙版等信息。在Python中&#xff0c;我们可以使用 psd-tools 库来解析和处理PSD文件。本…

开发者的福音:TinyVue 组件库文档大优化!类型更详细,描述更清晰!

你好&#xff0c;我是 Kagol。 前言 从今年2月份开源以来&#xff0c;有不少朋友给我们 TinyVue 组件库提了文档优化的建议&#xff0c;这些建议都非常中肯&#xff0c;我们也在持续对文档进行优化&#xff0c;并且从中总结出了大家对于文档优化的一些共性问题&#xff0c;形…

YOLOv8改进 | TripletAttention三重注意力机制(附代码+机制原理+添加教程)

一、本文介绍 本文给大家带来的改进是Triplet Attention三重注意力机制。这个机制&#xff0c;它通过三个不同的视角来分析输入的数据&#xff0c;就好比三个人从不同的角度来观察同一幅画&#xff0c;然后共同决定哪些部分最值得注意。三重注意力机制的主要思想是在网络中引入…

云上守沪 | 云轴科技ZStack成功实践精选(上海)

为打造国际数字之都&#xff0c;上海发布数字经济发展“十四五”规划&#xff0c;围绕数字新产业、数据新要素、数字新基建、智能新终端等重点领域&#xff0c;加强数据、技术、企业、空间载体等关键要素协同联动&#xff0c;加快进行数字经济发展布局&#xff1b;加快基础软件…

指针(三)

函数指针 定义&#xff1a;整型指针是指向整形的指针,数组指针式指向数组的指针,其实函数指针就是指向函数的指针。 函数指针基础&#xff1a; &#xff08;&#xff09;优先级要高于*&#xff1b;一个变量除去了变量名&#xff0c;便是它的变量类型&#xff1b;一个指针变量…

SQL手工注入漏洞测试(Access数据库)-墨者

———靶场专栏——— 声明&#xff1a;文章由作者weoptions学习或练习过程中的步骤及思路&#xff0c;非正式答案&#xff0c;仅供学习和参考。 靶场背景&#xff1a; 来源&#xff1a; 墨者学院 简介&#xff1a; 安全工程师"墨者"最近在练习SQL手工注入漏洞&#…

Linux详解—环境变量

目录 前言 一、基本概念 二、常见环境变量 三、查看环境变量方法 四、和环境变量相关的命令 1. echo: 显示某个环境变量值​编辑 2. export: 设置一个新的环境变量​编辑 3. env: 显示所有环境变量​编辑 4. unset: 清除环境变量​编辑 5. set: 显示本地定义的shell变…

python将时间戳转换为时间

python将时间戳转换为时间 import datetime timestamp 1701862813779 # 将时间戳转换为秒&#xff08;因为Python的timestamp通常是以秒为单位的&#xff09; timestamp_seconds timestamp / 1000 # 将时间戳转换为UTC时间 utc_time datetime.datetime.utcfromti…

Java第二十一章网络通信

一、网络程序设计基础 1、局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机&#xff0c;如下图所示。 2、网络协议 1.IP协议 IP指网际互连协议&#xff0c;Internet Protocol的缩写&#xff0c;是TCP/IP体系中的网络层协议。设计IP的目的…

0基础学java-day15

一、泛型 1 泛型的理解和好处 1.1 看一个需求 【不小心加入其它类型&#xff0c;会导致出现类型转换异常】 package com.hspedu.generic;import java.util.ArrayList;/*** author 林然* version 1.0*/ public class Generic01 {SuppressWarnings("all")public st…