1. 基本概念

List列表是一种复杂容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。使用列表可以轻松高效地显示结构化、可滚动的信息。

2.基本使用

List和ListItem是结合起来使用的，List表示列表容器，而ListItem表示列表中的列表项。

@Entry
@Component
struct CityList {
  build() {
    List() {
      ListItem() {
        Text('北京').fontSize(24)
      }

      ListItem() {
        Text('杭州').fontSize(24)
      }

      ListItem() {
        Text('上海').fontSize(24)
      }
    }
    .backgroundColor('#FFF1F3F5')
    .alignListItem(ListItemAlign.Center)
  }
}

3.循环渲染

如果List种ListItem列表项非常多，肯定不能一个一个列举，这个时候需要用到ForEach循环渲染。ForEach循环渲染的格式如下
比如我现在想要使用List列表显示中国的所有省会城市。

@Entry
@Component
struct CityList {
  // 定义一个字符串数组，包含中国所有的省会城市
  citys: string[] = [
    "北京",
    "上海",
    "天津",
    "重庆",
    "哈尔滨", // 黑龙江省
    "长春", // 吉林省
    "沈阳", // 辽宁省
    "呼和浩特", // 内蒙古自治区
    "石家庄", // 河北省
    "太原", // 山西省
    "西安", // 陕西省
    "兰州", // 甘肃省
    "西宁", // 青海省
    "银川", // 宁夏回族自治区
    "乌鲁木齐", // 新疆维吾尔自治区
    "南宁", // 广西壮族自治区
    "广州", // 广东省
    "海口", // 海南省
    "成都", // 四川省
    "贵阳", // 贵州省
    "昆明", // 云南省
    "拉萨", // 西藏自治区
    "郑州", // 河南省
    "济南", // 山东省
    "南京", // 江苏省
    "杭州", // 浙江省
    "合肥", // 安徽省
    "福州", // 福建省
    "台北", // 台湾省（注意：政治和实际情况可能有所不同）
    "南昌", // 江西省
    "长沙", // 湖南省
    "武汉",// 湖北省
  ];

  build() {
    List() {
      ForEach(this.citys, (item: string) => {
        ListItem() {
          Text(item).fontSize(24)
        }
      })
    }
    .backgroundColor('#FFF1F3F5')
    .alignListItem(ListItemAlign.Center)
  }
}

4.列表样式

List({ space: 20 }) {
      ForEach(this.citys, (item: string) => {
        ListItem() {
          Text(item).fontSize(24)
        }
      })
    }
    .backgroundColor('#FFF1F3F5')
    .alignListItem(ListItemAlign.Center)	//交叉轴居中显示
    .divider({														//加入分割线
      strokeWidth:1,  //线条粗细
      startMargin:20, //线条开始外边距
      endMargin:20,   //线条结尾外边距
      color:'#dedede'
    })
    .scrollBar(BarState.Auto) //默认不显示，滚动时显示，2秒后消失