6.5：下拉刷新（Refresh）

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

6.5.1：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%')
    }
  }
  

  @Entry @Component class MyView {
  
      @State var refreshing: Bool = false;
  
      func build() {
        Column(10) {
          Refresh(RefreshParams(refreshing: @Binder(this.refreshing))) {
            Text(if (refreshing) {"Refreshing"} else {"Refreshed"})
              .width(100.percent)
              .fontSize(26)
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xaabbcc)
          }
          .width(100.percent)
          .height(100)
  
          Row(10) {
            Button('Start')
              .onClick({ =>
                this.refreshing = true;
              })
  
            Button('Stop')
              .onClick({ =>
                this.refreshing = false;
              })
          }
        }
        .width(100.percent)
        .height(100.percent)
      }
  }
  

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

  

6.5.2：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%')
    }
  }
  

  @Entry @Component class MyView {
  
      @State var refreshing: Bool = false
  
      func build() {
        Column(10) {
          Refresh(RefreshParams(refreshing: this.refreshing)) {
            Text(if (refreshing) {"Refreshing"} else {"Refreshed"})
              .width(100.percent)
              .fontSize(26)
              .height(100.percent)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xaabbcc)
          }
          .width(100.percent)
          .height(100.vp)
          .onRefreshing({ =>
            this.refreshing = true;                      // 进入刷新状态
            Timer.once(3500 * Duration.millisecond) { => // 模拟网络请求，3500毫秒后结束刷新
              this.refreshing = false
            }
          })
        }
        .width(100.percent)
        .height(100.percent)
        }
  }
  

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

  

(adsbygoogle = window.adsbygoogle || []).push({});