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

鸿蒙 循环控制 简单用法

效果

简单使用如下:

class Item {id: numbername: stringprice: numberimg: stringdiscount: numberconstructor(id: number, name: string, price: number, img: string, discount: number) {this.id = idthis.name = namethis.price = pricethis.img = imgthis.discount = discount}
}@Entry
@Component
struct Index {// 商品列表,包含多个Item对象private goodsList: Array<Item> = [new Item(1, '商品1', 100, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',200),new Item(2, '商品2', 200, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',203),new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',22),new Item(4, '商品4', 400, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',55),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',78),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),]build() {Column() {// 商品列表容器,设置间距为8Column({ space: 8 }) {// 遍历商品列表,渲染每个商品项ForEach(this.goodsList,(goodsItem: Item) => {// 每个商品项的布局Row({ space: 8 }) {// 商品图片Image(goodsItem.img).width(80).height(80).objectFit(ImageFit.Cover)// 商品名称和价格Column(){// 商品名称和价格Text(goodsItem.name).fontSize(16).fontWeight(FontWeight.Bold)// 商品价格Text("$"+goodsItem.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })// 优惠信息if (goodsItem.discount>0) {Text("打折"+goodsItem.discount).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 }).decoration({type:TextDecorationType.LineThrough})}else{Text("无优惠").fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })}}.height(80).margin({ left: 10 })}.width('100%').height(100).backgroundColor(Color.White).borderRadius(10).padding({ left:  8, right:  8, top: 8, bottom: 8})})}}.height('100%').width('100%').backgroundColor(Color.Gray).padding(10)}}

List用法 (主要用作列表显示

class Item {id: numbername: stringprice: numberimg: stringdiscount: numberconstructor(id: number, name: string, price: number, img: string, discount: number) {this.id = idthis.name = namethis.price = pricethis.img = imgthis.discount = discount}
}@Entry
@Component
struct Index {// 商品列表,包含多个Item对象private goodsList: Array<Item> = [new Item(1, '商品1', 100, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',200),new Item(2, '商品2', 200, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',203),new Item(3, '商品3', 300, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',22),new Item(4, '商品4', 400, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',55),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',78),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),new Item(5, '商品5', 500, 'https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1738515600&t=cc660ccdc4883d0cf014e3e199dedda4',83),]build() {Column() {// 商品列表容器,设置间距为8List({ space: 8 }) {// 遍历商品列表,渲染每个商品项ForEach(this.goodsList,(goodsItem: Item) => {// 每个商品项的布局ListItem() { // 添加 ListItem 包裹 RowRow({ space: 8 }) {// 商品图片Image(goodsItem.img).width(80).height(80).objectFit(ImageFit.Cover)// 商品名称和价格Column(){// 商品名称和价格Text(goodsItem.name).fontSize(16).fontWeight(FontWeight.Bold)// 商品价格Text("$"+goodsItem.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })// 优惠信息if (goodsItem.discount>0) {Text("打折"+goodsItem.discount).fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 }).decoration({type:TextDecorationType.LineThrough})}else{Text("无优惠").fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 10 })}}.height(80).margin({ left: 10 })}.width('100%').height(100).backgroundColor(Color.White).borderRadius(10).padding({ left:  8, right:  8, top: 8, bottom: 8})}})}}.height('100%').width('100%').backgroundColor(Color.Gray).padding(10)}}

效果

 

相关文章:

鸿蒙 循环控制 简单用法

效果 简单使用如下&#xff1a; class Item {id: numbername: stringprice: numberimg: stringdiscount: numberconstructor(id: number, name: string, price: number, img: string, discount: number) {this.id idthis.name namethis.price pricethis.img imgthis.discou…...

四、GPIO中断实现按键功能

4.1 GPIO简介 输入输出&#xff08;I/O&#xff09;是一个非常重要的概念。I/O泛指所有类型的输入输出端口&#xff0c;包括单向的端口如逻辑门电路的输入输出管脚和双向的GPIO端口。而GPIO&#xff08;General-Purpose Input/Output&#xff09;则是一个常见的术语&#xff0c…...

Linux安装zookeeper

1, 下载 Apache ZooKeeperhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apa…...

【贪心算法篇】:“贪心”之旅--算法练习题中的智慧与策略(二)

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;贪心算法篇–CSDN博客 文章目录 前言例题1.买卖股票的最佳时机2.买卖股票的最佳时机23.k次取…...

007 JSON Web Token

文章目录 https://doc.hutool.cn/pages/jwt/#jwt%E4%BB%8B%E7%BB%8D JWT是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。这个标准由互联网工程任务组(IETF)发表&#xff0c;定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间作为JSON对象安全地传输信息。…...

Windsurf cursor vscode+cline 与Python快速开发指南

Windsurf简介 Windsurf是由Codeium推出的全球首个基于AI Flow范式的智能IDE&#xff0c;它通过强大的AI助手功能&#xff0c;显著提升开发效率。Windsurf集成了先进的代码补全、智能重构、代码生成等功能&#xff0c;特别适合Python开发者使用。 Python环境配置 1. Conda安装…...

将markdown文件和LaTex公式转为word

通义千问等大模型生成的回答多数是markdown类型的&#xff0c;需要将他们转为Word文件 一 pypandoc 介绍 1. 项目介绍 pypandoc 是一个用于 pandoc 的轻量级 Python 包装器。pandoc 是一个通用的文档转换工具&#xff0c;支持多种格式的文档转换&#xff0c;如 Markdown、HTM…...

grpc 和 http 的区别---二进制vsJSON编码

gRPC 和 HTTP 是两种广泛使用的通信协议&#xff0c;各自适用于不同的场景。以下是它们的详细对比与优势分析&#xff1a; 一、核心特性对比 特性gRPCHTTP协议基础基于 HTTP/2基于 HTTP/1.1 或 HTTP/2数据格式默认使用 Protobuf&#xff08;二进制&#xff09;通常使用 JSON/…...

C#面向对象(封装)

1.什么是封装? C# 封装 封装 被定义为“把一个或多个项目封闭在一个物理的或者逻辑的包中”。 在面向对象程序设计方法论中&#xff0c;封装是为了防止对实现细节的访问。 抽象和封装是面向对象程序设计的相关特性。 抽象允许相关信息可视化&#xff0c;封装则使开发者实现所…...

kamailio-kamctl monitor解释

这段输出是 Kamailio 服务器的运行时信息和统计数据的摘要。以下是对每个部分的详细解释&#xff1a; 1. Kamailio Runtime Details cycle #: 3: 表示 Kamailio 的主循环已经运行了 3 个周期。Kamailio 是一个事件驱动的服务器&#xff0c;主循环用于处理事件和请求。if const…...

39. I2C实验

一、IIC协议详解 1、ALPHA开发板上有个AP3216C&#xff0c;这是一个IIC接口的器件&#xff0c;这是一个环境光传感器。AP3216C连接到了I2C1上: I2C1_SCL: 使用的是UART4_TXD这个IO&#xff0c;复用位ALT2 I2C1_SDA: 使用的是UART4_RXD这个IO。复用为ALT2 2、I2C分为SCL和SDA&…...

GPIO配置通用输出,推挽输出,开漏输出的作用,以及输出上下拉起到的作用

通用输出说明&#xff1a; ①输出原理&#xff1a; 对输出数据寄存器的对应位写0 或 1&#xff0c;就可以控制对应编号的IO口输出低/高电平 ②输出类型 推挽输出&#xff1a;IO口可以输出高电平&#xff0c;也可以输出低电平 开漏输出&#xff1a;IO口只能输出低电平 所以…...

Spring AOP 入门教程:基础概念与实现

目录 第一章&#xff1a;AOP概念的引入 第二章&#xff1a;AOP相关的概念 1. AOP概述 2. AOP的优势 3. AOP的底层原理 第三章&#xff1a;Spring的AOP技术 - 配置文件方式 1. AOP相关的术语 2. AOP配置文件方式入门 3. 切入点的表达式 4. AOP的通知类型 第四章&#x…...

DeepSeek 核心技术全景解析

DeepSeek 核心技术全景解析&#xff1a;突破性创新背后的设计哲学 DeepSeek的创新不仅仅是对AI基础架构的改进&#xff0c;更是一场范式革命。本文将深入剖析其核心技术&#xff0c;探讨 如何突破 Transformer 计算瓶颈、如何在 MoE&#xff08;Mixture of Experts&#xff09…...

90,【6】攻防世界 WEB Web_php_unserialize

进入靶场 进入靶场 <?php // 定义一个名为 Demo 的类 class Demo { // 定义一个私有属性 $file&#xff0c;默认值为 index.phpprivate $file index.php;// 构造函数&#xff0c;当创建类的实例时会自动调用// 接收一个参数 $file&#xff0c;用于初始化对象的 $file 属…...

实现网站内容快速被搜索引擎收录的方法

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/6.html 实现网站内容快速被搜索引擎收录&#xff0c;是网站运营和推广的重要目标之一。以下是一些有效的方法&#xff0c;可以帮助网站内容更快地被搜索引擎发现和收录&#xff1a; 一、确…...

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2&#xff0c;wsl2里安装ubuntu。 1. Wsl启动后 1&#xff09;Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…...

机器学习优化算法:从梯度下降到Adam及其变种

机器学习优化算法&#xff1a;从梯度下降到Adam及其变种 引言 最近deepseek的爆火已然说明&#xff0c;在机器学习领域&#xff0c;优化算法是模型训练的核心驱动力。无论是简单的线性回归还是复杂的深度神经网络&#xff0c;优化算法的选择直接影响模型的收敛速度、泛化性能…...

[SAP ABAP] 静态断点的使用

在 ABAP 编程环境中&#xff0c;静态断点通过关键字BREAK-POINT实现&#xff0c;当程序执行到这一语句时&#xff0c;会触发调试器中断程序的运行&#xff0c;允许开发人员检查当前状态并逐步跟踪后续代码逻辑 通常情况下&#xff0c;在代码的关键位置插入静态断点可以帮助开发…...

129.求根节点到叶节点数字之和(遍历思想)

Problem: 129.求根节点到叶节点数字之和 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 直接利用二叉树的先序遍历&#xff0c;将遍历过程中的节点值先利用字符串拼接起来遇到根节点时再转为数字并累加起来&#xff0c;在归的过程中&#xf…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...