欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

Flutter ListView 在 OpenHarmony 设备上的性能优化实践

前言

在 Flutter 项目开发中，列表页面几乎是最常见的业务场景。
尤其是在 OpenHarmony 平台开发过程中，大量数据渲染、图片加载以及复杂 Item 布局，都会对页面流畅度产生明显影响。

在最近的 Flutter for OpenHarmony 项目中，我负责开发一个商品列表模块。
当列表数据达到一定数量后，页面开始出现：

• 滑动掉帧

• 页面卡顿

• 图片加载延迟

• 内存占用升高

• 页面首次加载缓慢

经过一系列分析与优化后，列表流畅度有了明显提升。
本文将结合实际项目，分享 Flutter ListView 在 OpenHarmony 平台中的性能优化经验。

---

一、项目场景介绍

当前项目主要包括：

• 商品列表

• 新闻流

• 图片瀑布流

• 用户评论列表

技术栈：

• Flutter 3.x

• Dart

• Flutter for OpenHarmony

列表单页数据量：

• 普通列表：100+

• 评论列表：500+

• 图片列表：200+

初始实现方式：

ListView(
  children: dataList.map((e) {
    return ItemWidget(data: e);
  }).toList(),
)

这种写法在数据量较小时没有问题。

但在 OpenHarmony 真机测试中：

列表数据稍大后就会明显卡顿。

---

二、使用 ListView.builder 优化渲染

1. 问题原因

普通 ListView 会一次性创建全部 Widget。

当数据量较大时：

• build 数量过多

• 内存占用升高

• 首次渲染时间增加

---

2. 推荐方案

使用：

ListView.builder

进行懒加载。

优化后代码：

ListView.builder(
  itemCount: dataList.length,
  itemBuilder: (context, index) {

    return ItemWidget(
      data: dataList[index],
    );
  },
)

这样只有当前可见区域的 Item 会被创建。

在 OpenHarmony 上实际测试后：

页面流畅度明显提升。

---

三、减少 Widget 重建

1. 问题现象

在列表滚动过程中：

部分 Item 会频繁 rebuild。

尤其是复杂布局页面。

例如：

build(BuildContext context) {
  print("item rebuild");
}

滑动列表时日志会不断输出。

---

2. const 优化

对于静态 Widget：

推荐使用 const。

const Text("商品标题")

或者：

const SizedBox(height: 10)

这样 Flutter 能够减少重复创建对象。

---

3. 拆分 Item 组件

错误示例：

ListView.builder(
  itemBuilder: (context, index) {

    return Column(
      children: [
        Image.network(image),
        Text(title),
        Text(price),
      ],
    );
  },
)

推荐拆分：

class GoodsItem extends StatelessWidget {

  final GoodsModel data;

  const GoodsItem({
    super.key,
    required this.data,
  });

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

这样能够减少父组件刷新对列表的影响。

---

四、图片加载优化

1. 问题分析

列表中最容易导致卡顿的部分：

通常就是图片加载。

尤其在 OpenHarmony 平台：

大量网络图片同时加载时：

容易出现：

• 图片闪烁

• 滚动掉帧

• 图片白屏

---

2. 使用缓存组件

推荐：

cached_network_image

示例：

CachedNetworkImage(
  imageUrl: data.image,
  fit: BoxFit.cover,
  placeholder: (context, url) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  },
  errorWidget: (context, url, error) {
    return const Icon(Icons.error);
  },
)

相比 Image.network：

优势包括：

• 图片缓存

• 降低重复请求

• 减少页面闪烁

---

五、避免嵌套滚动

1. 常见错误

很多页面会这样写：

SingleChildScrollView(
  child: ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
  ),
)

这种结构在 OpenHarmony 上：

容易导致：

• 性能下降

• build 次数增加

• 滑动卡顿

---

2. 推荐方案

优先使用：

CustomScrollView

或者：

SliverList

示例：

CustomScrollView(
  slivers: [

    SliverToBoxAdapter(
      child: BannerWidget(),
    ),

    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return GoodsItem(
            data: dataList[index],
          );
        },
        childCount: dataList.length,
      ),
    ),
  ],
)

这种方式性能更稳定。

---

六、列表状态保持优化

1. 问题现象

切换 Tab 后：

列表会重新刷新。

导致：

• 滚动位置丢失

• 数据重新请求

• 用户体验较差

---

2. AutomaticKeepAliveClientMixin

解决方案：

class HomeTabState extends State<HomeTab>
    with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {

    super.build(context);

    return ListView.builder(
      itemBuilder: (_, index) {
        return Container();
      },
    );
  }
}

优化后：

列表位置能够正常保存。

---

七、分页加载优化

1. 问题分析

如果一次请求全部数据：

容易导致：

• 首次加载慢

• 页面卡顿

• 内存占用过高

---

2. 分页加载方案

监听滚动：

_scrollController.addListener(() {

  if (_scrollController.position.pixels >=
      _scrollController.position.maxScrollExtent - 200) {

    loadMore();
  }
});

分页请求：

Future loadMore() async {

  page++;

  requestListData(page);
}

这种方式在鸿蒙设备中效果明显更好。

---

八、RepaintBoundary 优化

1. 使用场景

复杂 Item：

例如：

• 图片

• 动画

• 视频缩略图

推荐使用：

RepaintBoundary(
  child: GoodsItem(),
)

作用：

减少不必要的重绘。

---

2. 实际效果

优化后：

• 页面滑动更加稳定

• GPU 占用下降

• 掉帧减少

在 OpenHarmony 真机测试中比较明显。

---

九、性能分析工具实践

在优化过程中，我主要通过：

Flutter DevTools

观察：

• rebuild 次数

• 内存变化

• GPU 占用

• FPS

重点关注：

Performance Overlay

开启方式：

MaterialApp(
  showPerformanceOverlay: true,
)

在鸿蒙设备上：

如果 GPU 曲线持续升高：

说明页面存在重绘问题。

---

十、优化前后效果对比

优化前：

问题	表现
页面滑动	明显卡顿
图片加载	容易闪烁
列表刷新	高频 rebuild
内存占用	较高

优化后：

项目	效果
页面流畅度	明显提升
图片加载	更稳定
内存控制	更合理
列表体验	更顺滑

经过 OpenHarmony 真机测试：

列表性能已经能够满足日常业务需求。

---

十一、总结

本文主要分享了 Flutter ListView 在 OpenHarmony 平台中的性能优化实践，包括：

• ListView.builder 懒加载

• const 优化

• 图片缓存

• 分页加载

• RepaintBoundary

• 状态保持

• SliverList 优化

在 Flutter 跨平台开发过程中：

列表性能优化是非常重要的一环。

尤其是在 OpenHarmony 平台：

更需要关注：

• Widget 重建

• 图片加载

• GPU 重绘

• 内存控制

后续我还会继续研究：

• Flutter 瀑布流性能优化

• 大型列表渲染方案

• Impeller 渲染优化

• Flutter 动画性能调优

希望本文能够帮助正在进行 Flutter for OpenHarmony 开发的同学。