鸿蒙开发实践——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. 常用属性和事件 

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

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，可选：Top/Start (顶部/左端) | Bottom/End(底部/右端)

• options?：设置滚动到边缘位置的模式 （ScrollEdgeOptions{velocity: number }设置滚动的速度）

1.滚动到指定的ListItemGroup中指定的ListItem

scrollToItemInGroup(index: number, indexInGroup: number, smooth?: boolean, align?: ScrollAlign): void