BottomSheetScaffold底部弹窗内WebView无法滚动的解决方案咨询

1. 配置WebView的手势识别器 #

使用webview_flutter包时，需要显式将垂直滚动手势交给WebView处理，避免被模态弹窗拦截。在WebView的gestureRecognizers参数中添加VerticalDragGestureRecognizer：

import 'package:flutter/gestures.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 模态弹窗内的WebView实现
WebView(
  initialUrl: 'https://example.com',
  gestureRecognizers: {
    Factory<VerticalDragGestureRecognizer>(
      () => VerticalDragGestureRecognizer(),
    ),
  },
  javascriptMode: JavascriptMode.unrestricted,
)

2. 调整模态弹窗的手势设置 #

如果用的是showModalBottomSheet，先禁用其默认拖拽手势，同时允许弹窗适配WebView的高度需求：

// 打开模态弹窗的代码
showModalBottomSheet(
  context: context,
  enableDrag: false, // 关闭弹窗自身的拖拽手势
  isScrollControlled: true, // 允许弹窗占满屏幕高度
  builder: (context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.8,
      child: WebView(
        initialUrl: 'https://example.com',
        gestureRecognizers: {
          Factory<VerticalDragGestureRecognizer>(
            () => VerticalDragGestureRecognizer(),
          ),
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  },
);

3. 自定义Dialog的手势处理 #

如果使用Dialog组件，给Dialog的子组件添加GestureDetector并设置手势穿透，确保WebView能接收手势：

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
      child: SizedBox(
        width: MediaQuery.of(context).size.width * 0.9,
        height: MediaQuery.of(context).size.height * 0.8,
        child: GestureDetector(
          behavior: HitTestBehavior.translucent, // 让手势穿透到WebView
          child: WebView(
            initialUrl: 'https://example.com',
            gestureRecognizers: {
              Factory<VerticalDragGestureRecognizer>(
                () => VerticalDragGestureRecognizer(),
              ),
            },
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ),
      ),
    );
  },
);

核心原理 #

模态弹窗默认会注册全局手势识别器，优先级高于WebView的手势。通过显式给WebView指定手势识别器，并禁用弹窗自身的拖拽手势，可以让WebView优先捕获垂直滚动的手势事件。如果没有弹窗内多滚动组件联动的需求，不需要复杂的嵌套滚动配置，上述方案即可解决问题。

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