列表是一个复杂的容器，当列表项达到一定数量，使得列表内容超出其范围的时候，就会自动变为可以滚动。列表适合用来展现同类数据类型。

List的基本使用方法

List组件的构建声明是这个样子的

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

参数详解：

• space: 代表子项中挨着的间距。
• initiallIndex: 代表首次进列表的时候初始滑动的位置，单位按照索引来进行测算。自动滑动的位置为 置顶第一个。
• scroller: 可滚动组件控制器(所以不止一个组件欧)。 如果一个List有滑动控制的需求，例如点击某一个按钮就会向上移动多少，此时，没有办法直接拿到List的对象去滑动，而是通过滑动控制器绑定完进行控制。

initiallIndex使用案例：

@State list:string[] = ['1', '2', '3', '4', '5', '6', '7']
build() {...List({space: 8, initiallIndex: 3}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}
}

可滚动组件控制器-Scroller

上方我们讲了下List组件构建的时候所需要的参数，其余两个，space， 和 initiallIndex都比较好理解，我们不做赘述。 下面讲讲第三个参数Scroller。

Scroller就是用来控制可滚动组件的滚动行为的。List也是一种可滚动组件，也支持了这个控制器。

Scroller初始化

非常简单，new一下即可。

// 1 初始化对象
scroller: Scroller = new Scroller()// 2 使用对象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}
}

Scroller功能

• scrollTo ：滑动到指定位置
• scrollEdge： 滑动到边缘
• scrollBy：滑动指定距离

// 1 初始化对象
scroller: Scroller = new Scroller()// 2 使用对象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}Button('scroll 50').onclick(()=>{this.scroller.scrollBy(0, 50)})Button('back top').onclick(()=>{this.scroller.scrollEdge(Edge.Top)})
}

List属性

属性	功能
listDirection	设置List组件排列方向
lanes	设置List组件行数或者列数
divider	设置ListItem分割线样式
scrollBar	设置滚动条状态

listDirection属性-设置列表方向

用于设置List组件的内容排列方向。 其值为一个枚举：

• Axis.Vertical 纵向
• Axis.Horizontal 横向

// 1 初始化对象
scroller: Scroller = new Scroller()// 2 使用对象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical)
}

lanes属性-设置列数

lanes是车道，划分区域的意思。这个属性设置的时候参数比较复杂。我们看看原型。

lanes(value: number|LengthConstrain, gutter?: Dimension)

• value: 设置列表内容的列数或者行数
• gutter: 设置列间距。 此处的列间距，应该变通理解，如果一个表目前是横向的，那么它只有一个横向的”列“！

// 1 初始化对象
scroller: Scroller = new Scroller()// 2 使用对象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical).lanes(2)
}

List是纵向的，出现了两列

那还要Grid干嘛，天哪！

divider属性-设置分割线样式

// 1 初始化对象
scroller: Scroller = new Scroller()// 2 使用对象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical).lanes(2).divider({strockWidth: 2,color: '#4472c4',startMargin: 20,endMargin: 20})
}

scrollBar属性-设置滚动条状态

这个比较好理解就不做代码展示了。我们理解下参数的意义即可。

scrollBar(barState: BarState)

BarState枚举说明

• Auto：按需展示，触摸时展示，2秒后就消失。
• Off：不展示
• On：常驻展示、

List，ListItemGroup, ListItem 组件关系

ListItemGroup用于列表数据的分组展示，其组件也是ListItem。ListItem表示单个列表项，可以包含单个组件。

list(){listItemGroup(){listItem(){...}}listItemGroup(){listItem(){...}listItem(){...}}listItemGroup(){listItem(){...}listItem(){...}}
}