HarmonyOS 开发实战 —— List组件的使用与AlphabetIndexer联动实践

在鸿蒙应用开发中，List组件是一个非常重要的元素，它用于展示一系列数据项，非常适合构建列表界面，例如商品列表、联系人列表、消息列表等，可以轻松高效地显示结构化、可滚动的信息。

1. List组件

1.1. List组件基本用法

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

参数说明：

• space：设置子组件在主轴方向的间隔
• initialIndex：设置List组件初次加载的索引值
• scroller：绑定可滚动组件控制器**Scroller **/ ListScroller

1.2. 常用属性和事件

属性	描述
listDirection(value: Axis)	设置List组件排列方向，默认值：Axis.Vertical
divider(value: {分割线样式})	设置ListItem分割线样式，默认无分割线(null)
scrollBar(value: BarState)	设置滚动条状态，默认值：BarState.Auto
lanes(value:number，**gutter:**number)	设置List组件的布局列 或 行数，gutter为列 / 行间距，默认：一列无间距
alignListItem(value:ListItemAlign)	设置List交叉轴方向的布局方式，默认值：ListItemAlign.Center
sticky(value: StickyStyle)	需要配合ListItemGroup使用，设置ListItemGroup中header和footer是否吸顶或吸底，默认值：StickyStyle.None

除支持通用事件和滚动组件通用事件外，常用的事件有：

onScrollIndex(event: (start: number, end: number, center: number) => void)

参数说明：

• start：List组件显示区域内的第一个子组件的索引值
• end：List显示区域内的最后一个子组件的索引值
• center：List显示区域内的中间位置的子组件的索引值

1.3. ListScroller控制器

**作用：**List组件的滚动控制器，通过它可以控制List组件的滚动

listScroller: ListScroller = new ListScroller()

常用方法有：

1. 滚动到指定Index索引，支持设置滑动额外偏移量。

scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: ScrollToIndexOptions)

参数说明：

• value：滚动到index索引对应的ListItemGroup元素
• smooth?：可选参数，是否开启动画
• align?：可选参数，滚动到的元素与当前容器的对齐方式
• options?：设置滑动到指定Index的配置项，如额外偏移量。

1. 滚动到容器边缘，可滚动到顶部/底部

scrollEdge(value: Edge, options?: ScrollEdgeOptions)

参数说明：

• value：滚动到的边缘位置，类型：**Edge，可选：