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

Question

目前我们在 ScrollView 中遇到了 Flutter WebView 的问题。我们希望在图像和其他内容(如标题或按钮)下方显示带有以 HTML 编写的文章内容的 WebView。不应该只滚动 WebView。相反，整个内容应该一起滚动。
问题是，WebView 应该与标题一起滚动。因此，据我所知，WebView 需要一个固定的高度。通过 Javascript 可以获得 WebView 的滚动高度。这在 iOS 上很棒，但在 Android 上，当 WebView 的高度太大时，应用程序会崩溃。原因似乎是Android下WebView的高度可能只有屏幕那么大。否则会有警告信息:

Creating a virtual display of size: [1080, 11303] may result inproblems(https://github.com/flutter/flutter/issues/2897).It is largerthan the device screen size: [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 .
现在还有 a ticket对于 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),
        ],
      ),
    );
  }