ArkUI-07-循环视图(ForEach循环加载列表)

效果和源码。
import { createCollaborationCameraMenuItems } from '@hms.collaboration.camera'

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

  constructor(name: string, image: ResourceStr, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}
@Entry
@Component
struct Index {

  private items:Array<Item> = [
    new Item('锅包肉',$r('app.media.test'),38),
    new Item('溜肉段',$r('app.media.test'),40),
    new Item('爆炒土豆丝',$r('app.media.test'),43),
    new Item('回锅肉',$r('app.media.test'),49),
    new Item('手把凉菜',$r('app.media.test'),51)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text('食品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }.padding({left:20})
      .width('100%')
      .margin({bottom:20})
      .backgroundColor('#ffb7d4b6')


      ForEach(this.items, (item:Item,index?:number) => {
        Row({space:10}){
          Image(item.image)
            .width(100)

          Column({space:4}){
            Text(item.name)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)

            Text('$ '+ item.price)
              .fontColor('#F36')
              .fontSize(18)
          }
          .height('100%')
          .alignItems(HorizontalAlign.Start)
        }.padding(10)
        .width('80%')
        .height(100)
        .backgroundColor('#ffa9cddb')
      }, (item: string) => item)





    }
    .backgroundColor('#ffcdd6ea')
    .width('100%')

  }

}