ArkUI中的Refresh组件

前言

好久没更了，在跟着视频写项目，这次认识了一个新的组件Refresh
感觉比较重要的几个属性，例如isRefreshing，这个是要用引用传递的，平时传递都是值传递，这里要用引用传递
然后是RefreshStatus，后面的组件是否出现是需要这个判断的，剩下的解释就放在代码中了

效果

代码

@Entry
@Component
struct DemoPage {
//描述是否为刷新状态
  @State isRefreshing:boolean = false
  //记录刷新状态，初始化为未拉伸
  @State refreshState: RefreshStatus = RefreshStatus.Inactive;
  //记录拉取的偏移量
  @State refreshOffset: number = 0;
  //记录是否正在加载更多
  @State isLoading: boolean = false;
  //创建拉取后的显示组件
  @Builder RefreshBuilder() {
    Stack({alignContent:Alignment.Bottom}){
      // 当刷新状态处于下拉中或刷新中状态时Progress组件才存在
      if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done){
        Progress({ value: this.refreshOffset, total: 64, type: ProgressType.Ring })
          .width(32).height(32)
          .style({ status: this.isRefreshing ? ProgressStatus.LOADING : ProgressStatus.PROGRESSING })
          .margin(10)
      }
    }
    .clip(true)
    .height("100%")
    .width("100%")
  }

  build() {
    Column(){
      Refresh({refreshing:$$this.isRefreshing,builder: this.RefreshBuilder()}){
        List({space:6}){
          ForEach(Array.from({length:100}),(index:number)=>{
            ListItem(){
              Text('123').width('100%').height(50).backgroundColor(Color.Pink)
            }

          })
        }
        //这个是在向上拉取的时候触发的
        .onScrollFrameBegin((offset:number,state:ScrollState)=>{
          console.log('offset:' + offset + ' state:' + state)
          return { offsetRemain: offset }
        })
        .scrollBar(BarState.Off)
        // 开启边缘滑动效果
        .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
      }
      //这个是refresh组件的方法，可以将刷新状态和偏移量传给外部
      .onOffsetChange((offset: number) => {
        this.refreshOffset = offset;
      })
      .onStateChange((state: RefreshStatus) => {
        this.refreshState = state;
      })
      // 刷新回调
      .onRefreshing(()=>{
        setTimeout(()=>{
          this.isRefreshing = false
        },2000)
      })
    }
    .width('100%')

  }
}