鸿蒙ArkUI refresh组件的用法（附带示例）

Refresh 是可以进行页面下拉操作并显示刷新动效的容器组件。

Refresh 通过以下参数来设置当前组件是否正在刷新，或者在下拉时自定义刷新的样式：

• refreshing：当前组件是否正在刷新。默认值为false。
• builder：下拉时，自定义刷新样式。

Refresh的相关事件如下：

• onStateChange(callback: (state: RefreshStatus) => void)：当前刷新状态变更时，触发回调。
• state：刷新状态的属性如下：
  • Inactive：默认未下拉。值为 0。
  • Drag：下拉中，下拉距离小于刷新距离。值为 1。
  • OverDrag：下拉中，下拉距离超过刷新距离。值为 2。
  • Refresh：下拉结束，回弹至刷新距离，进入刷新状态。值为 3。
  • Done：刷新结束，返回初始状态（顶部）。值为 4。
• onRefreshing(callback: () => void)：进入刷新状态时触发回调。

Refresh 组件的示例代码如下：

import { router } from '@kit.ArkUI';
import { Navbar as MyNavbar } from '../components/navBar';

interface HistoricalFigure {
  name: string;
  era: string;
  contribution: string;
  keyWorks: string[];
}

@Entry
@Component
struct RefreshCom {
  @State desc: string = '';
  @State isRefreshing: boolean = false;
  @State historicalFigures: HistoricalFigure[] = [
    {
      name: "孔子",
      era: "春秋时期",
      contribution: "儒家学派创始人，提出仁、礼、孝等道德观念，影响深远。",
      keyWorks: ["《论语》"]
    },
    {
      name: "秦始皇",
      era: "秦朝",
      contribution: "中国历史上第一个统一六国的皇帝，推行中央集权制度，统一度量衡。",
      keyWorks: ["兵马俑", "长城"]
    },
    {
      name: "李白",
      era: "唐朝",
      contribution: "被誉为“诗仙”，创作了大量浪漫主义诗歌，代表作有《将进酒》等。",
      keyWorks: ["《将进酒》", "《庐山谣》"]
    },
    {
      name: "王阳明",
      era: "明朝",
      contribution: "心学集大成者，提出“知行合一”学说，影响后世。",
      keyWorks: ["《传习录》"]
    },
    {
      name: "孙中山",
      era: "近现代",
      contribution: "中国民主革命的先行者，提出三民主义，推翻封建帝制。",
      keyWorks: ["《建国方略》"]
    }
  ];

  // 加载页面时接收传递过来的参数
  onPageShow(): void {
    // 获取传递过来的参数对象
    const params = router.getParams() as Record<string, string>;
    // 获取传递的值
    if (params) {
      this.desc = params.desc as string;
      this.title = params.value as string;
    }
  }

  // 自定义刷新样式的组件
  @Builder CustomRefreshCom() {
    Stack() {
      Row() {
        LoadingProgress().height(32)
        Text('加载数据中...').fontSize(16).margin({ left: 20 })
      }.alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .align(Alignment.Center)
    // 设置最小高度约束，保证自定义组件的高度在随刷新区域高度变化时不会低于 minHeight
    .constraintSize({ minHeight: 32 })
  }

  build() {
    Column() {
      MyNavbar({ title: this.title })
      Divider().width('100%').strokeWidth(2).color(Color.Black)

      Row() {
        Text(`组件描述：${this.desc}`)
      }

      Column() {
        Refresh({
          refreshing: $$this.isRefreshing,
          builder: this.CustomRefreshCom()
        }) {
          List() {
            ForEach(this.historicalFigures, (item: HistoricalFigure) => {
              ListItem() {
                Column({ space: 5 }) {
                  Row() {
                    Text(item.name).fontSize(16)
                    Text(item.era).fontSize(16)
                  }
                  Row() {
                    Text(item.contribution).fontSize(16)
                  }
                  ForEach(item.keyWorks, (itemB: string) => {
                    Text(itemB).fontSize(16)
                  })
                }
                .width('70%')
                .backgroundColor('#ffffff')
                .borderRadius(10)
                .margin(10)
              }
            })
          }
          .width('100%')
          .height('100%')
          .alignListItem(ListItemAlign.Center)
          .scrollBar(BarState.Off)
          .onStateChange((refreshStatus: RefreshStatus) => {
            console.log(`打印当前状态：${refreshStatus}`)
          })
          .onRefreshing(() => {
            // 初始化
            setTimeout(() => {
              this.historicalFigures.push({
                name: "武则天",
                era: "唐朝",
                contribution: "中国历史上唯一的女皇帝，推行科举制度，促进文化发展。",
                keyWorks: ["《垂拱集》"]
              })
              this.isRefreshing = false
            }, 2000)
          })
        }
        .backgroundColor('#e5e5e5')
        .width('100%')
        .height('100%')
      }
    }
  }
}

上述示例代码的效果如下图所示：