当前位置：首页 > article >正文

鸿蒙Harmony-Refresh 容器组件

article 2025/2/6 17:38:29

鸿蒙Harmony-Refresh 容器组件笔记

1. 组件概述

作用：用于实现下拉刷新功能，通常包裹可滚动组件（如 Scroll/List/Grid），提供数据刷新的交互体验。
核心功能：监听下拉动作、触发刷新状态、自定义刷新 UI。

2. 导入方式

import { Refresh } from '@ohos.arkui.advanced'

3. 子组件

必须包含且只能包含一个子组件（通常为 Scroll/List/Grid 等滚动容器）。

示例：

Refresh() {
  Scroll() {
    // 内容区域
  }
}

4. 关键属性

属性名	类型	说明
`refreshing`	`boolean`	控制刷新状态（`true` 表示正在刷新，`false` 结束刷新）
`offset`	`number	string`
`friction`	`number	string`
`disabled`	`boolean`	是否禁用下拉刷新功能（默认 `false`）

5. 事件说明

事件名	触发时机	回调参数
`onStateChange(callback: (state: RefreshStatus) => void)`	下拉状态变化时触发	`state` 表示当前状态： - `Inactive`（未激活） - `Drag`（拖动中） - `OverDrag`（超过阈值） - `Refresh`（刷新中） - `Done`（刷新完成）
`onRefreshing(callback: () => void)`	用户下拉超过阈值松手后触发	无

6. 使用示例

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false

  build() {
    Column() {
      Refresh({ refreshing: this.isRefreshing, offset: 120 }) {
        Scroll() {
          // 滚动内容
        }
      }
      .onStateChange((state: RefreshStatus) => {
        console.log(`Refresh state: ${state}`)
      })
      .onRefreshing(() => {
        // 模拟异步加载
        setTimeout(() => {
          this.isRefreshing = false // 结束刷新
        }, 2000)
      })
    }
  }
}