【鸿蒙实战开发教程】支持刷新加载的HarmonyOS动态分组列表组件

一、背景

目前货拉拉作为首批和鸿蒙合作适配的厂商 之一，已经在内部开始适配鸿蒙版货拉拉用户端
在鸿蒙开发适配过程中发现，项目中存有列表+分组的场景，按目前已有实现方式存在如下问题：

1.官方文档上推荐实现的分组列表是使用ListItemGroup的方式来实现分组

2.ListItemGroup适用于静态分组，例如已经获取了全部数据之后通讯录或者城市列表分组显示

不太适用于

1.需要动态加载更多数据之后给数据动态分组
2.需要实时监听item滑动位置的上拉加载更多的场景

因为ListItemGroup被当做一个整体的item，难以实时监听到内部item的滑动位置，所以难以判断需要上拉加载更多

本文的PullToRefresh组件在开源的下拉刷新组件的基础上同时实现下拉刷新、上拉加载更多、列表动态分组功能

二、简介

PullToRefreshFor是鸿蒙下可同时实现动态分组列表进行下拉刷新、上拉加载的组件
在以下版本验证通过：

●DevEco Studio: 4.1 Canary(4.1.3.500), SDK: API11 (4.1.0)

理论上也支持API 9、10的版本

三、功能特性

●特性1：支持下拉刷新和上拉加载更多数据
●特性2：同时支持动态分组列表

和这个gitee.com/openharmony…

1.监听手势事件的方式不同：PullToRefresh 使用parallelGesture方法获取触摸手势事件，本组件使用onTouch方法获取手势
2.灵活度不同：PullToRefresh把整个组件进行一个大的封装，由外部传入 List 组件和数据请求函数即可，优点是使用上手简单，缺点是不太容易定制。本组件则是把下拉刷新、上拉加载、Head 作为单独的组件供外部使用，优点是可自由定制如实现本次分组列表，缺点是需要多处声明

四、安装指南

ohpm install @huolala/pull-refresh

五、代码示例

1、头部刷新部分及头部刷新逻辑

头部下拉刷新UI视图组件为CustomRefreshLoadLayout，当需要下拉刷新时，传入PullRefreshModel里的refreshLayoutConfig，然后添加此组件即可预设刷新 UI
通过@state 注解的 PullRefreshModel 类，当满足相应条件时，自动更新是否可见、刷新时的图片资源、刷新时的文案，控件高度
如当外部更改为可见时则使用预设控件高度显示，否则高度置为 0，则隐藏了刷新控件

 // 下拉刷新
CustomRefreshLoadLayout({ config: this.dataModel.refreshLayoutConfig })

@Observed
export  class PullRefreshModel {
  //...
  refreshLayoutConfig: CustomRefreshLoadLayoutConfig = new CustomRefreshLoadLayoutConfig(false)
  //...
}

@Component
export  default struct CustomLayout {
  @ObjectLink customRefreshLoadClass: CustomRefreshLoadLayoutClass;

  build() {
    Row() {
      // UI 视图，跟随状态是动态获取
      // ....省略具体UI
    }
    .clip(true)
    .width(Const.FULL_WIDTH)
    .justifyContent(FlexAlign.Center)
    // 这里通过获取刷新组件是否可见的值，来动态控制的高度是否为 0
    .height(this.customRefreshLoadClass.isVisible == true ? this.customRefreshLoadClass.heightValue : 0)
    .animation({
      duration: 300
    })
  }
}

触发下拉刷新的方式，则是通过监听控件的 onTouch方法，传入 TouchEvent 触摸数据到组件内部，通过判断下滑偏移量来更新下拉刷新组件的PullRefreshModel类的属性值，最后通过数据更新 UI 到上面的CustomRefreshLoadLayout中

export  function touchMovePullRefresh(dataMo