ArkUI-08-List

import { createCollaborationCameraMenuItems } from '@hms.collaboration.camera'
import { Type } from '@ohos.arkui.StateManagement'

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

  constructor(name: string, image: ResourceStr, price: number, discount: number) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }


}
@Entry
@Component
struct Index {

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

      List({space: 8}){
        ForEach(this.items, (item:Item,index?:number) => {
         ListItem(){

           Row({space:10}){
             Image(item.image)
               .width(100)

             Column({space:4}){
               if(item.discount != 0){
                 Text(item.name)
                   .fontSize(20)
                   .fontWeight(FontWeight.Bold)

                 Text('原价：￥ '+ item.price)
                   .fontColor('#CCC')
                   .fontSize(18)
                   .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)
           }.padding(10)
           .width('80%')
           .height(120)
           .backgroundColor('#ffffffff')
           .borderRadius(15)
         }
        }, (item: string) => item)

      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)
      .layoutWeight(1)






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

  }

}

1. List 组件

• 作用：List 组件用于承载一组 ListItem 组件。它通常用于显示滚动的列表数据。
• 数据绑定：List 需要绑定数据源，这通常是一个数组。通过数据绑定，List 会动态生成对应数量的 ListItem。
• 性能优化：如果 List 包含大量数据项，建议使用虚拟化技术（如懒加载）来提高性能。鸿蒙的 List 组件通常会自动处理虚拟化，但在处理大量数据时仍需关注性能。

2. ListItem 组件

• 作用：ListItem 组件用于定义列表中的每一项。它通常包括显示内容、布局样式等。
• 结构和样式：每个 ListItem 可以包含不同的子组件和样式来满足设计需求。确保 ListItem 的布局和样式符合设计规范。
• 交互：如果 ListItem 需要支持用户交互（如点击事件），确保事件处理逻辑正确且性能良好。