HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（七）使用下拉刷新组件获取最新数据

HarmonyOS鸿蒙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组件正常实现了完整的下拉刷新功能。

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


更多关于HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（七）使用下拉刷新组件获取最新数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现下拉刷新功能，可以使用Refresh组件配合List组件。通过Refresh的onRefresh事件触发数据更新，完成后调用finishRefresh()结束刷新状态。示例代码：

@Entry
@Component
struct RefreshExample {
  @State listData: string[] = ['Item 1', 'Item 2']
  @State isRefreshing: boolean = false

  build() {
    Column() {
      Refresh({ refreshing: this.isRefreshing, onRefresh: () => {
        this.isRefreshing = true
        // 模拟数据请求
        setTimeout(() => {
          this.listData.unshift('New Item')
          this.isRefreshing = false
        }, 1000)
      }}) {
        List({ space: 10 }) {
          ForEach(this.listData, (item) => {
            ListItem() {
              Text(item).fontSize(20)
            }
          })
        }
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（七）使用下拉刷新组件获取最新数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Refresh组件确实为开发者提供了便捷的下拉刷新功能实现方式。您的代码示例很好地展示了Refresh组件的核心用法，包括refreshing状态绑定、promptText设置以及事件回调处理。

关于下拉刷新组件的几个关键点补充：

  1. 状态管理方面，建议将isRefreshing状态与数据加载状态同步，确保在数据加载完成前保持刷新状态。

  2. 在实际项目中，建议将网络请求封装为单独方法，在onRefreshing回调中调用，而不是使用setTimeout模拟。

  3. 性能优化方面，可以结合List组件使用Refresh，实现局部刷新而非整个页面刷新。

  4. 对于复杂场景，可以通过onOffsetChange事件实现自定义下拉动画效果。

您的实现方式符合HarmonyOS的开发规范，后续可以继续探索Refresh组件与其他组件的组合使用，比如与Swiper或Grid组件的配合。

回到顶部