鸿蒙(HarmonyOS)应用开发——容器组件（List组件）

前言

前面一篇文章中，已经说了基础组件。那么接下来就是容器组件中的List组件
根据功能分类基础组件容器组件媒体组件绘制组件画布组件 Column Row List Tabs Grid Swiper

概述

List是很常用的滚动类容器组件，包含有一系列相同宽度的列表项，List组件和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。

语法

javascript 复制代码

List(value?: {space?:number|string,initialIndex?:number,scroller?:Scroller})

参数	说明
space	设置列表间距
initalIndex	设置当前list初次加载时起始位置显示的item
scroller	设置控制List组件的滚动

属性

设置List排列方向

语法
listDirection

javascript 复制代码

  List().listDirection(Axis.Vertical)

说明

设置List 组件排列方向，默认时按照垂直方向排列
参数

参数	说明
Vertical	子组件ListItem在List容器组件中呈纵向排列
Horizontal	子组件ListItem在List容器组件中呈横向排列。

设置列表分割线

语法
divider

javascript 复制代码

  List().divider(value: {
        strokeWidth: Length;
        color?: ResourceColor;
        startMargin?: Length;
        endMargin?: Length;
    }

说明

List组件子组件ListItem之间默认是没有分割线的，部分场景子组件ListItem间需要设置分割线
参数

参数	说明
strokeWidth	分割线的线宽
color	分割线的颜色。
startMargin	分割线距离列表侧边起始端的距离。
endMargin	分割线距离列表侧边结束端的距离。

List列表滚动事件监听

List组件提供了一系列事件方法用来监听列表的滚动，您可以根据需要，监听这些事件来做一些操作：

onScroll：列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。
onScrollIndex：列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。
onReachStart：列表到达起始位置时触发。
onReachEnd：列表到底末尾位置时触发。
onScrollStop：列表滑动停止时触发。

javascript 复制代码

List({ space: 10 }) {
  ForEach(this.arr, (item) => {
    ListItem() {
      Text(`${item}`)
        ...
    }
  }, item => item)
}
.onScrollIndex((firstIndex: number, lastIndex: number) => {
  console.info('first' + firstIndex)
  console.info('last' + lastIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
  console.info('scrollOffset' + scrollOffset)
  console.info('scrollState' + scrollState)
})
.onReachStart(() => {
  console.info('onReachStart')
})
.onReachEnd(() => {
  console.info('onReachEnd')
})
.onScrollStop(() => {
  console.info('onScrollStop')
})