【鸿蒙实战开发】基于Refresh组件的下拉刷新

场景一

实现页面下拉刷新距离回调以及刷新距离自定义。

效果图

方案

整体思路：首先需要用装饰器@builder自定义构建一个函数，然后跟refresh的接口builder进行绑定Refresh({refreshing:$$this.isRefreshing,builder:this.customRefreshComponent()})，最后将通过refresh的系列回调逐步实现下拉过程中图标的动态变化。

1. 根据refresh的builder自定义刷新样式的组件，图标地方使用了两个组件，一个是没有触发刷新状态时显示的logo，另一个是当进入刷新状态时显示的动态loading，这两个组件的显示与隐藏主要通过visibility属性以及状态变量控制是Visibility.None或者Visibility.Visible。
2. 根据refreshOffset设置触发下拉刷新的距离。
3. 给图标设置一个缩放值，下拉距离发生变化时会触发回调onOffsetChange，当下拉距离小于触发刷新距离时，该缩放值会根据下拉的距离从0开始慢慢变大到1，当下拉距离大于设置的刷新距离时，图标缩放值也从1开始慢慢变小，从而实现图标大小动态变化。
4. 当刷新状态onStateChange的value变为3时，动态改变刷新图标以及文字，松手的时候触发进入刷新回调onRefreshing，通过setTimeout延迟2秒将刷新状态变量改为false结束刷新。

核心代码

第一步：自定义refresh刷新组件。

// 自定义refresh刷新组件
@Builder
customRefreshComponent() {
  Stack() {
    Column() {
      // 定义图标
      Image($r('app.media.startIcon')).height(28)
        .scale({ x: this.scaleNum, y: this.scaleNum })
        .visibility(this.flag ? Visibility.Visible : Visibility.None)
      // 当进入刷新状态时可以更换显示组件，此地方可以根据实际情况更改
      LoadingProgress().height(32).visibility(this.flag ? Visibility.None : Visibility.Visible)
      Text(this.msg).fontSize(16)
    }
    .alignItems(HorizontalAlign.Center)
  }.width("100%").height(100)
  .align(Alignment.Center)
}

第二步：根据refreshOffset设置触发下拉刷新的距离。

Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {...}
//  refreshOffset 设置触发刷新的下拉偏移量
.refreshOffset(this.refreshOffset)

第三步：根据下拉距离发生变化时触发回调onOffsetChange。

Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {...}
// 下拉距离发生变化时触发回调。
.onOffsetChange((value: number) => {
  console.info('Refresh onOffsetChange offset:' + value)
  // 下拉距离小于触发刷新距离时
  if (value < this.refreshOffset) {
    this.flag = true
    this.msg = '下拉刷新'
    this.scaleNum = value / this.refreshOffset // 图标缩放值慢慢变大到正常
  }
  // 下拉距离大于触发刷新距离时
  else {
    this.msg = '登入后可同步电脑文档'
    this.scaleNum = this.refreshOffset / value // 图标缩放值慢慢变小
  }
})
// 当前刷新状态变更时，触发回调
.onStateChange((refreshStatus: RefreshStatus) => {
  // 当refreshStatus=3时，下拉结束，回弹至刷新距离，进入刷新状态。
  if (refreshStatus === 3) {
    // 将自定义组件的图标隐藏，显示进入刷新状态时的图标
    this.flag = false
  }
})

// refreshOffset 设置触发刷新的下拉偏移量
.refreshOffset(this.refreshOffset)
// 设置当下拉距离超过refreshOffset时是否触发刷新。
.pullToRefresh(true)

第四步：松手的时候触发进入刷新状态时回调。

// 当前刷新状态变更时，触发回调
.onStateChange((refreshStatus: RefreshStatus) => {
  //  当refreshStatus=3时，下拉结束，回弹至刷新距离，进入刷新状态。
  if (refreshStatus === 3) {
    // 动态改变刷新文字
    this.msg = '正在刷新中'
    // 将自定义组件的图标隐藏，显示进入刷新状态时的图标
    this.flag = false
  }
})
  // 进入刷新状态时触发回调。
  .onRefreshing(() => {
    setTimeout(() => {
      this.isRefreshing = false
    }, 2000)
  })

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH