ListView 或 CustomScrollView 中的 Flutter WebView - 在 Android 上因高度而崩溃

Posted 2023-02-23

【中文标题】ListView 或 CustomScrollView 中的 Flutter WebView - 在 Android 上因高度而崩溃

【英文标题】：Flutter WebView within ListView or CustomScrollView - Crashes on Android for large heights

【发布时间】：2020-11-23 07:10:27

【问题描述】：

目前我们在 ScrollView 中遇到了 Flutter WebView 的问题。我们希望在图像和其他内容（如标题或按钮）下方显示带有以 html 编写的文章内容的 WebView。不应该只滚动 WebView。相反，整个内容应该一起滚动。

问题是，WebView 应该与标题一起滚动。因此，据我所知，WebView 需要一个固定的高度。通过 javascript 可以获得 WebView 的滚动高度。这在 ios 上很棒，但在 android 上，当 WebView 的高度太大时，应用程序会崩溃。原因似乎是Android下WebView的高度可能只有屏幕那么大。否则会有警告信息：

创建大小为 [1080, 11303] 的虚拟显示可能会导致 问题（https://github.com/flutter/flutter/issues/2897）。它更大 比设备屏幕尺寸：[1080, 1794]。

在 ListView 中使用 WebView 是否有更好的可能性？我们也尝试过flutter_html，但在某些文章中我们还需要 JavaScript，但不支持。在大页面上它也有点滞后。

这是当前问题的示例应用程序。它适用于小页面，但不适用于大页面。崩溃时的高度取决于设备。例如，您可以手动将高度设置为 13000 之类的值：

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

void main() => runApp(MaterialApp(home: CrashingWebViewExample()));

class CrashingWebViewExample extends StatefulWidget 
  @override
  _CrashingWebViewExampleState createState() => _CrashingWebViewExampleState();


class _CrashingWebViewExampleState extends State<CrashingWebViewExample> 
  WebViewController _webViewController;
  double _webViewHeight = 1;

  @override
  Widget build(BuildContext context) 
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(height: 100, color: Colors.green),
          Container(
            height: _webViewHeight,
            child: WebView(
              initialUrl: 'https://en.wikipedia.org/wiki/Cephalopod_size',
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: (String url) => _onPageFinished(context, url),
              onWebViewCreated: (controller) async 
                _webViewController = controller;
              ,
            ),
          ),
          Container(height: 100, color: Colors.yellow),
        ],
      ),
    );
  

  Future<void> _onPageFinished(BuildContext context, String url) async 
    double newHeight = double.parse(
      await _webViewController.evaluateJavascript("document.documentElement.scrollHeight;"),
    );
    setState(() 
      _webViewHeight = newHeight;
    );
  

代码也可以on GitHub.

flutter 存储库中现在也有针对此问题的 a ticket。

【参考方案1】：

此问题仍然存在： https://github.com/flutter/flutter/issues/34138

不是那么完美的解决方法：

  @override
  Widget build(BuildContext context) 
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(height: 100, color: Colors.green),
          Container(
            height: 500, // or any other height
            width: MediaQuery.of(context).size.width - 150 // need to leave blank space on sides so the whole screen could be scrollable
            child: WebView(
              // this makes inside of webView scrollable
              gestureRecognizers: Set()..add(Factory<OneSequenceGestureRecognizer>(() => EagerGestureRecognizer())),
              initialUrl: 'https://en.wikipedia.org/wiki/Cephalopod_size',
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          Container(height: 100, color: Colors.yellow),
        ],
      ),
    );