HarmonyOS NEXT鸿蒙开发：List列表-马育民老师

[官网API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#multiselectable8 "官网API")

# 接口

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

##### 参数

- space：类型：`number | string`，子组件主轴方向的间隔。默认值：0。参数类型为number时单位为 `vp`

- initialIndex：`number`，设置当前List初次加载时显示区域起始位置的item索引值。默认值：0

# 方法

### 排列方向

设置List组件排列方向。
```
listDirection(value: Axis)
```

##### 参数

- value：类型：Axis，必填，组件的排列方向。默认值： `Axis.Vertical` 垂直方向。`Axis.Horizontal` 水平方向

### 分割线样式

设置ListItem分割线样式，默认无分割线。

分割线画在主轴方向 **两个子组件之间**，**第一个子组件上方** 和 **最后一个子组件下方** **不会绘制分割线**

```
divider(value: {strokeWidth: Length; color?: ResourceColor; startMargin?: Length; endMargin?: Length;} | null,)
```

##### 参数

- value：类型：
```
{
	strokeWidth: Length,
	color?:ResourceColor,
	startMargin?: Length,
	endMargin?: Length
} | null
```
必填，ListItem分割线样式。

- strokeWidth: 分割线的线宽。

- color: 分割线的颜色。默认值：`0x08000000`

- startMargin: 分割线与列表侧边起始端的距离。默认值：0，单位：vp

- endMargin: 分割线与列表侧边结束端的距离。默认值：0，单位：vp

### 设置滚动条状态

```
scrollBar(value: BarState)
```

##### 参数

- value：类型：BarState，必填，滚动条状态。默认值：BarState.Auto
 - BarState.Auto：按需显示(触摸时显示，2s后消失)
 - BarState.Off：不显示
 - BarState.On：常驻显示

# 例子

实现下图效果，这里是有 `List` 代码，完整案例见[链接](https://www.malaoshi.top/show_1GW55DElFof.html "链接")

[![](https://www.malaoshi.top/upload/0/0/1GW54wKyg06.jpg)](https://www.malaoshi.top/upload/0/0/1GW54wKyg06.jpg)

```
@Entry
@Component
struct ListAndListItemDemo {

build() {
    Column() {
      // 人员列表
      List() {

}

.width('90%')
      .height('100%')
      .divider({ //设置分割线
        strokeWidth: 1,
        color: '#333',
        // startMargin: 10,
        // endMargin: 10
      })
      .scrollBar(BarState.On) // 显示滚动条
    }
    .height('100%')
    .width('100%')
  }
}
```

原文出处：https://www.malaoshi.top/show_1GW54yR1L0E.html