Flutter GridView滚动时如何禁止销毁离屏Widget组件

GridView.builder是Flutter提供的懒加载列表组件，默认设计逻辑就是回收离屏可视区域的item组件、销毁对应状态，以此控制内存占用，这是滚动出屏后卡片被销毁的核心原因。如果需要保留离屏组件不被销毁，可根据你的业务场景选择以下方案：

• 方案1：通过AutomaticKeepAliveClientMixin按需保活（推荐）
  这是最灵活、内存表现最好的方案，不需要修改GridView的构建逻辑，只需要调整自定义卡片CategoryCard的State实现即可：

  1. 给CategoryCard对应的State类混入AutomaticKeepAliveClientMixin
  2. 重写wantKeepAlive getter，返回值设为true开启保活
  3. 在State的build方法首行调用super.build(context)，保证保活逻辑生效
     对应代码示例：

  class _CategoryCardState extends State<CategoryCard> with AutomaticKeepAliveClientMixin {
    @override
    bool get wantKeepAlive => true;
  
    @override
    Widget build(BuildContext context) {
      super.build(context); // 该调用必须保留，否则保活不生效
      // 原有卡片的UI构建逻辑保持不变
      return Card(
        // 原有的图文渲染逻辑
      );
    }
  }
  

  你可以根据业务逻辑动态控制wantKeepAlive的返回值，只给需要保留状态的卡片开启保活，避免不必要的内存开销。

• 方案2：替换为非懒加载模式的GridView（适合卡片总量少的场景）
  如果你的分类卡片总数量不多（一般建议少于30个），可以直接使用GridView默认构造函数传入所有子组件，这种构造方式不会做懒加载回收，所有卡片会在首次加载时全部渲染，滚动时也不会被销毁。
  修改后的代码如下：

  Expanded(
    child: GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
      ),
      children: categories
          .map((item) => CategoryCard(category: item))
          .toList(),
    ),
  )
  

  该方案不适合卡片数量多的场景，全量渲染大量组件会导致页面初始加载变慢、内存占用过高。

• 方案3：调大列表缓存范围
  可滚动组件默认有一个缓存区域，落在缓存区域内的组件不会被回收，你可以通过设置cacheExtent参数把缓存范围调大，让所有卡片都落在缓存区域内避免被销毁：

  Expanded(
    child: GridView.builder(
      cacheExtent: 2000, // 可根据列表实际总高度调整为足够大的数值，单位为逻辑像素
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
      ),
      itemCount: categories.length,
      itemBuilder: (context, index) => CategoryCard(
        category: categories[index],
      ),
    ),
  ),
  

  注意：cacheExtent设置过大同样会提升初始渲染的性能开销，大数据量场景不推荐使用。

内容的提问来源于stack exchange，提问作者Abhay