Harmony Next - List 组件的基本使用

前言

在移动端的页面开发过程中，列表是一种非常常见的页面形式，它可以展现一系列相同样式的数据。所以在学习 Harmony Next 的 ArkUI 时，对 List 组件的学习是必不可少的。下面，我们就来学习一下在鸿蒙中如何构建一个列表。

List 组件

学习页面相关的组件时，最好的学习方式就是边看边写，随时运行代码看实际的运行样式。下面就是一个最简单的列表样式的示例代码：

List() {
  ListItem() {
    Text("北京")
      .fontSize(20)
  }
  ListItem() {
    Text("上海")
      .fontSize(20)
  }
  ListItem() {
    Text("广州")
      .fontSize(20)
  }
  ListItem() {
    Text("深圳")
      .fontSize(20)
  }

使用 List 和 ListItem 组件，就可以实现最简单的列表样式，效果图如下：

通过效果图可以看到样式还是比较丑陋的，接下来我们在优化样式的过程中一点点学习关于 List 的知识。

添加分割线

首先，大多数的俩表都会添加分割线来区分内容，在鸿蒙中，添加分割线也是非常简单的，通过 divider 就可以实现。示例代码如下：

.divider({strokeWidth: 1, color: Color.Gray, startMargin: 5, endMargin: 5})

divider 一共可以接受以下四个参数：

• strokeWidth：分割线的高度。
• color：分割线的颜色。
• startMargin：分割线的左边距；endMargin：分割线的右边距。

效果图如下：

添加间距

可以看到，当前列表的内容很紧凑，都挤在了一起。我们可以通过 space 来给每个单元格设置一个主轴上的内容间隔。示例代码如下：

List({space: 20}) {
    ....
}

效果图如下：

自定义单元格样式

在当前的例子中，ListItem 组件只包含了一个 Text 组件。但在实际开发中，单元格会包含很多组件。比如在左侧添加一个 Image 组件，再在右侧添加一个 Text 组件。示例代码如下：

@Builder
customListItem(cityName: string, imgColor: Color, countryName: string) {
  Row() {
    Row() {
      Image("")
        .backgroundColor(imgColor)
        .width(48)
        .height(48)
        .borderRadius(16)
      Blank().width(5)
      Text(cityName)
        .fontSize(20)
    }

    Text(countryName)
      .fontSize(16)
      .fontColor(Color.Gray)
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width('100%')
}

// 使用方式如下：

ListItem() {
  this.customListItem("北京", Color.Red, "中国")
}

该 Builder 实现的试图效果如下：

需要注意的是，ListItem 组件中仅能包含一个子组件，如果想添加多个子组件比如使用容器组件包裹一下：

// 编译器报错：The 'ListItem' component can have only one child component. <ArkTSCheck>
ListItem() {
  Text()
  
  Text()
}

// 这样就不会报错了。
ListItem() {
  Row() {
    Text()
    Text()
  }
}

添加侧滑按钮

在通讯录、聊天页面等相关需求中，侧滑显示删除按钮也是比较常见的。在鸿蒙中添加侧滑也很简单，通过 swipeAction 实现。示例代码如下：

@Builder
swiperActionBuilder() {
  Button("删除")
    .onClick(() => { })
}

使用方式如下：

ListItem() {
  this.customListItem("北京", Color.Red, "中国")
}
.swipeAction({
  start: {
    builder: () => {
      this.swiperActionBuilder()
    },
  }
})

效果如下：

• start：右滑显示；end：左滑显示。

单元格分组

在列表中，关联性高的数组通常都分组显示。在鸿蒙中，可以用 ListItemGroup 组件来实现。示例代码如下：

@Builder
itemHead(text: string) {
  Text(text)
    .fontSize(20)
    .backgroundColor(Color.Grey)
    .padding(16)
    .width('100%')
}

ListItemGroup({ header: this.itemHead("一线城市"), space: 20 }) {
  ListItem() {
    this.customListItem("北京", Color.Red, "中国")
  }

  ListItem() {
    this.customListItem("上海", Color.Blue, "中国")
  }

  ListItem() {
    this.customListItem("广州", Color.Yellow, "中国")
  }

  ListItem() {
    this.customListItem("深圳", Color.Pink, "中国")
  }
}.divider({
  strokeWidth: 1,
  color: Color.Gray,
  startMargin: 5,
  endMargin: 5
})

• 定义一个 itemHead Builder 来声明 Group Header 的样式。
• ListItemGroup 的 header 中将 itemHead 传递进去即可。
• 如果需要设置 footer 直接将上述代码的 header 改为 footer 即可。

需要注意的是，之前设置的 List space 和 divider 现在是作用在 ListItemGroup 上的，如果想分组内的单元格也有相同的效果，需要设置 ListItemGroup 的 divider 和 space，如上代码所示。

效果图如下：

悬停 header

在鸿蒙中实现悬停 header 或者 footer 是非常简单的，使用 sticky 即可，代码如下：

.sticky(StickyStyle.Header) // 头部悬停
.sticky(StickyStyle.Footer) // 底部部悬停

列表数据加载

在实际开发中，列表的数据源都是一个数组，不能用上述一个组件一个组件写的方式，在鸿蒙中，可以使用 ForEach 来实现，代码如下：

// 数据模型
class CityData {
  cityName: string
  imgColor: Color
  countryName: string

  constructor(cityName: string, imgColor: Color, countryName: string) {
    this.cityName = cityName
    this.imgColor = imgColor
    this.countryName = countryName
  }
}
// 数据源
private dataSource: CityData[] =
  [new CityData("北京", Color.Red, "中国"),
    new CityData("上海", Color.Blue, "中国"),
    new CityData("广州", Color.Yellow, "中国"),
    new CityData("深圳", Color.Pink, "中国")]

build() {
  List() {
    ForEach(this.dataSource, (data: CityData) => {
      ListItem() {
        this.customListItem(data.cityName, data.imgColor, data.countryName)
      }
    })
  }

好了，到这里关于 Harmony Next 中 List 组件的分享就结束了。希望本篇文章对大家有所帮助！