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

鸿蒙 循环控制 简单用法

article 2025/2/3 20:51:54

效果

简单使用如下：

class Item {
  id: number
  name: string
  price: number
  img: string
  discount: number
  constructor(id: number, name: string, price: number, img: string, discount: number) {
    this.id = id
    this.name = name
    this.price = price
    this.img = img
    this.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() {
      // 商品列表容器，设置间距为8
      Column({ 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: number
  name: string
  price: number
  img: string
  discount: number
  constructor(id: number, name: string, price: number, img: string, discount: number) {
    this.id = id
    this.name = name
    this.price = price
    this.img = img
    this.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() {
      // 商品列表容器，设置间距为8
      List({ space: 8 }) {
        // 遍历商品列表，渲染每个商品项
        ForEach(this.goodsList,
          (goodsItem: Item) => {
            // 每个商品项的布局
            ListItem() { // 添加 ListItem 包裹 Row
              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)
  }

}

效果

 


http://www.kler.cn/a/530217.html

相关文章：

  • 深入 Rollup：从入门到精通（三）Rollup CLI命令行实战
  • SOME/IP--协议英文原文讲解3
  • 仿真设计|基于51单片机的贪吃蛇游戏
  • 【AI论文】Sigma：对查询、键和值进行差分缩放，以实现高效语言模型
  • PPT演示设置：插入音频同步切换播放时长计算
  • AI开发学习之——PyTorch框架
  • 洛谷的更多功能（不会像其他文章那样复杂且仅支持Edge浏览器）
  • 《 C++ 点滴漫谈： 二十五 》空指针，隐秘而危险的杀手：程序崩溃的真凶就在你眼前！
  • 《手札·开源篇》从开源到商业化：中小企业的低成本数字化转型路径 ——SKF轴承贸易商的十年信息化演进启示
  • STM32单片机学习记录（2.2）
  • 【开源免费】基于SpringBoot+Vue.JS医院后台管理系统（JAVA毕业设计）
  • AJAX笔记原理篇
  • 12 向量结构模块（vector.rs）
  • 解决国内服务器 npm install 卡住的问题
  • 【课题推荐】基于t分布的非高斯滤波框架在水下自主导航中的应用研究
  • [Linux]如何將腳本(shell script)轉換到系統管理服務器(systemd service)來運行?
  • Hive之数据定义DDL
  • UE5 蓝图学习计划 - Day 7：摄像机与视角控制
  • 【爬虫】JS逆向解决某药的商品价格加密
  • 广度优先搜索算法笔记
  • 政务行业审计文件大数据高速报送解决方案
  • 跨越通信障碍：深入了解ZeroMQ的魅力
  • deep seek R1本地化部署及openAI API调用
  • 别做太远的规划
  • nodejs：express + js-mdict 网页查询英汉词典，能播放声音
  • 【数据分析】案例03：当当网近30日热销图书的数据采集与可视化分析（scrapy+openpyxl+matplotlib）