优化CustomScrollView滚动效果：解决圆角与全局滚动问题

问题描述 #

通过CustomScrollView结合SliverPersistentHeader和SliverList已实现接近目标的滚动效果，但存在两个问题：

• SliverList的背景圆角未正确显示
• 点击屏幕任意区域无法触发全局滚动（仅SliverList区域可滚动）

解决方案 #

1. 修复SliverList背景圆角问题 #

使用SliverClipRRect包裹SliverList，配合背景色设置，确保列表内容被正确裁剪为圆角样式。

2. 实现全局滚动 #

禁用顶部横向ListView的垂直手势拦截，让滚动手势透传给父级CustomScrollView，同时保留横向滚动能力（若需）。

修改后的完整代码 #

const double _kFlexibleFromHeight = 0.2;
const _kMainVerticalPadding = 20.0;
const _kMainHorizontalPadding = 15.0;

class SliverBottomSheet extends StatefulWidget {
  const SliverBottomSheet({Key? key}) : super(key: key);

  @override
  State<SliverBottomSheet> createState() => _SliverBottomSheetState();
}

class _SliverBottomSheetState extends State<SliverBottomSheet> {
  late final ScrollController _controller;
  
  @override
  void initState() {
    _controller = ScrollController()
      ..addListener(() {
        setState(() {});
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            AppColors.mainBluePurple,
            AppColors.bgLightOrange,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.2, 0.43],
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: CustomScrollView(
          controller: _controller,
          physics: const AlwaysScrollableScrollPhysics(),
          slivers: [
            SliverPersistentHeader(
              delegate: _HeaderDelegate(
                controller: _controller,
                height: MediaQuery.of(context).size.height * _kFlexibleFromHeight,
              ),
            ),
            // 圆角裁剪与背景设置
            SliverClipRRect(
              borderRadius: const BorderRadius.vertical(top: Radius.circular(50)),
              child: SliverList(
                delegate: SliverChildBuilderDelegate(
                  (ctx, index) => Container(
                    color: Colors.blue,
                    child: ListTile(
                      title: Text('tile $index'),
                    ),
                  ),
                  childCount: 40,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _HeaderDelegate extends SliverPersistentHeaderDelegate {
  final ScrollController controller;
  final double height;

  _HeaderDelegate({
    required this.controller,
    required this.height,
  });

  double get topPadding => min(
        _kMainVerticalPadding * 2,
        max(
          0,
          _kMainVerticalPadding - (controller.hasClients ? controller.offset / 10 : 0),
        ),
      );

  double get bottomPadding => min(
        _kMainVerticalPadding * 2,
        max(
          0,
          _kMainVerticalPadding + (controller.hasClients ? controller.offset / 10 : 0),
        ),
      );

  double _getOpacity(BuildContext context) {
    double result = 1;
    if (!controller.hasClients) return result;
    result = 1 - (controller.offset / ((MediaQuery.of(context).size.height * 0.2) / 100) / 100);
    return result.clamp(0.0, 1.0);
  }

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return Stack(
      children: [
        Positioned(
          top: shrinkOffset,
          bottom: controller.offset > 0 ? 0 - shrinkOffset : null,
          left: 0,
          right: 0,
          child: Opacity(
            opacity: _getOpacity(context),
            child: SizedBox(
              height: height,
              child: ListView(
                scrollDirection: Axis.horizontal,
                // 禁用垂直手势拦截，让父级接收滚动事件
                physics: const NeverScrollableScrollPhysics(),
                padding: EdgeInsets.only(
                  top: topPadding,
                  bottom: bottomPadding,
                ),
                children: List.generate(
                  5,
                  (index) => Container(
                    margin: const EdgeInsets.all(4),
                    alignment: Alignment.center,
                    width: 100,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white,
                    ),
                    child: Text('Child $index'),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}

关键修改说明 #

1. 圆角修复：用SliverClipRRect替代SliverGroupBuilder，直接对SliverList进行圆角裁剪，同时给列表项统一设置背景色，避免样式冲突。
2. 全局滚动：给顶部横向ListView设置NeverScrollableScrollPhysics，禁止其拦截垂直滚动手势；给CustomScrollView设置AlwaysScrollableScrollPhysics确保滚动状态始终激活。
3. 代码简化：将透明度的边界判断替换为clamp(0.0, 1.0)，逻辑更简洁。

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