刷新显示状态，希望自定义一个刷新组件，通过刷新状态的不同显示不同字段包括下拉刷新，释放刷新

@Entry 
@Component 
struct RefreshExample { 
  @State isRefreshing: boolean = false 
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] 
  @State status: RefreshStatus = RefreshStatus.Inactive; 
  @State close: RefreshStatus = RefreshStatus.Refresh 
  @State msg: string = '刷新中'; 
  
  @Builder 
  customRefreshComponent() { 
    Stack() { 
      Row() { 
        LoadingProgress().height(32) 
        Text(this.getRefreshText()).fontSize(16).margin({ left: 20 }) 
      } 
      .alignItems(VerticalAlign.Center) 
    }.width("100%").align(Alignment.Center).height(30) 
  } 
  
  getRefreshText(): string { 
    switch (this.status) { 
      case RefreshStatus.Drag: 
        return '下拉刷新' as string 
      case RefreshStatus.OverDrag: 
        return '释放开始刷新'; 
      case RefreshStatus.Refresh: 
        return this.msg; 
      // case RefreshStatus.Done: 
      //   return '刷新结束'; 
      default: 
        return '下拉刷新' as string 
    } 
  } 
  
  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) => { 
        this.status = refreshStatus 
        setTimeout(() => { 
          this.msg='刷新结束' 
        }, 1850) 
        console.info('Refresh onStatueChange state is ' + refreshStatus) 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
        console.log('onRefreshing test') 
      }) 
      .backgroundColor(0x89CFF0) 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.