HarmonyOs鸿蒙开发实战(15)=＞一文学会基础使用List+ListItem组件

敲黑板，以下是重点技巧。文章末尾有实战项目效果截图及代码截图可参考

1. 设置主轴方向

List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表。
若是水平滚动列表场景，将List的listDirection属性设置为Axis.Horizontal即可实现。listDirection默认为Axis.Vertical，即主轴默认是垂直方向。

2.设置交叉轴布局

List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，
lanes属性用于确定交叉轴排列的列表项数量
alignListItem用于设置子组件在交叉轴方向的对齐方式。

3.迭代列表内容

通常，应用通过数据集合动态地创建列表。使用循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件，降低代码复杂度。
ArkTS通过ForEach提供了组件的循环渲染能力。以简单形式的联系人列表为例，将联系人名称和头像数据以Contact类结构存储到contacts数组，使用ForEach中嵌套ListItem的形式来代替多个平铺的、内容相似的ListItem，从而减少重复代码。

4.自定义列表样式

4.1.设置内容间距

在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加10vp的间距：

示例代码：

List({ space: 10 }) {
// ...
}

4.2.添加分隔线

List提供了divider属性用于给列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色。

示例代码：

class DividerTmp {
strokeWidth: Length = 1
startMargin: Length = 60
endMargin: Length = 10
color: ResourceColor = '#ffe9f0f0'

constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) {
this.strokeWidth = strokeWidth
this.startMargin = startMargin
this.endMargin = endMargin
this.color = color
}
}
@Entry
@Component
struct EgDivider {
@State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0')
build() {
List() {
// ...
}
.divider(this.egDivider)
}
}

Divider注意事项:

分隔线的宽度会使ListItem之间存在一定间隔，当List设置的内容间距小于分隔线宽度时，ListItem之间的间隔会使用分隔线的宽度。

当List存在多列时，分割线的startMargin和endMargin作用于每一列上。

List组件的分隔线画在两个ListItem之间，第一个ListItem上方和最后一个ListItem下方不会绘制分隔线。

4.3.添加滚动条

在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为BarState，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。
scrollBar属性API version 9及以下版本默认值为BarState.Off, 从API version 10版本开始默认值为BarState.Auto。

示例代码：

List() {
// ...
}
.scrollBar(BarState.Auto)

5.控制滚动位置

List组件初始化时，可以通过scroller参数绑定一个Scroller对象，进行列表的滚动控制。例如，用户在新闻应用中，点击新闻页面底部的返回顶部按钮时，就可以通过Scroller对象的scrollToIndex方法使列表滚动到指定的列表项索引位置。
然后，通过将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。在需要跳转的位置指定scrollToIndex的参数为0，表示返回列表顶部。

示例代码：

private listScroller: Scroller = new Scroller();

Stack({ alignContent: Alignment.Bottom }) {
// 将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。
List({ space: 20, scroller: this.listScroller }) {
// ...
}

Button() {
// ...
}
.onClick(() => {
// 点击按钮时，指定跳转位置，返回列表顶部
this.listScroller.scrollToIndex(0)
})
}