HarmonyOS之Refresh

1. Refresh支持单个子组件，跟随手势下拉而下移

2. Refresh(value: RefreshOptions) ，RefreshOptions说明

   • refreshing，是否正在刷新，支持$$双向绑定
   • builder， 自定义下拉时，刷新样式
   • promptText，设置组件底部显示的用户自定义文本

3. 事件：

   • onStateChange(callback: (state: RefreshStatus) => void)，当前刷新状态变更时，触发回调。
   • onRefreshing(callback: () => void)，进入刷新状态时触发回调。
   • onOffsetChange(callback: Callback<number>)，下拉距离发生变化时触发回调。

4. 示例

使用默认样式：

// xxx.ets
@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing}) {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('100%')
        .height('100%')
        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
        .scrollBar(BarState.Off)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onOffsetChange((value: number) => {
        console.info('Refresh onOffsetChange offset:' + value)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
    }
  }
}

自定义样式：

@Builder
  customRefreshComponent() {
    Column() {
      Image('https://wimg.588ku.com/gif320/24/07/09/8d909a57738a4eb5b9e92858d10dcb05.gif').width(32).height(32)
        .objectFit(ImageFit.Cover)
      Text(this.refreshText).fontSize(10).margin({ top: 5, bottom: 10 }).fontColor(Color.Gray)
    }.width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .visibility((this
      .refreshState != 0 && this.refreshState != 4) ? Visibility.Visible : Visibility.Hidden)

  }
  build() {

    Column() {
      Refresh({ refreshing: $$this.refresh, builder: this.customRefreshComponent() }) {
        this.contentView()
      }
      .refreshOffset(64)
      .pullToRefresh(true)
      .onRefreshing(() => {
        setTimeout(() => {
          this.refresh = false
        }, 2000)
      })
      .onStateChange((state: number) => {
        console.info(TAG + 'state: ' + state)
        this.refreshState = state;
        switch (state) {
          case 0:
            this.refreshText = '';
            break;
          case 1:
            this.refreshText = '下拉刷新';
            break;
          case 2:
            this.refreshText = '松开刷新';
            break;
          case 3:
            this.refreshText = '刷新中';
            break;
          case 4:
            this.refreshText = '刷新完成';
            break;
        }
      })
    }.width('100%')
    .height('100%')
    .padding({ top: 3 })
  }