鸿蒙开发组件之list_鸿蒙list

1、鸿蒙中的list作为可滑动列表功能，初始化方式是

List({space: 10}){
    ForEach(arr, item => {
        ListItem() {
            //列表单个Item组件
        }
  })
    
}

其中，List中的space可以设置两个ListItem组件的间距

List中是一个ForEach，需要注意的是item要返回的是ListItem组件。

2、List滑动方向

List支持竖直方向与水平方向滚动，利用属性listDirection

.listDirection(Axis.Horizontal) //水平方向滚动的列表
 
.listDirection(Axis.Vertical) //竖直方向滚动的列表

3、layoutWeight实现滑动范围

如果页面的List上边有其他视图，那么滑动的时候会有部分不能滑动出来。可以利用layoutWeight属性。这个属性是用来设置比例的默认为0。如果其他的视图不设置，然后设置了List为1，那么就表示List是占用其他视图剩下的所有区域。

     List({space: 10}) {
       ForEach(
         this.items,
         (item: Item) => {
           ListItem() {
               Row({ space: 3 }) {
                 Image(item.image)
                   .width(this.imageWidth)
                   .height(80)
                   .padding({ left: 20 })
                   .borderRadius(5)
 
                   Text('¥' + item.price)
                     .fontSize(17)
                     .textAlign(TextAlign.Start)
                     .fontColor("#FF0000")
                     .height(30)
                     .width(200)
 
               }.height(130)
               .backgroundColor('#FFFFFF')
               .borderRadius(20)
           }
           .width('100%')
         }
       )
 
     }
     .width('100%')
     .layoutWeight(1)
     .listDirection(Axis.Vertical)