Flutter如何实现滚动时主内容重叠覆盖头部的效果

不需要额外找第三方插件，Flutter 原生的 Sliver 体系完全可以实现你要的效果，可控性比插件高很多，进阶的状态栏联动、圆角动态调整也能同步实现，不用依赖额外包。

核心重叠交互实现 #

你要的「头部位居内容下层、滚动时内容覆盖头部」的效果，不要直接套默认配置的SliverAppBar，用CustomScrollView + 自定义SliverPersistentHeader就能搞定，核心注意点：

• 把CustomScrollView的clipBehavior设置为Clip.none，避免默认裁切打断重叠效果
• 自定义SliverPersistentHeaderDelegate时把头部设为固定pinned模式，主内容sliver设置和头部等高的顶部外边距，滚动时内容会自然从下往上滑动覆盖在头部上方，和参考效果逻辑完全一致
• 主内容块的顶部默认加圆角，刚滑出来的时候自然和下层头部形成视觉分层

进阶联动效果实现 #

两个进阶效果都可以通过绑定滚动监听实现，不需要额外动画控制器，跟着滚动帧实时计算参数就行，性能非常丝滑：

• 状态栏颜色变更：给滚动视图绑定ScrollController，监听实时滚动偏移，当偏移量达到你设定的阈值时，调用SystemChrome.setSystemUIOverlayStyle切换状态栏明暗样式；偏移在0到阈值区间时，可以按比例做样式透明度过渡，不会有跳变感
• 头部圆角动态调整：同样拿滚动偏移做线性插值计算，比如设定滚动0-100px的区间内，头部底部圆角从20px线性降到0，超过100px后圆角固定为0，把计算出的实时圆角值绑定到头部容器的边框半径属性即可，下滑时会自动反向变化

核心代码参考 #

// 滚动控制器，用来监听偏移
final ScrollController _scrollCtrl = ScrollController();
// 头部固定高度
final double _headerTotalHeight = 280;
// 联动效果触发的滚动阈值
final double _triggerOffset = 100;
// 存实时计算的头部圆角值
double _headerRadius = 0;

@override
void initState() {
  super.initState();
  _scrollCtrl.addListener(() {
    final currentOffset = _scrollCtrl.offset;
    // 计算实时圆角
    _headerRadius = currentOffset >= _triggerOffset 
        ? 0 
        : 20 * (1 - currentOffset / _triggerOffset);
    // 同步切换状态栏样式
    if (currentOffset < _triggerOffset / 2) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    }
    setState(() {});
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      controller: _scrollCtrl,
      clipBehavior: Clip.none,
      slivers: [
        // 固定在下层的头部
        SliverPersistentHeader(
          pinned: true,
          delegate: _HeaderDelegate(
            height: _headerTotalHeight,
            radius: _headerRadius,
            child: Container(color: Colors.blue, /* 头部内容写在这里 */),
          ),
        ),
        // 上层主内容块
        SliverToBoxAdapter(
          child: Container(
            margin: EdgeInsets.only(top: _headerTotalHeight),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            // 首页主内容写在这里
          ),
        ),
        // 后续滚动列表正常编写即可
        SliverList.builder(
          itemBuilder: (context, index) => ListTile(title: Text('列表项$index')),
          itemCount: 50,
        )
      ],
    ),
  );
}

// 自定义头部代理
class _HeaderDelegate extends SliverPersistentHeaderDelegate {
  final double height;
  final double radius;
  final Widget child;
  _HeaderDelegate({required this.height, required this.radius, required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(radius)),
      ),
      clipBehavior: Clip.antiAlias,
      child: child,
    );
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant _HeaderDelegate oldDelegate) {
    return oldDelegate.radius != radius || oldDelegate.child != child;
  }
}

提示：如果你的头部本身有背景图或者渐变，只需要把对应组件替换到头部child位置即可，所有联动逻辑不需要改动。

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