Flutter：如何让圆角SliverStickyHeader遮挡下方内容

给你几个可行的解决思路，亲测有效：

方案一：Stack叠加同背景色遮罩层 #

这是最直接的取巧方案，原理是让粘性头部自带一个和Scaffold背景完全一致的底层容器，把下方滚动上来的内容挡住：

• 把原头部组件嵌套进Stack，第一层放一个和Scaffold背景色相同、圆角参数完全一致的Container，第二层放你原本的蓝色圆角头部。
• 代码示例：

SliverStickyHeader(
  header: Stack(
    children: [
      // 底层遮罩：和Scaffold同背景，挡住下方内容
      Container(
        height: 80, // 和头部高度一致
        decoration: BoxDecoration(
          color: Theme.of(context).scaffoldBackgroundColor,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
      ),
      // 你的原头部内容
      Container(
        height: 80,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
        alignment: Alignment.center,
        child: Text("粘性头部", style: TextStyle(color: Colors.white)),
      ),
    ],
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, index) => Container(
        height: 50,
        color: Colors.white,
        alignment: Alignment.center,
        child: Text("列表项 $index"),
      ),
      childCount: 20,
    ),
  ),
)

方案二：动态裁剪下方Sliver内容 #

如果追求更精准的效果，可以监听滚动状态，当头部处于粘性状态时，裁剪掉下方内容被头部覆盖的圆角区域：

1. 定义一个ScrollController监听滚动位置，判断头部是否进入粘性状态。
2. 给下方的Sliver组件套一个ClipPath，使用自定义CustomClipper，根据头部状态生成对应的裁剪路径（圆角缺口）。

• 代码示例（核心部分）：

// 自定义裁剪器
class HeaderMaskClipper extends CustomClipper<Path> {
  final bool isSticky;
  final double headerHeight;
  final double borderRadius;

  HeaderMaskClipper({required this.isSticky, required this.headerHeight, required this.borderRadius});

  @override
  Path getClip(Size size) {
    final path = Path();
    if (isSticky) {
      // 头部粘住时，裁剪出和头部圆角匹配的缺口
      path.moveTo(borderRadius, 0);
      path.quadraticBezierTo(0, 0, 0, borderRadius);
      path.lineTo(0, headerHeight);
      path.lineTo(size.width, headerHeight);
      path.lineTo(size.width, borderRadius);
      path.quadraticBezierTo(size.width, 0, size.width - borderRadius, 0);
    } else {
      // 头部未粘住时，不裁剪
      path.addRect(Offset.zero & size);
    }
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant HeaderMaskClipper oldClipper) {
    return oldClipper.isSticky != isSticky;
  }
}

// 使用时
ScrollController _scrollController = ScrollController();
bool _isHeaderSticky = false;

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    // 根据实际情况判断头部是否进入粘性状态，这里假设头部初始偏移为100
    _isHeaderSticky = _scrollController.offset >= 100;
    setState(() {});
  });
}

// 在CustomScrollView中
SliverStickyHeader(
  header: // 你的原头部组件,
  sliver: ClipPath(
    clipper: HeaderMaskClipper(
      isSticky: _isHeaderSticky,
      headerHeight: 80,
      borderRadius: 20,
    ),
    child: SliverList(...),
  ),
)

方案三：修改SliverStickyHeader的底层实现 #

如果上面的方案都不满足，可以直接修改SliverStickyHeader的源码，在粘性头部的渲染层级上，确保头部始终在内容的最上层，并且添加一个和Scaffold同色的背景遮罩。不过这个方案需要依赖包的源码修改，相对麻烦，不推荐除非前两个方案都不行。

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