鸿蒙开发学习笔记——列表布局List

用上一节的ForEach展示数据，当数据过大时，超出屏幕的数据被隐藏起来且不支持滚动，用List可以解决这一问题。

列表（List）是一种复杂容器，具备下列特点：

1.列表项（ListItem）数量过多超出屏幕后，会自动提供滚动功能

2.列表项（ListItem）既可以纵向排列，也可以横向排列

一、定义

一般定义如下：

    // 列表项间距
    List({space: 10}){
      ForEach([1,2,3,4], item => {
        ListItem(){
          // 列表项内容，只能包含一个根组件
          Text('ListItem')
        }
      })
    }
    .width('100%')
    .listDirection(Axis.Vertical) // 列表方向，默认纵向（垂直）Vertical 如果要横向则使用Horizontal

二、实例

当商品多了能拖动展示，代码如下：

// 定义商品类
class Item{
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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 Index {
  private items: Array<Item> = [
    new Item('Pocket系列',$r('app.media.Pocket'),7499,500),
    new Item('Mate系列',$r('app.media.Mate'),6499),
    new Item('P系列',$r('app.media.P'),6988),
    new Item('nova系列',$r('app.media.nova'),4699),
    new Item('畅想系列',$r('app.media.nav'),1499),
    new Item('畅想系列',$r('app.media.nav'),1499)
  ]

  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类型为any，所以没有提示，声明变量类型后就有提示了
          (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')
              .borderRadius(20)
              .height(120)
              .padding(10)
            }
          }
        )

      }
      .width('100%')
      .layoutWeight(1)  // 权重配比

    }
    .width('100%')
    .height('100%')
  }
}