初学鸿蒙-ArkUI组件-COlumn和Row-循环控制-List

class Item {
  name:string
  image:ResourceStr
  price:number
  discount:number

  constructor(name:string,image:ResourceStr,price:number,discount:number=0) {
    this.name =name
    this.image =image
    this.price =price
    this.discount =discount
  }
}
@Entry
@Component
struct ItemPage {
  // @State imageWidth: number = 30;
  private items:Array<Item> = [
    new Item('华为1',$r('app.media.app_icon'),6999,500),
    new Item('华为2',$r('app.media.app_icon'),6999),
    new Item('华为3',$r('app.media.app_icon'),6999),
    new Item('华为4',$r('app.media.app_icon'),6999),
    new Item('华为5',$r('app.media.app_icon'),6999),
    new Item('华为6',$r('app.media.app_icon'),6999),
    new Item('华为7',$r('app.media.app_icon'),6999),
  ]
  build() {
    Column({space:8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(30)
      .margin({bottom:20})
      List({space:8}){
        ForEach(
          this.items,
          (item:Item) => {
            ListItem(){
              Row({space:10}){
                Image(item.image)
                  .width(100)
                Column({space:4}){
                  if (item.discount) {
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('原价：￥'+item.price)
                      .fontColor('#CCC')
                      .fontSize(14)
                      .decoration({type:TextDecorationType.LineThrough})
                    Text('折扣价：￥'+(item.price-item.discount))
                      .fontColor('#F36')
                      .fontSize(18)
                    Text('补贴：￥'+item.discount)
                      .fontColor('#F36')
                      .fontSize(18)
                  }else {
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('￥'+item.price)
                      .fontColor('#F36')
                      .fontSize(18)
                  }
                }
                .height('100%')
                .alignItems(HorizontalAlign.Start)
              }
              .width('100%')
              .backgroundColor('#fff')
              .height(120)
              .padding(10)
            }
          }
        )
        ListItem(){
          Row(){

          }
        }
      }
      .width('100%')
      .layoutWeight(1)
      .listDirection(Axis.Vertical)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}
效果图