带有 WebView iOS 的 Flutter showModalBottomSheet 无法滚动

我看了一下你的问题，滚动最初不起作用的原因是你的图像在webview上的加载时间。

即使触发了回调 onPageFinished，它似乎也不会加载所有图像，这就是为什么您可以查看 webview 中的大部分文本，但不能查看图像，因此您不能滚动太多。

问题实际上不是来自 webview_flutter 或 inappwebview 插件，而是来自网页本身。 如果你能设法在所有图像加载后触发一些操作，你将能够通过从你的网页向 flutter webview 控制器发送一条消息，让用户知道图像正在加载。

我使用了这篇文章的组合 https://stackoverflow.com/a/11071687/14227800;使用名为 imageLoadCompleter 的 Completer 和来自 webview 的 onConsoleMessage 回调，以： （0）. 定义 imageLoad 完成器。

1. 检测 webview 上所有图像的加载。
2. 发送控制台消息（更喜欢使用 javascript 通道，我只是无法让它与你一起工作）
3. 使用完成器完成
4. 使用 FutureBuilder 和堆栈，在顶部显示 webview + 加载器，直到加载图像。

以下是使用加载器更新的“ShowCardRule”小部件：

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

  @override
  ShowCardRuleState createState() => ShowCardRuleState();
}

class ShowCardRuleState extends State<ShowCardRule> {
  late final WebViewController _controller;
  final Completer imageLoadCompleter = Completer();
  // COMMENT_MATHIS_FOUQUES : Completer that will complete once all images have loaded.

  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = {
    Factory(() => EagerGestureRecognizer())
  };

  final UniqueKey _key = UniqueKey();

  @override
  void initState() {
    super.initState();

    // #docregion platform_features
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);
    // #enddocregion platform_features

    controller
      ..clearCache() // COMMENT_MATHIS_FOUQUES : /!\ TO remove ! Put there for testing purposes.
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            _controller.runJavaScript(
              """ var imgs = document.images,
                  len = imgs.length,
                  counter = 0;
                  console.log(imgs);

                  [].forEach.call( imgs, function( img ) {
                      if(img.complete) {
                        incrementCounter();
                      } else {
                        img.addEventListener( 'load', incrementCounter, false );
                      }
                  } );

                  function incrementCounter() {
                      counter++;
                      if ( counter === len ) {
                          console.log( 'LOADED' );
                      }
                  }""",
            );
            // COMMENT_MATHIS_FOUQUES : This will run on pageFinished, on the _controller, that will have been initialised.

            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('''
Page resource error:
  code: ${error.errorCode}
  description: ${error.description}
  errorType: ${error.errorType}
  isForMainFrame: ${error.isForMainFrame}
          ''');
          },
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              debugPrint('blocking navigation to ${request.url}');
              return NavigationDecision.prevent;
            }
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
          onUrlChange: (UrlChange change) {
            debugPrint('url change to ${change.url}');
          },
        ),
      )
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          print(message);
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      )
      ..setOnConsoleMessage((message) {
        if (message.message == "LOADED") {
          imageLoadCompleter.complete();
        }

        print(message.message);
      }) // COMMENT_MATHIS_FOUQUES : This console message callback can be replaced by proper use of javascriptChannels, it's just that I couldn't make it work quick enough with js channels.
      ..loadRequest(
        Uri.parse(
            'https://image.fangte.com/TestPro/UploadFiles/H5/RichText/index.html?id=BDB1A583206FED5F975D6D89D9CCB8E1'),
      );

    // #docregion platform_features
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }
    // #enddocregion platform_features

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    double webHeight = 400;
    double contentTop = 24;
    double titleHeight = 25;
    double topBlankHeight = MediaQuery.of(context).size.height -
        webHeight -
        titleHeight -
        contentTop;

    return Align(
      alignment: Alignment.topCenter,
      child: Column(children: [
        GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Container(height: topBlankHeight, color: Colors.transparent),
        ),
        Container(
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
            color: Colors.white,
          ),
          padding: EdgeInsets.only(top: contentTop, left: 18, right: 18),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                  height: titleHeight,
                  child: Row(
                    children: [
                      Text('使用须知',
                          style: TextStyle(
                              color: HexColor('#333333'),
                              fontSize: 18,
                              fontWeight: FontWeight.w600)),
                      const Expanded(child: SizedBox()),
                      Container(
                        alignment: Alignment.centerRight,
                        width: 60,
                        child: GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                          },
                        ),
                      )
                    ],
                  )),
              Container(
                height: webHeight,
                padding: const EdgeInsets.only(top: 15),
                child: FutureBuilder(
                    future: imageLoadCompleter
                        .future, // COMMENT_MATHIS_FOUQUES : This will complete when we receive the js message that images have loaded.
                    builder: (context, snapshot) {
                      return Stack(
                        children: [
                          WebViewWidget(
                            key: _key,
                            controller: _controller,
                            gestureRecognizers: gestureRecognizers,
                          ),
                          if (snapshot.connectionState != ConnectionState.done)
                            const Center(
                              child: CircularProgressIndicator
                                  .adaptive(), // COMMENT_MATHIS_FOUQUES : Shows a loader until images are ok, but we can do anything we want.
                              // COMMENT_MATHIS_FOUQUES : The only thing is that the webview still has to be showed, even if images are not loaded.
                            )
                        ],
                      );
                    }),
              )
            ],
          ),
        )
      ]),
    );
  }
}

我确实用适当的标签放置了评论来解释这一点。

希望这会有所帮助