如何自定义带弧形的SliverAppBar并让内容在其下方滚动？

要实现仅红色区域作为AppBar，滚动内容始终在红色AppBar下方的效果，核心是正确处理Sliver组件的重叠偏移，确保内容区域自动避开Header范围。以下是调整后的实现方案：

1. 修正SliverPersistentHeaderDelegate实现 #

保持原有结构，确保Header高度计算准确：

class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final Widget child;

  SliverAppBarDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    final currentHeight = maxExtent - shrinkOffset;
    final clampedHeight = currentHeight.clamp(minExtent, maxExtent);

    return SizedBox(
      height: clampedHeight,
      child: Stack(
        children: [
          // 红色AppBar核心区域
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: child,
          ),
          // 底部黄色装饰（归属Header）
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 50,
              decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: BorderRadius.only(topLeft: Radius.circular(60.0)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool shouldRebuild(SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

2. 正确组合Sliver组件 #

使用SliverOverlapAbsorber和SliverOverlapInjector处理内容偏移，确保滚动内容从Header底部开始显示：

CustomScrollView(
  slivers: [
    // 记录Header的重叠区域
    SliverOverlapAbsorber(
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
      sliver: SliverPersistentHeader(
        pinned: true, // 保持Header固定在顶部
        delegate: SliverAppBarDelegate(
          minHeight: 120, // 需包含黄色装饰的50px高度
          maxHeight: 220, // 需包含黄色装饰的50px高度
          child: Text("自定义AppBar", style: TextStyle(color: Colors.white, fontSize: 20)),
        ),
      ),
    ),
    // 给内容区域注入偏移，自动避开Header
    SliverOverlapInjector(
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
    ),
    // 滚动内容列表
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(
          padding: EdgeInsets.all(16),
          color: index % 2 == 0 ? Colors.grey[100] : Colors.white,
          child: Text("列表项 $index"),
        ),
        childCount: 50,
      ),
    ),
  ],
)

关键说明 #

• pinned: true：确保Header滚动时始终固定在顶部，不会被内容顶出屏幕。
• SliverOverlapAbsorber + SliverOverlapInjector：自动计算Header当前高度，给内容区域添加对应顶部padding，彻底避免内容与Header重叠。
• Header高度设置：minHeight和maxHeight必须包含黄色装饰的50px，保证Header整体高度准确，内容偏移计算无误。

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