五、ArkUI界面设计4（进阶布局）

1. 列表 List

列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在list组件中按垂直或者水平方向线性排列子组件。

列表作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。

垂直滚动列表

水平滚动列表

List表示列表容器，ListItem表示单个列表项，可以包含单个子组件。

1.1 基本使用

基本使用：

List() {
listItem() {}
 .....
}

示例代码：

@Entry
@Component
struct Index {
  build() {
    List({space:5}){
      ListItem(){
        Text('List滚动测试1')
          .width(120)
          .height(60)
          .backgroundColor(Color.Orange)
          .padding(10)
      }
      //中间重复代码省略
    }
    .padding(5)
  }
}

预览器效果：

1.2 开发布局

1.2.1 设置主轴方向 listDirection

List组件主轴默认为垂直方向Vertical，可通过listDirection属性改变主轴方向为水平Horizontal。

属性listDirection的参数为枚举Axis。

将上述1.1示例列表主轴方向变为水平

代码实现：

@Entry
@Component
struct Index {
  build() {
    List({space:5}){
      ListItem(){
        Text('List滚动测试1')
          .width(120)
          .height(60)
          .backgroundColor(Color.Orange)
          .padding(10)
      }
      //中间重复代码省略
    }
    .listDirection(Axis.Horizontal)
    .padding(5)
  }
}

预览器效果：

1.2.2 设置交叉轴布局

1.2.2.1 列模式 lanes

 lanes(交叉轴方向列数，交叉轴方向列间距)

List() {
 listItem()
 ......
}
// 参数1：交叉轴⽅向列数
// 参数2： 交叉轴⽅向列间距
 .lanes(3, 10)

示例代码：

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      List({ space: 5 }) {
        ListItem() {
          Text('List滚动测试1')
            .width(120)
            .height(60)
            .backgroundColor(Color.Orange)
            .padding(10)
        }

        //中间重复代码省略
      }
      .height(200)
      //list主轴方向为垂直，默认值；交叉轴方向则为水平
      .listDirection(Axis.Vertical)
      .padding(5)
      .backgroundColor(Color.Gray)
      //交叉轴方向为2列
      .lanes(2)

      List({ space: 5 }) {
        ListItem() {
          Text('List滚动测试1')
            .width(120)
            .height(60)
            .backgroundColor(Color.Orange)
            .padding(10)
        }

        //中间重复代码省略
      }
      .height(200)
      //设置list主轴方向为水平；交叉轴方向则为垂直
      .listDirection(Axis.Horizontal)
      .padding(5)
      .backgroundColor(Color.Gray)
      //交叉轴方向为2行
      .lanes(2)
    }
  }
}

预览器效果：

1.2.2.2 列对齐方式 alignListItem

此属性参数为枚举ListItemAlign；Start、Center、End。

示例代码：

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      List({ space: 5 }) {
        ListItem() {
          Text('List滚动测试1')
            .width(120)
            .height(60)
            .backgroundColor(Color.Orange)
            .padding(10)
        }

        //中间重复代码省略
      }
      .height(200)
      //交叉轴默认对齐方式为首部对齐
      .alignListItem(ListItemAlign.Start)
      //list主轴方向为垂直，默认值；交叉轴方向则为水平
      .