如何让包含WebViewWidget的showModalBottomSheet内容可滚动？

问题根源 #

• WebViewWidget本身自带滚动机制，用SingleChildScrollView包裹会导致滚动事件冲突，反而阻断正常滚动逻辑
• 你的布局中WebView已通过Expanded占据弹窗剩余高度，布局结构本身没问题，但可能存在WebView控制器配置缺失，或网页自身CSS限制滚动的情况

修复方案 #

1. 确保WebView控制器启用滚动 #

初始化控制器时明确启用滚动（默认已开启，但显式配置更稳妥）：

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('你的目标URL'))
  ..enableZoom(true); // 可选，支持页面缩放

2. 移除多余的SingleChildScrollView #

直接让WebView自身处理内部内容滚动，不需要额外包裹滚动组件。你的现有布局中，Expanded已经为WebView分配了足够的垂直空间，保持当前结构即可。

3. 处理网页内部的滚动限制 #

如果网页通过CSS设置了overflow: hidden或固定高度，可注入JavaScript解除限制：

// 页面加载完成后执行JS
controller.loadRequest(Uri.parse('你的目标URL')).then((_) {
  controller.runJavaScript('''
    document.body.style.overflow = 'auto';
    document.documentElement.style.overflow = 'auto';
  ''');
});

进阶替代：实现Chrome式可拖拽底部弹窗 #

如果想要更贴近Chrome选中文本时的交互（支持拖拽调整弹窗高度），可以用DraggableScrollableSheet替代原生showModalBottomSheet：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.6, // 初始高度占屏幕60%
      minChildSize: 0.3,    // 最小可拖拽高度
      maxChildSize: 0.9,    // 最大可拖拽高度
      builder: (context, scrollController) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
          ),
          child: Column(
            children: [
              // 顶部拖拽指示器
              Center(
                child: Container(
                  height: 2.0,
                  width: 20.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30.0),
                    color: Colors.grey,
                  ),
                ),
              ),
              const SizedBox(height: 5.0),
              // 标题栏
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    onPressed: goBack,
                    icon: const Icon(CupertinoIcons.arrow_left, size: 30, color: Colors.black),
                  ),
                  Expanded(
                    child: Text(
                      copiedText,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: const TextStyle(fontSize: 18, color: Colors.black),
                    ),
                  ),
                ],
              ),
              // WebView内容区
              Expanded(
                child: WebViewWidget(controller: controller),
              ),
            ],
          ),
        );
      },
    );
  },
);

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