HarmonyOS 7 实战开发 03：长列表与动态内容性能优化

李游Leo

3人浏览 · 2026-09-15 11:22:03

李游Leo · 2026-09-15 11:22:03 发布

前两篇把工作台的基础框架和交互逻辑搭起来了，页面能跑了，但一加载真实数据就露馅——列表一滑就卡，掉帧掉到 30 以下，滚动的时候还有白屏闪烁。这篇专门讲长列表性能优化，也是鸿蒙开发里最容易出问题的地方。

我们项目中间内容区有个列表，数据量几百条起步，每条 item 还有封面图、标题、摘要、标签，一开始没做任何优化，在折叠屏上滑起来一顿一顿的。后来花了一周时间调优，才做到 60fps 流畅滚动。

问题出在哪：先定位再优化

不要一上来就改代码。先用 DevEco Studio 的 Profiler 工具看一下，到底是渲染慢、布局慢还是图片加载慢。我们当时用 Performance 面板录了一段滚动过程，发现两个问题：

第一，每次滚动都在重新创建列表项组件，没有复用。第二，每张封面图都是滚动到可视区域才开始加载，首屏渲染慢。

找到问题就好办了。接下来一步步改。

用 List 组件的懒加载和复用

ArkUI 的 List 组件本身是有懒加载机制的，但要用对。一开始我用 ForEach 循环渲染所有 item，结果一上来就把几百个组件都创建了，内存占用很高。

正确的做法是用 LazyForgen 或者直接用 List 的 itemGenerator。HarmonyOS 7 的 List 组件支持自动复用不在可视区域的 item，不需要手动管理。

下面是优化后的列表代码，文件位置在 components/ContentList.ets：

@Component
export struct ContentList {
  @Prop items: ContentItem[];
  onItemClick: (item: ContentItem) => void = () => {};

  build() {
    List({ space: 12 }) {
      ForEach(this.items, (item: ContentItem) => {
        ListItem() {
          ContentCard({ item: item })
        }
        // 关键：设置 key 值，帮助 List 复用组件
      }, (item: ContentItem) => item.id.toString())
    }
    .width('100%')
    .layoutWeight(1)
    .padding({ left: 16, right: 16, top: 12 })
    // 预加载区域：可视区域外 2 个 item 就开始加载
    .cachedCount(2)
  }
}

@Component
struct ContentCard {
  @ObjectLink item: ContentItem;

  build() {
    Row({ space: 12 }) {
      // 封面图：设置宽度高度，避免布局抖动
      Image(this.item.coverUrl)
        .width(80)
        .height(80)
        .borderRadius(8)
        // 图片加载失败占位图
        .alt($r('app.media.placeholder'))

      Column({ space: 6 }) {
        Text(this.item.title)
          .fontSize(15)
          .fontWeight(FontWeight.Medium)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Text(this.item.summary)
          .fontSize(13)
          .fontColor('#666666')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Row({ space: 8 }) {
          ForEach(this.item.tags, (tag: string) => {
            Text(tag)
              .fontSize(11)
              .fontColor('#007aff')
              .padding({ left: 6, right: 6, top: 2, bottom: 2 })
              .backgroundColor('#e8f0fe')
              .borderRadius(4)
          }, (tag: string) => tag)
        }
      }
      .layoutWeight(1)
      .alignItems(ItemAlign.Start)
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#ffffff')
    .borderRadius(12)
  }
}

这里有几个关键点：ForEach 第二个参数传了 item.id 作为 key，这样列表滚动的时候，组件会根据 key 复用，不会每次都创建新的。还有 cachedCount(2)，意思是可视区域外预渲染 2 个 item，滚动的时候不会出现白屏。

长列表懒加载原理图