下拉刷新（Refresh）

下拉刷新也是一个很常用的功能，比如我们在浏览新闻时可以下拉刷新最新资讯等，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%')
  }
}

样例运行结果如下图所示：