鸿蒙NEXT版仿抖音快手App的下拉刷新组件

上一节我们通过网络请求库实现了简单的HTTP接口调用，那么除了在首次加载App界面时的接口调用，用户还会通过下拉刷新动作实时获取最新的接口内容。鸿蒙系统提供了专门的下拉刷新组件Refresh，方便开发者处理下拉刷新事件。

Refresh组件的构造方法可输入以下常用的参数，用来设置下拉刷新时候的状态：

refreshing：当前是否处于刷新中状态。默认为false表示未处于刷新中。该参数支持$$双向绑定变量。

promptText：刷新区域底部显示的自定义文本。

除了支持通用属性以外，Refresh还支持以下的常用属性：

refreshOffset：触发刷新的下拉偏移量。未设置promptText时默认为64，设置了promptText后默认为96。

pullToRefresh：当下拉距离超过refreshOffset时是否能触发刷新。默认为true表示会触发刷新。

除了支持通用事件以外，Refresh还支持以下的常用事件：

onStateChange：在当前刷新状态发生变化时，触发该事件的回调。

onRefreshing：进入正在刷新状态时，触发该事件的回调。

onOffsetChange：在下拉距离发生变化时，触发该事件的回调。

在实际编码中，可将完整的下拉刷新操作划分为下列三个步骤：

（1）单个手指按住屏幕开始下拉，下拉过程中，整个App界面会跟着往下挪动，此时屏幕顶部的拉出区域会显示promptText设置的文本。

（2）拉动一段距离后松开手指，此时系统判断下拉距离是否超过阈值。如果没超过阈值，则App界面往顶部回弹，不触发onRefreshing事件；如果超过阈值，则App界面暂时停在原地，同时触发onRefreshing事件。

（3）onRefreshing事件的回调代码中执行HTTP接口调用操作，等收到返回报文后，更新界面的图文等内容；同时将refreshing参数绑定的变量设为false，此时系统监控到refreshing值变为false，就自动让App界面往顶部回弹，结束下拉刷新操作。

根据上述步骤编写的下拉刷新框架代码如下所示：

Refresh({ refreshing: $$this.isRefreshing, promptText: '刷新中……' }) {
  Text(this.message).width('100%').height('100%')
    .fontSize(18).align(Alignment.Top).textAlign(TextAlign.Center)
}
.width('100%').height('100%')
.onRefreshing(() => {
  setTimeout(() => { // 这里的定时器模拟网络请求
    this.isRefreshing = false
  }, 2000)
  this.message = '正在刷新……'
})
.onStateChange((refreshStatus: RefreshStatus) => {
  if (refreshStatus == RefreshStatus.Done) {
    this.message = '刷新结束'
  }
})

运行鸿蒙App后，先按住屏幕下拉一段距离，并保持手指不动，此时待触发刷新操作的界面如下图所示：

然后松开手指，App进入正在刷新状态，如下图所示。

等待一会儿，刷新结束，回弹之后的App界面如下图所示：

根据以上的刷新过程截图，可知Refresh组件正常实现了完整的下拉刷新功能。

下一篇文章会介绍如何使用系统相机的录像功能来录制视频。