HarmonyOS Next快速入门：列表布局（List）

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

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

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用循环渲染迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

接口

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

List包含ListItem、ListItemGroup子组件。
List的子组件必须是ListItemGroup或ListItem，ListItem和ListItemGroup必须配合List来使用。
通过ForEach循环渲染列表数据
代码实例

@Entry
@Component
struct ListPage {
   
  @State message: string = '第2节 列表布局（List）';

  cities:Array<string>=[
    '北京市','上海市','广州市','杭州市','东莞市'
  ]

  @Builder
  groupHeader(text: string) {
   
    Text(text)
      .fontWeight(FontWeight.Bold)
      .backgroundColor(Color.Orange)
      .width('100%')
      .padding(4)
      .textAlign(TextAlign.Center)
  }

  build() {
   
    Column() {
   
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      List() {
   
        ListItem() {
   
          Text('北京')
        }

        ListItem() {
   
          Text('上海')
        }

        ListItem() {
   
          Text('广州')
        }

        ListItemGroup({
    header: this.groupHeader('一线城市')}){
   
          ListItem() {
   
            Text('北京')
          }

          ListItem() {
   
            Text('上海')
          }

          ListItem() {
   
            Text('广州')
          }
        }

        ListItemGroup({
   header:this.groupHeader('循环遍历')}){
   
          ForEach(this.cities,(item:string)=>{
   
            ListItem(){
   
              Text(item)
            }
          })
        }
      }
      .backgroundColor('#EEEEEE')
      .alignListItem(ListItemAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

添加分隔线

• 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
@Component
struct EgDivider {
   
  @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0')
  build() {
   
    List() {
   
      // ...
    }
    .divider(this.egDivider)
  }
}

滚动条

在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为BarState，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。

List() {
   
  // ...
}
.scrollBar(BarState.Auto)