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

Question

目前，我们在 ScrollView 中的 Flutter WebView 遇到了问题。我们希望在图像下方显示一个 WebView，其中包含以 HTML 编写的文章内容以及标题或按钮等其他内容。不应该只滚动 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;
    });
  }
}

该代码也可在 GitHub 上获取。

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

Answer 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),
        ],
      ),
    );
  }