鸿蒙 - 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.rhkb.cn/news/221502.html

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

相关文章

Linux之yum管理器

目录 yum管理器 yum相关指令 yum list yum list | grep yum install yum remove 拓展 1.yum install -y man-pages 2.切换yum源 3.yum install -y epel-release 4. yum install -y lrzsz rz指令 sz指令 在window系统上&#xff0c;我们会在电脑自带的应用商…

【python基础】-- yarn add 添加依赖的各种类型

目录 1、安装 yarn 1.1 使用npm安装 1.2 查看版本 1.3 yarn 淘宝源配置 2、安装命令说明 2.1 yarn add&#xff08;会更新package.json和yarn.lock&#xff09; 2.2 yarn install 2.3 一些操作 2.3.1 发布包 2.3.2 移除一个包 2.3.3 更新一个依赖 2.3.4 运行脚本 …

华清远见嵌入式学习——ARM——作业1

要求&#xff1a; 代码&#xff1a; mov r0,#0 用于加mov r1,#1 初始值mov r2,#101 终止值loop: cmp r1,r2addne r0,r0,r1addne r1,r1,#1bne loop 效果&#xff1a;

【VRTK】【VR开发】【Unity】16-磁吸区域

课程配套学习项目源码资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【背景】 记得《半条命艾利克斯》中神奇的磁吸手套吗?这就是用本篇介绍的Snap Zone实现的!Snap Zone可以达到将两个物体以特定方式对齐的效果,比如让…

YOLOv8改进 | 主干篇 | 利用MobileNetV1替换Backbone(轻量化网络结构)

一、本文介绍 本文给大家带来的改进机制是MobileNetV1&#xff0c;其是专为移动和嵌入式视觉应用设计的轻量化网络结构。这些模型基于简化的架构&#xff0c;并利用深度可分离卷积构建轻量级深度神经网络&#xff0c;其引入了两个简单的全局超参数&#xff0c;用于在延迟和准确…

自学精灵--专业的编程学习网站

这是我看过的最靠谱的编程学习网站&#xff0c;名字是&#xff1a;自学精灵&#xff0c;网站是&#xff1a;learn.skyofit.com。&#xff08;某度搜"自学精灵"也可找到此站&#xff0c;搜不到可以用必应搜&#xff09;。 自学精灵是全网最强的学习平台&#xff0c;我…

Flink Table API 与 SQL 编程整理

Flink API总共分为4层这里主要整理Table API的使用 Table API是流处理和批处理通用的关系型API&#xff0c;Table API可以基于流输入或者批输入来运行而不需要进行任何修改。Table API是SQL语言的超集并专门为Apache Flink设计的&#xff0c;Table API是Scala和Java语言集成式…

Ubuntu录屏方法带声音

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、安装二、使用步骤总结 前言 有时候需要在Ubuntu录制下屏幕&#xff0c;在Windows下面录制比较简单使用Nvidia自带的效果就蛮好&#xff0c;如果不是N卡就使…

直排轮滑教程3

轮滑三大要求&#xff1a; 三点直线、腿要直、轮要正。 直线蹬地技术 1&#xff0c;直排轮滑&#xff0c;直线蹬地技术的陆地模仿练习。 2&#xff0c;在滑行做动作之前&#xff0c;先陆地上模仿。支撑腿、运动腿怎么蹬地&#xff0c;髋怎么移动。来讲一下要领。 3&#xf…

WPF Halcon机器视觉和运动控制软件通用框架,插件式开发,开箱即用 仅供学习!

点我下载&#xff0c;仅供个人学习使用 参考easyvision开发&#xff0c;集成几十个软件算子此版本以添加ui设计器。具体功能如上所示&#xff0c;可以自定义变量&#xff0c;写c#脚本&#xff0c;自定义流程&#xff0c;包含了halcon脚本和封装的算子&#xff0c;可自定义ui&a…

ansible的脚本------playbook剧本

