在HarmonyOS NEXT开发中如何修改下拉刷新时里面的icon，将其替换成文字？

Question

在HarmonyOS NEXT开发中如何修改下拉刷新时里面的icon，将其替换成文字？

Answer 1

下面是隐藏icon&显示文字的demo：

@Entry 
@Component 
struct RefreshExample { 
  @State isRefreshing: boolean = false 
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10'] 
  @Builder 
  customRefreshComponent() 
  { 
    Stack() 
    { 
      Row() 
      { 
        // 隐藏icon 
        // LoadingProgress().height(32) 
        Text("正在刷新...").fontSize(16).margin({left:20}) 
      } 
      .alignItems(VerticalAlign.Center) 
    }.width("100%").align(Alignment.Center) 
  } 
 
  build() { 
    Column() { 
      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) { 
        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) 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
        console.log('onRefreshing test') 
      }) 
      .backgroundColor(0x89CFF0) 
    } 
  } 
}