ArkUI滚动类组件-下拉刷新（Refresh）

原创

小帅聊鸿蒙

发布于 2024-10-07 15:42:13

1780

文章被收录于专栏：鸿蒙开发笔记

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