关于OpenHarmony中的Refresh使用

关于OpenHarmony中的Refresh使用

Refresh 刷新组件是OpenHarmony在API 8以后推出的组件，仅适用于API 8之后的项目情况
该刷新组件可以帮助页面在进行缓存加载数据的间隔提示正在刷新状态的过渡状态

对应官方文档链接：https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
组件应用语句 ：Refresh(value: { refreshing: boolean, offset?: number | string , friction?: number | string, builder?: Custombuilder})

该组件对应接口有：
refreshing 双向绑定，是否刷新状态变量，该参数必填
offset 下拉起点距离组件顶部的距离。选填
friction 下拉摩擦系数，选填，从API version 11开始废弃。
builder 自定义下拉刷新的样式，选填

该组件也同时提供了两个事件回调

onStateChange(callback: (state: RefreshStatus) => void) //刷新状态改变
onRefreshing(callback: () => void)//进入刷新状态

Refresh作为组件可以包含子组件，将该区域定为待刷新区域，在官方给的例子中，该组件功能是提供下拉刷新的方式进行页面

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, offset: 120}) {
        Text('Pull Down and refresh: ')
          .fontSize(30)
          .margin(10)
      }
    }
  }
}

由于双向绑定$$this.isRefreshing，所以刷新状态由该参数控制，触发刷新后，可以在需要的位置进行刷新关闭，我们可以利用官方公开的两个回调接口进行设置最长刷新的时间限制来触发关闭刷新状态

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State counter: number = 0

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, offset: 120 }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => { //状态改变回调
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => { //触发刷新回调
        setTimeout(() => { //设置定时器
          this.counter++
          this.isRefreshing = false //关闭刷新效果
        }, 1000)
      })
    }
  }
}

但是Refresh组件目前只是提供了下拉式刷新方式，如果需要进行滚动式后续刷新加载可以进行自定义的方式，比如在item项的末尾塞入一个刷新效果，这样可以使用户滚动到数组末端并且数据未能正常加载时，可以显示加载中的提示。
以下是使用了Grid组件进行了数据的现实，在数据的末端可以塞入一个加载中的GridItem效果：

@Entry
@Component
struct GridRefreshLoadExample {
  @State arr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State refreshing: boolean = false;

  build() {
    Refresh({refreshing: this.refreshing}) {
      Grid() {
        ForEach(this.arr, (item: number) => {
          GridItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
        GridItem() { //添加滚动页尾刷新效果
          Row() {
            LoadingProgress().height(32).width(48)
            Text("加载中")
          }
        }.width('100%').height(64)
        .columnStart(0)
        .columnEnd(1)
      }
      .columnsTemplate("1fr")
      .scrollBar(BarState.On)
    }
  }
}

这种方式下由于进行了Foreach循环渲染的效果，所以可以对数组中array进行push数据的方式，重新渲染并加载数据来达到局部刷新页面的效果，请看以下demo效果：

@Entry
@Component
struct GridRefreshLoadExample {
  @State arr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State refreshing: boolean = false;
  build() {
    Refresh({refreshing: this.refreshing}) {
      Grid() {
        ForEach(this.arr, (item: number) => {
          GridItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
        GridItem() {
          Row() {
            LoadingProgress().height(32).width(48)
            Text("加载中")
          } //加载效果
        }.width('100%').height(64)
        .columnStart(0)
        .columnEnd(1)
      }
      .onScrollIndex((start: number, end: number) => {
        if (end >= this.arr.length) {
          setTimeout(() => {
            for (let i = 0; i < 6; i++) {
              this.arr.push(this.arr.length) //添加数据
            }
          }, 1000)
        }
        setTimeout(() => {
          this.refreshing = false;
        }, 1000) //定时取消加载中效果
      })
      .columnsTemplate("1fr")
      .scrollBar(BarState.On)
    }
  }
}

Refresh的组件相当于为了一些博客以及商店页面的数据加载场景提供了过渡动画，让页面的刷新可以显得不会突兀。