ListView或CustomScrollView中的Flutter WebView-大高度在Android上崩溃 [英] Flutter WebView within ListView or CustomScrollView - Crashes on Android for large heights

问题描述

当前，我们在ScrollView中使用Flutter WebView遇到了问题.我们想显示一个WebView，在图像下方显示用HTML编写的文章内容，以及标题或按钮之类的其他内容.仅仅滚动WebView应该是不可能的.而是应将整个内容一起滚动.

Currently we've got a problem with the Flutter WebView within a ScrollView. We would like to display a WebView with article content written in HTML below an Image and other content like the title or buttons. It shouldn't be possible to just scroll the WebView. Instead, the entire content should be scrolled together.

问题是WebView应该与标题一起滚动.因此，据我所知，WebView需要固定的高度.通过Javascript，可以获得WebView的滚动高度.这在iOS上很好用，但在Android上，当WebView的高度太大时，应用程序崩溃.原因似乎是在Android下，WebView的高度可能仅与屏幕一样大.否则会出现警告消息:

The problem is, that the WebView should scroll together with the header. Therefore the WebView needs a fixed height as far as I know. Via Javascript it's possible to get the scroll height of the WebView. This is great working on iOS, but on Android the App is crashing when the height of the WebView is too large. The reason for this seems to be that under Android the height of the WebView may only be as large as the screen. Otherwise there is a warning message:

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

Creating a virtual display of size: [1080, 11303] may result in problems(https://github.com/flutter/flutter/issues/2897).It is larger than the device screen size: [1080, 1794].

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

Is there a better possibility to use a WebView inside a ListView? We also tried flutter_html, but on some articles we also need JavaScript and this is not supported. On large pages it's also a bit laggy.

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

This is an example App of the current problem. It works for small pages, but not for large ones. The height when it crashes depends on the device. You could for example set the height manually to a value like 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上 获得.

The code is also available on GitHub.

在flutter存储库中，现在还存在一张票证./p>

There is now also a ticket for this issue in the flutter repository.

推荐答案

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

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

Not so perfect workaround:

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

这篇关于ListView或CustomScrollView中的Flutter WebView-大高度在Android上崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！