鸿蒙 循环控制 简单用法

效果

简单使用如下：

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

}

效果