HarmonyOS7 LazyForEach 适合什么场景：别把它当高级版 ForEach

TimerHero

322人浏览 · 2026-07-17 08:38:21

TimerHero · 2026-07-17 08:38:21 发布

一张手绘笔记风格的框架图，主题是“HarmonyOS7 中 LazyForEach 适合什么场景”。

文章目录

前言

LazyForEach 不是“更高级的 ForEach”。

如果页面只有十几个固定入口，普通 ForEach 更直接，代码也更好读。LazyForEach 适合的是另一类场景：数据量比较大，列表项比较重，并且数据源需要主动通知列表增删改。

我看到过一种误用：列表只有十来项，也硬套 LazyForEach，最后为了维护数据源写了一堆样板代码。页面没变快，代码先变复杂了。

一张手绘对比笔记图，主题是“普通 ForEach 和 LazyForEach 的区别”。用左右双栏对

性能优化要有场景，不要把每个列表都写成最复杂的版本。

为什么我不建议一上来就用它

LazyForEach 最容易被误用的地方，就是把它当成“更高级的 ForEach”。新手看到这名字，很容易下意识觉得它更专业、更适合大列表，于是页面明明只有十来条数据，也跟着套上去。

问题在于，LazyForEach 不是白送性能，它会把你带进数据源、监听通知、key 稳定性这些额外责任里。页面如果根本不需要这些能力，代码只会先复杂起来。

所以我更喜欢先问一句：这页到底是“普通渲染”还是“持续变化的长列表”。把这个问题想明白，再选组件就不容易跑偏。

一张手绘流程图，帮助判断什么时候才考虑使用 LazyForEach。流程从顶部开始：1）这是不是少量

什么时候才考虑 LazyForEach

可以先用这张表判断：

场景	更适合的写法	原因
少量固定入口	`ForEach`	简单、直观、维护成本低
上百条订单流水	`LazyForEach`	按需创建列表项，滚动更稳
聊天记录、文件列表	`LazyForEach`	数据可能持续追加或局部变化
频繁插入删除	看数据源封装	需要正确通知列表变化

这篇用订单流水做例子。订单记录会不断增加，列表项又有金额、标题、时间等字段，用 LazyForEach + IDataSource 演示比较合适。

先判断数据规模和更新方式，再决定是否使用 LazyForEach。为了炫技而上懒加载，通常会把简单页面写复杂。

先把列表变化方式想清楚

决定要不要上 LazyForEach 时，我通常先不看 API，而是先看这份列表会怎么变化。它是首屏一次性给完，还是会一页页追加；只是静态展示，还是会插入、删除、局部刷新；列表项是简单文本，还是一条条都带图片、金额、状态这些更重的内容。

像订单流水这种场景，我会先把“后面还会继续追加数据”“用户会来回滚动旧记录”“以后大概率要接分页接口”想明白。只要这几个条件开始出现，LazyForEach + IDataSource 就不再只是语法选择，而是在给后面的增量更新留位置。

对小白来说，最有价值的不是记住 LazyForEach 这个名字，而是养成先判断列表变化方式、再决定复杂度的习惯。

完整 ArkUI 示例

示例里有两个核心角色：OrderDataSource 管数据和通知，OrderLazyListPage 管页面展示和追加动作。

class OrderRecord {
  id: number
  title: string
  amount: string
  time: string

  constructor(id: number, title: string, amount: string, time: string) {
    this.id = id
    this.title = title
    this.amount = amount
    this.time = time
  }
}

class OrderDataSource implements IDataSource {
  private records: OrderRecord[] = []
  private listener: DataChangeListener | undefined

  constructor(records: OrderRecord[]) {
    this.records = records
  }

  totalCount(): number {
    return this.records.length
  }

  getData(index: number): OrderRecord {
    return this.records[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener(): void {
    this.listener = undefined
  }

  push(record: OrderRecord): void {
    this.records.push(record)
    this.listener?.onDataAdd(this.records.length - 1)
  }
}

@Entry
@Component
struct OrderLazyListPage {
  private source: OrderDataSource = new OrderDataSource([
    new OrderRecord(1, '购买开发者课程', '-¥99.00', '今天 10:20'),
    new OrderRecord(2, '会员退款', '+¥19.00', '昨天 18:02'),
    new OrderRecord(3, '模板市场收入', '+¥128.00', '周一 09:12')
  ])
  private nextId: number = 4

  build() {
    Column({ space: 12 }) {
      Row() {
        Text('订单流水')
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button('追加一条')
          .height(34)
          .onClick(() => {
            this.source.push(new OrderRecord(this.nextId, `新增流水 ${this.nextId}`, '-¥12.00', '刚刚'))
            this.nextId += 1
          })
      }
      .width('100%')

      List({ space: 8 }) {
        LazyForEach(this.source, (item: OrderRecord) => {
          ListItem() {
            Row() {
              Column({ space: 5 }) {
                Text(item.title).fontSize(16).fontWeight(FontWeight.Medium)
                Text(item.time).fontSize(12).fontColor('#888888')
              }
              .alignItems(HorizontalAlign.Start)
              .layoutWeight(1)
              Text(item.amount)
                .fontSize(16)
                .fontColor(item.amount.startsWith('+') ? '#00897B' : '#D32F2F')
            }
            .padding(14)
            .backgroundColor(Color.White)
            .borderRadius(10)
          }
        }, (item: OrderRecord) => item.id.toString())
      }
      .layoutWeight(1)
    }
    .padding(16)
    .backgroundColor('#F5F7FA')
  }
}