鸿蒙 - arkTs:渲染(循环 - ForEach,判断 - if)

ForEach循环渲染:

参数:

  1. 要循环遍历的数组,Array类型
  2. 遍历的回调方法,Function类型
  3. 为每一项生成唯一标识符的方法,有默认生成方法,非必传

使用示例: 

interface Item {name: String,price: Number
}@Entry
@Component
struct Index {private arr:Array<Item> = [{name: '华为 Meta 50', price: 6999},{name: '华为 Meta 60 pro', price: 7999},{name: '华为 Meta X5', price: 12999},];build() {Column({space: 30}) {ForEach(this.arr,item=>{Row(){Column() {Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text('¥' + item.price)}}.width('100%').backgroundColor("#FFF").padding(20)})}.height('100%').backgroundColor("#999").justifyContent(FlexAlign.Center)};
}

效果展示:


if判断渲染:

使用示例:

interface Item {name: String,price: Number,discount?: Number
}@Entry
@Component
struct Index {private arr:Array<Item> = [{name: '华为 Meta 50', price: 6999, discount: 6666},{name: '华为 Meta 60 pro', price: 7999},{name: '华为 Meta X5', price: 12999},];build() {Column({space: 30}) {ForEach(this.arr,item=>{Row(){Column() {if(item.discount){Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text('原价:¥' + item.price).fontSize(14).decoration({ type: TextDecorationType.LineThrough })Text('折扣价:¥' + item.discount).textAlign(TextAlign.Start)Text('补贴:¥' + (item.price - item.discount)).textAlign(TextAlign.Start)}else{Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text('¥' + item.price)}}}.width('100%').backgroundColor("#FFF").padding(20)})}.height('100%').backgroundColor("#999").justifyContent(FlexAlign.Center)};
}

效果展示:

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

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

相关文章

设计模式(三)-结构型模式(3)-装饰模式

一、为何需要装饰模式&#xff08;Decorator&#xff09;? 在软件设计中&#xff0c;某个对象会组合很多不同的功能&#xff0c;如果把所有功能都写在这个对象所在的类里&#xff0c;该类会包含很多复杂的代码逻辑&#xff0c;导致代码不美观且难以维护。于是就有了再定义一些…

AWS 知识二:AWS同一个VPC下的ubuntu实例通过ldapsearch命令查询目录用户信息

前言&#xff1a; 前提&#xff1a;需要完成我的AWS 知识一创建一个成功运行的目录。 主要两个重要&#xff1a;1.本地windows如何通过SSH的方式连接到Ubuntu实例 2.ldapsearch命令的构成 一 &#xff0c;启动一个新的Ubuntu实例 1.创建一个ubuntu实例 具体创建实例步骤我就不…

Linux 进程通信

文章目录 匿名管道匿名管道使用匿名管道原理匿名管道读写 命名管道命名管道使用命名管道特性 共享内存共享内存原理共享内存使用 补充说明 补充说明部分为相关函数和不太重要的概念介绍 匿名管道 匿名管道使用 使用方法一&#xff1a; 使用函数介绍&#xff1a; #include &…

Redis介绍与使用

1、Nosql 1.1 数据存储的发展 1.1.1 只使用Mysql 以前的网站访问量不大&#xff0c;单个数据库是完全够用的。 但是随着互联网的发展&#xff0c;就出现了很多的问题&#xff1a; 数据量太大&#xff0c;服务器放不下 访问量太大&#xff0c;服务器也承受不了 1.1.2 缓存…

LLM 和搜索引擎是一样的吗?

在这篇文章中&#xff0c;了解更多关于 AI 大型语言模型&#xff08;如 ChatGPT&#xff09;的潜力。了解他们如何彻底改变生产力&#xff0c;并探索他们与搜索引擎不断变化的关系。 像 ChatGPT 这样的 AI 大型语言模型 &#xff08;LLM&#xff09; 已经风靡全球&#xff0c;并…

JVM面试题,面渣逆袭必看

1.什么是JVM? JVM——Java虚拟机&#xff0c;它是Java实现平台无关性的基石。 Java程序运行的时候&#xff0c;编译器将Java文件编译成平台无关的Java字节码文件&#xff08;.class&#xff09;,接下来对应平台JVM对字节码文件进行解释&#xff0c;翻译成对应平台匹配的机器…

山海鲸开发者带你了解数字孪生如何助力城市交通管理智能化

解决方案系列继续聊&#xff01;今天想带大家一起了解一下山海鲸可视化的智慧交通解决方案。山海鲸可视化是一款免费开发、自由编辑的软件&#xff0c;其中智慧交通解决方案隶属于智慧城市的一种&#xff0c;在智慧城市建设架构中占有重要位置。山海鲸可视化在智慧交通系列中涵…

vxe-table多选表格设置父子树形结构不关联并实现全选

vxe-table树形结构通过checkStrictly:true 设置父子节点不互相关联&#xff0c;默认不显示头部复选框 如果需要显示头部复选框需要设置showHeader:true 设置checkStrictly为true的时候全选功能是没法使用的&#xff0c;需要我们手动写一个表头的复选框 treeCheckBox默认设置…

kali-WinRaR实验~钵钵鸡

文章目录 钵钵鸡实验环境钵钵鸡实验效果一、宏代码注入二、WinRaR高级配置 钵钵鸡实验环境 WinRaR docm文档 mp3音乐文件 钵钵鸡实验效果 WinRaR实验~钵钵鸡 一、宏代码注入 宏代码注入&#xff1a; 宏代码通常是在文档内使用宏语言&#xff08;如Microsoft Office中的VBA…

java之HikariCP连接池介绍和使用方法 简单易懂!!!

文章目录 &#x1f60e;一、HikariCP连接池介绍&#x1f60e;二、导入的jar包&#x1f60e;三、代码演示&#x1f9e8;Properties配置文件&#x1f9e8;使用配置文件连接&#x1f9e8;运行结果 &#x1f60e;四、总结 ✨前言&#xff1a;本章主要学习hikaricp连接池的介绍以及使…

DDR模块电路的PCB设计建议

DDR电路简介 RK3588 DDR 控制器接口支持 JEDEC SDRAM 标准接口&#xff0c;原理电路16位数据信号如图8-1所示&#xff0c;地址、控制信号如图8-2所示&#xff0c;电源信号如图8-3所示。电路控制器有如下特点&#xff1a; 1、兼容 LPDDR4/LPDDR4X/LPDDR5 标准&#xff1b; 2、…