Flutter中Sticky Header与大数据量GridView渲染性能优化问题

问题出在你把普通GridView通过SliverToBoxAdapter塞进了CustomScrollView里——普通GridView是独立的滚动组件，即使禁用了它的滚动，它依然会一次性构建所有2000个子widget，这才导致了卡顿。

要保留吸顶效果同时实现按需构建，直接用SliverGrid替换普通GridView即可，它是CustomScrollView原生支持的sliver组件，会和其他sliver（比如你的吸顶菜单）共享滚动上下文，只构建可见区域的子项。

具体修改步骤 #

1. 移除原来包裹GridView的SliverToBoxAdapter
2. 用SliverGrid.builder代替GridView.builder，直接作为CustomScrollView的slivers子项

示例代码：

CustomScrollView(
  slivers: [
    // 顶部Banner，滚动时消失
    SliverToBoxAdapter(child: myTopBannerWidget),
    // 吸顶菜单
    SliverPersistentHeader(
      pinned: true,
      delegate: _StickyMenuDelegate(myTopStickyMenu),
    ),
    // 按需构建的网格列表
    SliverGrid.builder(
      // 网格布局配置，根据你的需求调整
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 1.2,
      ),
      itemCount: 2000,
      // 仅当子项进入可见区域时才会调用此方法构建widget
      itemBuilder: (context, index) => MySingleWidget(data: yourDataList[index]),
    ),
  ],
)

关键说明 #

• SliverGrid.builder和GridView.builder的用法几乎一致，但它是sliver体系的组件，能和CustomScrollView的滚动系统深度整合，实现懒加载。
• 你的吸顶菜单（不管是用SliverPersistentHeader还是SliverAppBar）都可以保留，它和SliverGrid的滚动行为完全兼容，不会影响吸顶效果。
• 如果MySingleWidget内部有耗时操作（比如图片加载、数据解析），建议在widget内部做缓存或异步处理，进一步优化流畅度。

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