playbook组成部分&#xff1a; 1.task 任务&#xff1a;包含要在目标主机上执行的操作&#xff0c;使用模块定义这些操作。每个都是一个模块的调用。2.variables 变量&#xff1a;存储和传递数据。变量可以自定义&#xff0c;可以在playbook当中定义为全局变量&#xff0c;也可…

drf知识--01

前后端开发模式 在开发Web应用中&#xff0c;有两种应用模式&#xff1a; 前后端混合开发: bbs 项目--renderajax 1、全栈开发--前端html后端都是一个人写 2、前端人员&#xff1a;写空页面&#xff0c;没有模板语法&#xff0c;只要html&#xff0c;c…

【小沐学Unity3d】3ds Max 减面工具:Simplyon(Unity3d,Python)

文章目录 1、简介2、下载安装2.1 安装Simlygon插件2.2 安装USD插件 3、使用测试4、Python测试结语 1、简介 Simplygon 带有一个 Unity 插件&#xff0c;它公开了优化功能&#xff0c;例如缩减、聚合、重新划分网格、冒名顶替者&#xff08;SingleView、BillboardCloud / Veget…

软件设计模式:UML类图

文章目录 前言一、&#x1f4d6;设计模式概述1.软件设计模式的产生背景2.软件设计模式3.设计模式分类 二、&#x1f4e3;UML图1.类图概述2.类的表示法3.类与类之间的关系关联关系&#xff08;1&#xff09;单向关联&#xff08;2&#xff09;双向关联&#xff08;3&#xff09;…

opencv 入门一(显示一张图片)

头文件添加如下&#xff1a; 库目录添加如下&#xff1a; 依赖的库如下&#xff1a; #include <iostream> #include "opencv2/opencv.hpp" int main(int argc,char ** argv) { cv::Mat img cv::imread(argv[1], -1); if (img.empty()) return -1; …

Cesium 3DTiles数据格式详解

目录 0 引言1 3DTiles1.1 起源1.2 后缀类型及特点1.2.1 b3dm1.2.2 i3dm1.2.3 pnts1.2.4 cmpt1.2.5 json1.2.6 总结 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;CesiumforUnreal专栏&#x1f4a5; 标题&#xff1a;Cesium 3DTiles数据格式详解❣…

[DNS网络] 网页无法打开、显示不全、加载卡顿缓慢 | 解决方案

[网络故障] 网页无法打开、显示不全、加载卡顿缓慢 | 解决方案 问题描述 最近&#xff0c;我在使用CSDN插件浏览 MOOC 网站时&#xff0c;遇到了一些网络故障。具体表现为&#xff1a; MOOC 中国大学慕课网&#xff1a;www.icourse163.org点击CSDN插件首页的 MOOC&#xff08…

【漏洞复现】CVE-2023-6895 IP网络对讲广播系统远程命令执行

漏洞描述 杭州海康威视数字技术有限公司IP网络对讲广播系统。 海康威视对讲广播系统3.0.3_20201113_RELEASE(HIK)存在漏洞。它已被宣布为关键。该漏洞影响文件/php/ping.php 的未知代码。使用输入 netstat -ano 操作参数 jsondata[ip] 会导致 os 命令注入。 开发语言:PHP 开…

无人机支持的空中无蜂窝大规模MIMO系统中上行链路分布式检测

无人机支持的空中无蜂窝大规模MIMO系统中上行链路分布式检测 无人机支持的空中无蜂窝大规模MIMO系统中上行链路分布式检测介绍题目一. 背景&#xff08;解决的问题&#xff09;二. 系统模型2.1 信道模型2.1.1 信道系数2.1.2 进行标准化 2.2 信道估计 和 数据传输2.2.1 信道估计…

大数据处理与分析-Spark

导论 (基于Hadoop的MapReduce的优缺点&#xff09; MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架 MapReduce是一种用于处理大规模数据集的编程模型和计算框架。它将数据处理过程分为两个主要阶段&#xff1a;Map阶…