【带你轻松学】ArkUI滚动类组件-下拉刷新（Refresh）

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 被裁员后，踏上了鸿蒙开发求职之路
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

下拉刷新也是一个很常用的功能，比如我们在浏览新闻时可以下拉刷新最新资讯等，ArkUI开发框架给我们提供了下拉刷新组件：Refresh，它的用法很简单，给需要下拉刷新的组件外包上 Refresh 就可以了。

Refresh定义介绍

interface RefreshInterface {
  (value: { refreshing: boolean; offset?: number | string; friction?: number | string }): RefreshAttribute;
}

• refreshing：控件是否显示刷新动画，默认不显示

• offset：下拉的偏移量，当下拉的距离超过该值时，控件进入刷新状态

• friction：下拉时的阻力系数，数值越大，下拉距离越小

简单样例如下所示：

    @Entry @Component struct Index {

      @State refreshing: boolean = false;

      build() {
        Column({space: 10}) {
          Refresh({ refreshing: this.refreshing }) {
            Text(this.refreshing ? "Refreshing" : "Refreshed")
              .width('100%')
              .fontSize(26)
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor('#aabbcc')
          }
          .width('100%')
          .height(100)

          Row({space: 10}) {
            Button('Start')
              .onClick(() => {
                this.refreshing = true;
              })

            Button('Stop')
              .onClick(() => {
                this.refreshing = false;
              })
          }
        }
        .width('100%')
        .height('100%')
      }
    }

Refresh事件介绍

declare class RefreshAttribute extends CommonMethod<RefreshAttribute> {
  onStateChange(callback: (state: RefreshStatus) => void): RefreshAttribute;
  onRefreshing(callback: () => void): RefreshAttribute;
}

• onStateChange：组件的刷新状态，RefreshStatus 定义了以下 5 种状态：
  • Inactive：组件的起始状态，当手指点击屏幕时触发此状态。
  • Drag：下拉组件但没有到达刷新距离的状态。
  • OverDrag：下拉组件距离超过了刷新距离的状态。
  • Refresh：正在刷新状态。
  • Done：刷新结束。
• onRefreshing：组件进入 Refresh 状态后对外的回调，一般在该回调里进行网络请求等操作。

简单样例如下所示：

    @Entry @Component struct Index {

      @State refreshing: boolean = false;

      build() {
        Column({space: 10}) {
          Refresh({ refreshing: this.refreshing }) {
            Text(this.refreshing ? "Refreshing" : "Refreshed")
              .width('100%')
              .fontSize(26)
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor('#aabbcc')
          }
          .width('100%')
          .height(100)
          .onRefreshing(() => {
            this.refreshing = true;    // 进入刷新状态
            setTimeout(() => {         // 模拟网络请求，3500毫秒后结束刷新
              this.refreshing = false;
            }, 3500)
          })
        }
        .width('100%')
        .height('100%')
      }
    }