# 6.5:下拉刷新(Refresh)

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

# 6.5.1:Refresh定义介绍

interface RefreshInterface {
  (value: { refreshing: boolean; offset?: number | string; friction?: number | string }): RefreshAttribute;
}
1
2
3
  • 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%')
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33

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

    6_5_1

# 6.5.2:Refresh事件介绍

declare class RefreshAttribute extends CommonMethod<RefreshAttribute> {
  onStateChange(callback: (state: RefreshStatus) => void): RefreshAttribute;
  onRefreshing(callback: () => void): RefreshAttribute;
}
1
2
3
4
  • 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%')
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

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

    6_5_2
(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2