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

鸿蒙 循环控制 简单用法

news 2025/7/13 15:55:35

效果

简单使用如下：

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)}}

效果

 

http://www.lryc.cn/news/530624.html

相关文章：

  • 四、GPIO中断实现按键功能
  • Linux安装zookeeper
  • 【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（二）
  • 007 JSON Web Token
  • Windsurf cursor vscode+cline 与Python快速开发指南
  • 将markdown文件和LaTex公式转为word
  • grpc 和 http 的区别---二进制vsJSON编码
  • C#面向对象(封装)
  • kamailio-kamctl monitor解释
  • 39. I2C实验
  • GPIO配置通用输出，推挽输出，开漏输出的作用，以及输出上下拉起到的作用
  • Spring AOP 入门教程：基础概念与实现
  • DeepSeek 核心技术全景解析
  • 90，【6】攻防世界 WEB Web_php_unserialize
  • 实现网站内容快速被搜索引擎收录的方法
  • WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载
  • 机器学习优化算法：从梯度下降到Adam及其变种
  • [SAP ABAP] 静态断点的使用
  • 129.求根节点到叶节点数字之和（遍历思想）
  • NCCL、HCCL、通信、优化
  • unity学习21：Application类与文件存储的位置
  • 17 一个高并发的系统架构如何设计
  • Spring Boot 实例解析：配置文件
  • pytorch图神经网络处理图结构数据
  • 计算机网络一点事（23）
  • （9）下：学习与验证 linux 里的 epoll 对象里的 EPOLLIN、 EPOLLHUP 与 EPOLLRDHUP 的不同。小例子的实验
  • DeepSeek-R1模型1.5b、7b、8b、14b、32b、70b和671b有啥区别？
  • 一、html笔记
  • AI大模型开发原理篇-2：语言模型雏形之词袋模型
  • 基于微信小程序的实习记录系统设计与实现（LW+源码+讲解）