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

最新推荐文章于 2025-05-30 11:10:46 发布

「已注销」

最新推荐文章于 2025-05-30 11:10:46 发布

阅读量1.4k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos android 组件化开发 Refresh 移动开发鸿蒙开发鸿蒙

本文链接：https://blog.csdn.net/HarmonyOSMN/article/details/140423191

场景一

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

效果图

方案

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

根据refresh的builder自定义刷新样式的组件，图标地方使用了两个组件，一个是没有触发刷新状态时显示的logo，另一个是当进入刷新状态时显示的动态loading，这两个组件的显示与隐藏主要通过visibility属性以及状态变量控制是Visibility.None或者Visibility.Visible。
根据refreshOffset设置触发下拉刷新的距离。
给图标设置一个缩放值，下拉距离发生变化时会触发回调onOffsetChange，当下拉距离小于触发刷新距离时，该缩放值会根据下拉的距离从0开始慢慢变大到1，当下拉距离大于设置的刷新距离时，图标缩放值也从1开始慢慢变小，从而实现图标大小动态变化。
当刷新状态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)
  }.widt