创建列表 (List)
列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。
开发布局
设置主轴方向
List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表。
若是水平滚动列表场景，将List的listDirec
tion属性设置为Axis.Horizontal即可实现。listDirection默认为Axis.Vertical，即主轴默认是垂直方向。
List() { // ...}.listDirection(Axis.Horizontal)
设置交叉轴布局
List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，lanes属性用于确定交叉轴排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。
List组件的lanes属性通常用于在不同尺寸的设备自适应构建不同行数或列数的列表，即一次开发、多端部署的场景，例如
歌单列表。lanes属性的取值类型是"number |
LengthConstrain"，即整数或者LengthConstrain类型。以垂直列表为例，如果将lanes属性设为2，表示构建的是一个两列的垂直列表，如图2中右图所示。lanes的默认值为1，即默认情况下，垂直列表的列数是1。
List() { // ...}.lanes(2)当其取值为LengthConstrain类型时，表示会根据LengthConstrain与List组件的尺寸自适应决定行或列数。
@Entry@Componentstruct EgLanes { @State egLanes: LengthConstrain = { minLength: 200, maxLength: 300 } build() { List() { // ... } .lanes(this.egLanes) }}例如，假设在垂直列表中设置了lanes的值为{ minLength: 200, maxLength: 300 }。此时，
- 当List组件宽度为300vp时，由于minLength为200vp，此时列表为一列。
- 当List组件宽度变化至400vp时，符合两倍的minLength，则此时列表自适应为两列。
同样以垂直列表为例，当alignListItem属性设置为ListItemAlign.Center表示列表项在水平方向上居中对齐。alignListItem的默认值是ListItemAlign.Start，即列表项在列表交叉轴方向上默认按首部对齐。
List() { // ...}.alignListItem(ListItemAlign.Center)
自定义列表样式
设置内容间距
在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加10vp的间距：
List({ space: 10 }) { // ...}
添加分隔线
分隔线用来将界面元素隔开，使单个元素更加容易识别。如下图所示，当列表项左边有图标（如蓝牙图标），由于图标本身就能很好的区分，此时分隔线从图标之后开始显示即可。
List提供了divider属性用于给列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色。
startMargin和endMargin属性分别用于设置分隔线距离列表侧边起始端的距离和距离列表侧边结束端的距离。
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@Componentstruct EgDivider { @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0') build() { List() { // ... } .divider(this.egDivider) }}此示例表示从距离列表侧边起始端60vp开始到距离结束端10vp的位置，画一条粗细为1vp的分割线，可以实现图9设置列表分隔线的样式。
说明：
- 分隔线的宽度会使ListItem之间存在一定间隔，当List设置的内容间距小于分隔线宽度时，ListItem之间的间隔会使用分隔线的宽度。
- 当List存在多列时，分割线的startMargin和endMargin作用于每一列上。
- List组件的分隔线画在两个ListItem之间，第一个ListItem上方和最后一个ListItem下方不会绘制分隔线。
添加滚动条
当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平）方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。
在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为
BarState，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。
scrollBar属性API version 9及以下版本默认值为BarState.Off，从API version 10版本开始默认值为BarState.Auto。
List() { // ...}.scrollBar(BarState.Auto)
完整代码
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 }}interface ContactsInterface { title: string; icon: Resource;}@Entry@Componentstruct EgDivider { @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0') private contacts: Array = [ {title: "WLAN", icon: $r("app.media.ic_settings_wifi")}, {title: "蓝牙", icon: $r("app.media.ic_setting_bluetooth")}, {title: "移动数据", icon: $r("app.media.ic_setting_mobile_network")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")}, {title: "xxx", icon: $r("app.media.icon")} ] build() { Column() { List() { ForEach(this.contacts, (item: ContactsInterface) => { ListItem() { Row() { Image(item.icon) .width(40) .height(40) .margin(10) Text(item.title).fontSize(20) } .width('100%') .justifyContent(FlexAlign.Start) } }) } .divider(this.egDivider) .scrollBar(BarState.Auto) }.height("100%") .width("100%") }}
长按上方图片保存到相册
复制链接