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

前言

前面一篇文章中，已经说了基础组件。那么接下来就是容器组件中的List组件

根据功能分类

基础组件

容器组件

媒体组件

绘制组件

画布组件

Column

Row

List

Tabs

Grid

Swiper

概述

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

语法

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

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

属性

设置List排列方向

• 语法
  listDirection

  List().listDirection(Axis.Vertical)

• 说明
  设置List 组件排列方向，默认时按照 垂直方向排列

• 参数

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

设置列表分割线

• 语法
  divider

  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：列表滑动停止时触发。

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')
})