Flutter：showModalBottomSheet嵌套ListView时顶部下拉关闭手势处理

当你在showModalBottomSheet里嵌套ListView时，默认情况下ListView会拦截顶部的下拉手势，导致BottomSheet无法通过继续下拉触发关闭。下面是两种实用的解决方法：

方法一：自定义ScrollPhysics（推荐） #

通过自定义滚动物理规则，让ListView在滚动到顶部且继续下拉时，将手势控制权交还给BottomSheet：

首先创建自定义的ScrollPhysics类：

class BottomSheetScrollPhysics extends ClampingScrollPhysics {
  const BottomSheetScrollPhysics({super.parent});

  @override
  BottomSheetScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return BottomSheetScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  bool shouldAcceptUserOffset(ScrollMetrics position) {
    // 当滚动到顶部且用户下拉时，不拦截手势
    if (position.pixels <= position.minScrollExtent && position.outOfRange) {
      return false;
    }
    return super.shouldAcceptUserOffset(position);
  }
}

然后在你的ListView中使用这个Physics：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  constraints: BoxConstraints(
    maxHeight: MediaQuery.of(context).size.height * 0.85,
  ),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(20),
      topLeft: Radius.circular(20),
    ),
  ),
  builder: (context) {
    return ListView.builder(
      controller: scrollController,
      // 应用自定义滚动物理
      physics: const BottomSheetScrollPhysics(),
      itemBuilder: (context, index) => ListTile(
        title: Text(index.toString()),
        onTap: () => Navigator.pop(context),
      ),
    );
  },
);

原理：自定义的BottomSheetScrollPhysics会在ListView滚动到顶部且超出边界（用户继续下拉）时，返回false表示不接受该手势，这样手势就会传递给BottomSheet的拖拽关闭逻辑。

方法二：使用NotificationListener监听滚动通知 #

通过监听ListView的滚动通知，在检测到顶部下拉过度滚动时，主动触发BottomSheet关闭：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  constraints: BoxConstraints(
    maxHeight: MediaQuery.of(context).size.height * 0.85,
  ),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(20),
      topLeft: Radius.circular(20),
    ),
  ),
  builder: (context) {
    return NotificationListener<OverscrollNotification>(
      onNotification: (notification) {
        // 检测到顶部下拉过度滚动
        if (notification.overscroll > 0 && notification.metrics.pixels <= notification.metrics.minScrollExtent) {
          Navigator.pop(context);
          return true;
        }
        return false;
      },
      child: ListView.builder(
        controller: scrollController,
        itemBuilder: (context, index) => ListTile(
          title: Text(index.toString()),
          onTap: () => Navigator.pop(context),
        ),
      ),
    );
  },
);

这种方法通过监听OverscrollNotification，当用户在顶部继续下拉产生过度滚动时，直接关闭BottomSheet。

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