HarmonyOS 鸿蒙Next 列表的简单使用

列表的使用

列表：在 app 中属于一个非常常见的组件。例如：展示消息列表，商品展示列表，分类列表等等列表组件。列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据。

接下来浅谈下 harmony 中的列表，及一些常用的方法：

1、组件名称：List
官网地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-components-container-list-V5

简单使用： List 中包含两个子组件：listItem，listItemGroup，关系如下：

知道了列表的层级关系后。

使用：

List() {
  // 列表内容。ListItem 或 listitemGroup
}

List 有个属性需要注意：listDirection(Axis.Horizontal) 即列表的方向，Horizontal 为横向列表，Vertical 纵向列表。默认为纵向列表。

完整示例：

contacts: Array<string> = [
  '栏目1',
  '栏目2'
];

List() {
  ForEach(this.contacts, (item: string) => {
    ListItem() {
      Text(item).fontSize(20)
      // 需要显示的组件列表
    }
  })
}

这样就能得到一个展示数据的简单列表了。

经过 1 步骤后即能正常显示列表，接下来显示一下列表常用的内容。

左划删除功能：listItem 组件中有一个方法：swipeAction() 方法，需要传入一个组件，及方位如右边划入展示：

栏目交换功能：这个功能并非常用的方法，例如：上图中第一条跟第二条拖动交换栏目数据；即使使用 ForEach(){} .onMove() 方法。示例：

ForEach(this.numbers, (item: Resource, index: number) => {
  ListItem() {}
  .width('100%')
}).onMove((from: number, to: number) => {
  let tmp = this.numbers.splice(from, 1)
  this.numbers.splice(to, 0, tmp[0])
})

这样你就能得到一个简单的可以交换的列表。

标题悬停功能：许多场景中经常会用到类别标题悬停功能：例如：商品列表。根据类型分类：当滑动到另外类型的分类是，分类名称悬停在顶部。该功能 harmony 也提供了一个最简单的实现方案：

List({ scroller: this.productDescScroller }) {
  ForEach(this.titleArr, (item: ListItemInfo, index: number) => {
    ListItemGroup({ header: this.ListHeader(item.title) }) {
      ForEach(item.subArray, (sub: string, index: number) => {
        ListItem() {}
      })
    }
  })
}
.sticky(StickyStyle.Header)

即：在 listItemGroup 中添加 header:，并且添加 sticky 属性，这样既可以得到一个简单的 title 悬停的列表。（ListHeader：为 @Builder 的方法，生成一个自己需要的 Title 显示组件）

看完以上内容后常见的许多列表都能很容易的适配了，但是 list 类别还有一个非常重要的功能。即类别优化功能。否则数据或列表内容偏多时会出现卡顿等现象。此时就需要用到一个比较重要的列表数据优化功能，例如 LazyForEach 来完成检点的数据列表优化功能，

以下为 lazyForEach 的简单使用：

@State layoutData: LayForEachBean = new LayForEachBean()

List() {
  LazyForEach(this.layoutData, (item: ItemInfo, index: number) => {
    ListItem() {
      Row() {
        Text("-" + item.title + "-")
          .fontColor(Color.Black)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
      .padding(15)
    }
  })
}.cachedCount(4) // 设置缓存预加载条数
.width('100%')

需要注意的是 LazyForEach 中第一个参数对象：这样就可以得到一个简单的性能优化的列表。

到此，关于列表的常规使用已经能满足大部分开发情况。如需更多相关与 list 的属性、功能，请查看官网
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5