HarmonyOS 列表List布局

类似于Android的ListView，展示同类数据类型或数据类型集。

布局

List组件需要子组件ListItemGroup或ListItem一块使用，ListItemGroup或ListItem必须配合List来使用。

List除了可以垂直或水平布局能力，还可以进行多列垂直或水平布局滚动列表。
1.List组件默认情况下的列数为1，可通过设置lanes来更改为多列列表。

      List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.lanes(2)

image.png

2.列表自适应显示列数，可通过设置lanes的LengthConstrain类型，会根据配置的minLength跟maxLength自动选择显示几列。

      List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.lanes({
        minLength: 200,
        maxLength: 400
      })

约束

列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。垂直于主轴的轴叫交叉轴。

image.png

List如果没有设置高度，则高度最高不超过List的父组件高度，最低不低于子组件的总和高度。
1.List组件默认主轴是垂直方向，如果要将主轴方向设置成水平方向，则需要设置listDirection为Axis.Horizontal。

List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.listDirection(Axis.Horizontal)

image.png

2.设置主轴上水平方向的位置。
.alignListItem(ListItemAlign.Center) 代表列表项居中对齐。

自定义列表样式

设置内容间距

如需列表项之间添加间距，可以使用space参数。

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

添加分割线

列表项添加分割线，通过设置divider属性，另外还可以通过strokeWidth和color属性设置分割线的粗细和颜色。
startMargin和endMargin属性分别用于设置分割线距离列表侧边起始端的距离。

List({ space: 20 }) {
        ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item: number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }
      .lanes({
        minLength: 200,
        maxLength: 400
      })
      .alignListItem(ListItemAlign.Center)
      .divider({ strokeWidth: 1, color: '#00f0f0', startMargin: 10, endMargin: 10 })

添加分组列表

在List组件中使用ListItemGroup对项目进行分组，可以构建二维列表。

      List({ space: 20 }) {
        ListItemGroup({
          header: this.itemHead("王怀智")
        }) {
          ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item: number) => {
            ListItem() {
              Text("List布局-" + item).fontSize(20)
                .backgroundColor(Color.Red)
                .height(45)
            }
          })
        }
      }

左右滑动

通过ListItem的swipeAction属性，实现列表项的左右滑动功能。

            ListItem() {
              Text("List布局-" + item).fontSize(20)
                .backgroundColor(Color.Red)
                .height(45)
            }.swipeAction({
              end: {
                builder: () => {
                  this.itemHead("删除")
                }
              }
            })

image.png