#鸿蒙通关秘籍#HarmonyOS Next 下拉刷新组件如何自定义样式？

在 HarmonyOS Next 中可以通过 builder 函数自定义下拉刷新组件的样式。具体实现如下：

/**
 * 下拉刷新-自定义样式
 */
@Entry
@Component
struct PullRefresh {
  @State isRefreshing: boolean = false;
  @State promptText: string = '';
  @State refreshStatus: number = 0;
  @State list: number[] = [];
  @State lastTime: string = this.getDateTime();

  aboutToAppear(): void {
    this.getList();
  }

  getList() {
    setTimeout(() => {
      for (let i = 0; i < 20; i++) {
        this.list.push(i);
      }
      this.isRefreshing = false;
    }, 1000);
  }

  getDateTime() {
    let date = new Date();
    let month = date.getMonth().toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    let hour = date.getHours().toString().padStart(2, '0');
    let minus = date.getMinutes().toString().padStart(2, '0');
    return `${month}-${day} ${hour}:${minus}`;
  }

  @Builder customRefreshComponent() {
    Row({space:15}){
      if(this.refreshStatus===RefreshStatus.Drag){
        Image($r('app.media.arrow_down')).width(20);
      } else if(this.refreshStatus===RefreshStatus.OverDrag){
        Image($r('app.media.arrow_up')).width(20);
      } else if(this.refreshStatus===RefreshStatus.Refresh){
        Image($r('app.media.loading')).width(20).transition(
        TransitionEffect.rotate({ angle: -360 })
          .animation({ iterations: -1, curve: Curve.Linear, duration: 2000 }));
      }
      Column({space:3}){
        Text(this.promptText).fontSize(14).fontColor('#666').lineHeight(21);
        Text(`上次更新 ${this.lastTime}`).fontSize(11).fontColor('#808080');
      }
    }.width('100%').constraintSize({minHeight:50}).justifyContent(FlexAlign.Center);
  }

  build() {
    Refresh({ refreshing: $$this.isRefreshing, builder:this.customRefreshComponent() }) {
      List({space:20}){
        ForEach(this.list, (item: number) => {
          ListItem(){
            Text(item.toString());
          }
          .width('100%')
          .height(90)
          .backgroundColor('#fff')
          .borderRadius(10);
        }, (item: number) => item.toString());
      }
      .height('100%')
      .width('100%')
      .padding(20)
      .backgroundColor('#f2f2f2');
    }
    .refreshOffset(100)
    .onStateChange((state) => {
      this.refreshStatus = state;
      switch (state) {
        case RefreshStatus.Drag:
          this.promptText = '下拉可以刷新';
          break;
        case RefreshStatus.OverDrag:
          this.promptText = '释放立即刷新';
          break;
        case RefreshStatus.Refresh:
          this.promptText = "正在刷新...";
          this.getList();
          break;
        case RefreshStatus.Done:
          this.lastTime = this.getDateTime();
          break;
      }
    });
  }
}

通过定义一个 customRefreshComponent 自定义界面组件，根据不同的刷新状态渲染不同的内容，如箭头、加载动画等。