效果和源码。 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%') } }
11-25
9160
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-15