如何实现多SliverList滚动时头部互相顶出屏幕的效果？

Flutter原生可以通过SliverPersistentHeader配合自定义PersistentHeaderDelegate实现你需要的头部替换效果，无需依赖第三方库，具体实现如下：

• 核心逻辑：不给SliverPersistentHeader设置pinned: true（默认即为false），同时让每个头部的minExtent和maxExtent保持一致（固定高度）。这样滚动到下一个列表的头部时，前一个头部会被逐渐顶出屏幕顶部，新头部直接占据原头部位置，实现无缝替换。

• 示例代码：

CustomScrollView(
  slivers: [
    // 第一组：头部 + 列表项
    SliverPersistentHeader(
      delegate: _FixedHeaderDelegate(title: '第一组列表'),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('第一组项 $index')),
        childCount: 20,
      ),
    ),
    // 第二组：头部 + 列表项
    SliverPersistentHeader(
      delegate: _FixedHeaderDelegate(title: '第二组列表'),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('第二组项 $index')),
        childCount: 20,
      ),
    ),
  ],
);

// 自定义固定高度头部代理
class _FixedHeaderDelegate extends SliverPersistentHeaderDelegate {
  final String title;

  _FixedHeaderDelegate({required this.title});

  // 固定头部高度：min和max设为相同值
  @override
  double get minExtent => 56;
  @override
  double get maxExtent => 56;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.grey[800],
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Text(
        title,
        style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600),
      ),
    );
  }

  @override
  bool shouldRebuild(covariant _FixedHeaderDelegate oldDelegate) {
    return oldDelegate.title != title;
  }
}

• 关键说明：
  1. 之前出现头部堆叠，大概率是给多个SliverPersistentHeader设置了pinned: true，去掉该配置就能避免堆叠问题。
  2. 固定minExtent和maxExtent可以让头部保持统一高度，替换过程视觉更连贯，不会出现收缩/拉伸的过渡效果。
  3. 该方案完全依赖Flutter原生的sliver布局逻辑，不需要额外自定义滚动监听或动画。

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