鸿蒙开发-List及ForEach使用

@Entry
@Component
struct ForEachCase {
  @State message: string = 'Hello World'
  @State goodsList: GoodsItem[] = []

  aboutToAppear() {
    for (let i = 0; i < 20; i++) {
      this.goodsList.push({
        id: i,
        name: `我是标题我是标题我是标题我是标题我是标题我是标题${i}`,
        price: 100 + i,
        image: 'https://img0.baidu.com/it/u=133911151,872271351&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
      })
    }
  }
  build() {
    List({space: 12}){
      ForEach(this.goodsList, (goodsItem: GoodsItem, index: number) => {
        ListItem(){
          Row() {
            Image(goodsItem.image)
              .width(100)
              .height(160)
              .borderRadius(10)
              Column() {
                Text(goodsItem.name)
                  .fontWeight(600)
                  .fontSize(14)
                  .fontColor('#666666')
                Text(`￥${goodsItem.price}`)
                  .fontSize(16)
                  .fontColor(Color.Red)
              }
              .justifyContent(FlexAlign.SpaceBetween)
              .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)
              .height(160)
                .margin({
                  left: 12
                })
          }
            .width('100%')
        }
      })

    }
    .padding({
      left: 12,
      right: 12,
      top: 10,
      bottom: 10
    })
  }
}

class GoodsItem {
  image: string
  name: string
  price: number
  id: number
}