Flutter中GridView.count与GridView.builder的区别有哪些

核心差异 #

• 渲染逻辑不同：GridView.count属于立即全量渲染，会一次性渲染传入的所有子组件，不管子组件是否在当前屏幕可视区域内；GridView.builder属于懒加载渲染，仅构建并渲染当前可视区域内的子组件，滑出可视区的组件会被回收，后续滑入时再重新构建。
• 入参要求不同：GridView.count要求提前传入完整的children子组件列表，核心配置参数为crossAxisCount（横轴展示的元素数量）；GridView.builder不需要提前生成所有子组件，核心配置参数为itemCount（子项总数量）、itemBuilder（按需构建单个子项的回调函数），横轴数量通过SliverGridDelegateWithFixedCrossAxisCount配置。
• 性能表现不同：子项数量少于20时两者性能几乎无差异，当子项数量超过50、或子项布局复杂度较高时，GridView.count的内存占用会明显升高，出现滑动卡顿的概率远高于GridView.builder。

适用场景 #

• GridView.count适用场景：
  • 子项数量固定且较少的静态网格布局，比如设置页的功能入口、个人中心的快捷操作栏
  • 所有子项数据提前加载完成，不需要后续分页追加的场景
• GridView.builder适用场景：
  • 子项数量多的长网格列表，比如电商商品列表、素材库图片网格、信息流瀑布流
  • 需要分页加载数据的动态网格场景
  • 子项布局复杂、单组件渲染开销大的场景

极简使用示例 #

GridView.count 示例 #

GridView.count(
  crossAxisCount: 2,
  padding: const EdgeInsets.all(8),
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: const [
    Text("功能入口1"),
    Text("功能入口2"),
    Text("功能入口3"),
    Text("功能入口4"),
  ],
)

GridView.builder 示例 #

GridView.builder(
  padding: const EdgeInsets.all(8),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
  ),
  itemCount: 200, // 总共有200个商品项
  itemBuilder: (context, index) {
    // 仅在子项进入可视区时才会执行构建逻辑
    return Text("商品项$index");
  },
)

内容的提问来源于stack exchange，提问作者Jibran Abdul Jabbar