如何在CustomScrollView中实现WebViewWidget的独立滚动？

核心思路是让WebView优先处理自身区域内的滚动手势，当WebView滚动到边界（顶部/底部）时，再将手势传递给外层的页面滚动视图。具体实现步骤如下：

1. 调整页面结构 #

将WebView从原有的CustomScrollView中移出，改用SingleChildScrollView包裹整个页面内容（WebView + 列表），同时给WebView设置固定高度，确保它能独立滚动。

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

通过WebViewWidget的gestureRecognizers参数，让WebView优先捕获垂直滚动手势，避免被外层滚动视图拦截。

完整修改后的代码 #

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

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse('https://flutter.dev'))
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

  @override
  Widget build(BuildContext context) {
    // 生成示例列表项
    final someData = List.generate(100, (index) => index);
    
    return CupertinoPageScaffold(
      child: SingleChildScrollView(
        child: Column(
          children: [
            // 固定高度的WebView，配置手势识别器
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: 400,
              child: WebViewWidget(
                controller: controller,
                // 设置手势识别器，让WebView优先处理垂直滚动
                gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
                  Factory(() => VerticalDragGestureRecognizer()),
                },
              ),
            ),
            // 列表项区域
            CupertinoListSection(
              topMargin: 0,
              children: someData.map((entry) {
                return Text("A number: ${entry}");
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 手势优先级：通过gestureRecognizers给WebView绑定垂直滚动手势识别器，确保WebView优先处理自身区域内的滚动操作。
• 页面结构：SingleChildScrollView确保整个页面可以整体滚动，WebView的固定高度让它成为页面的一个独立区块，既可以自己滚动内容，也能随页面整体上下移动。
• 边界处理：当WebView滚动到顶部后继续向下滑动，手势会自动传递给外层的SingleChildScrollView，带动整个页面滚动；同理，当列表滚动到顶部后向上滑动，页面会整体上移，直到WebView回到顶部，此时继续向上滑动就会触发WebView的内部滚动。

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