鸿蒙Refresh刷新实现

根据华为官方文档API 可以看到示例，我就直接用自己的代码演示
首先在build()组件中创建Refresh组件

 Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent }){
 //内容--例如列表
 }

然后通过.onStateChange()当列表项滑动状态变化时候触发的事件
这里可以定义一个isRefreshing用于上图是否开始刷新

  @State isRefreshing: boolean = false;

然后现在就可以使用了，但是效果不太ok，继续改造，可以传入一个builder 自定义的刷新区域这样更适合在开发中根据自己 需求去修改

  @Builder
  customRefreshComponent() {
    Stack() {
      Row() {
        LoadingProgress().height(32)
        Text(this.getRefreshText()).fontSize(16).margin({ left: 20 })
      }
      .alignItems(VerticalAlign.Center)
    }
    .align(Alignment.Center)
    .clip(true)
    .constraintSize({ minHeight: 32 }) // 设置最小高度约束保证自定义组件高度随刷新区域高度变化时自定义组件高度不会低于minHeight
    .width("100%")
  }

其中Text()组件中获取到的值是我根据自己的需求创建的 例子如下

  getRefreshText() {
    switch (this.status) {
      case RefreshStatus.Inactive:
        return ''
      case RefreshStatus.Drag:
        return '继续下拉'
      case RefreshStatus.OverDrag:
        return '松手刷新'
      case RefreshStatus.Refresh:
        return '刷新中'
      default:
        return ''
    }
  }

到这里基本已经可以实现效果，但是数据没办法刷新，是因为没有调用。