OpenHarmony列表组件怎么刷新

在 OpenHarmony（ArkUI） 中，列表组件（如 List、Grid）的“刷新”本质上就是 数据变化 → UI 自动更新。下面按常见场景给你说明。

一、最基础：用 @State 驱动列表刷新

只要列表数据源是 被 @State 装饰的状态变量，数据变化就会自动刷新。

@Component
struct MyList {
  @State items: string[] = ['A', 'B', 'C']

  build() {
    Column() {
      Button('刷新')
        .onClick(() => {
          // 修改数据，List 自动刷新
          this.items = ['A', 'B', 'C', 'D', 'E']
        })

      List() {
        ForEach(this.items, (item) => {
          ListItem() {
            Text(item)
          }
        })
      }
    }
  }
}

✅ 关键点

• 必须修改 整个数组引用（或触发状态变化）
• ForEach 依赖数据源刷新

二、追加 / 删除数据（常见刷新）

追加数据

this.items.push('F')
this.items = [...this.items]

删除数据

this.items.splice(1, 1)
this.items = [...this.items]

⚠️ 直接 push 有时不会触发刷新，建议重新赋值数组

三、下拉刷新（类似 Android SwipeRefresh）

OpenHarmony 没有内置下拉刷新组件，需要自己实现或使用组件。

简单实现示例

List() {
  // 下拉刷新区域
}
.onScrollIndex((start) => {
  if (start === 0) {
    // 触发刷新
  }
})

或监听滑动：

.onTouch((e) => {
  if (e.type === TouchType.Down) {
    // 判断滑动位置
  }
})

四、使用 @Observed + @ObjectLink（对象列表）

如果列表是对象数组：

@Observed
class Item {
  name: string
  constructor(name: string) {
    this.name = name
  }
}

@Component
struct ItemView {
  @ObjectLink item: Item
  build() {
    Text(this.item.name)
  }
}

@Entry
@Component
struct Page {
  @State list: Item[] = [new Item('A'), new Item('B')]

  build() {
    List() {
      ForEach(this.list, (item) => {
        ListItem() {
          ItemView({ item })
        }
      })
    }
  }
}

这样修改对象属性也能刷新。

五、使用 LazyForEach（大数据量刷新）

class MyDataSource extends BasicDataSource {
  // 实现 getData / totalCount 等
}

List() {
  LazyForEach(this.dataSource, (item) => {
    ListItem() {
      Text(item)
    }
  })
}

刷新时调用：

this.dataSource.notifyDataReload()

六、常见坑总结

✅ 会刷新

• @State 数组重新赋值
• notifyDataReload()
• @ObjectLink 对象属性变化

❌ 不会刷新

• 直接改数组元素不重新赋值
• 使用普通变量

七、你可以告诉我

如果你愿意，可以告诉我：

• 用的是 ArkTS / eTS / JS
• 是 List / Grid / LazyForEach
• 刷新方式（下拉 / 按钮 / 定时）

我可以给你 完整可直接运行的示例。