SingleChildScrollView中的Flutter InAppWebView

Question

我有一个要求，使卡包含一个网页视图，后面跟着更多的小部件。视图应该类似于this。

我做了这样的实现：

SingleChildScrollView(
  ...
  child: Column(
    children: [
      Container(
        ...
        child: Column(
          children: [
            SizedBox(
              height: _webviewHeightSetInOnLoadStop
              child: InAppWebview(
                ...
              )
            ),
            ...
          )
      ),
      Widget1(),
      Widget2(),
      Widget3(),
    ]

其中_webviewHeightSetInOnLoadStop的设置如下：

  onLoadStop: (controller, url) async {
    final height = await controller.evaluateJavascript(
      source: "document.documentElement.scrollHeight;",
    );
    ...
    setState(() {
      _webviewHeightSetInOnLoadStop = height;
      ...
    });
  }

这个实现的问题是，当webview太大时，Android会崩溃，并显示：

IllegalStateException: Unable to create a layer for InAppWebView, size 960x39192 exceeds max size 16384

据我所知，这是由于webview的高度引起的，这是系统限制的。

所以我希望webview是可滚动的，它的容器有一个固定的高度，比屏幕稍大一点(当需要的时候)，当webview的滚动结束时，在任何一个方向上都会将拖动事件传递给SingleChildScrollView。

Answer 1

还有另一个插件可以做你想要做的事情

webview_flutter_plus: ^0.2.3

试试这段代码

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import 'package:webview_flutter_plus/webview_flutter_plus.dart';

class ImageEditor extends StatefulWidget {
  const ImageEditor({Key? key}) : super(key: key);

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

class _ImageEditorState extends State<ImageEditor> {
  WebViewPlusController? _controller;
  double _height = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height:MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: _height,
                child: WebViewPlus(
                  onWebViewCreated: (controller) {
                    this._controller = controller;      controller.loadUrl('https://pub.dev/packages/webview_flutter_plus');
              },
              onPageFinished: (url) {

                _controller!.getHeight().then((double height) {
                  print("Height:  " + height.toString());
                  setState(() {
                    _height = height;
                  });
                });
              },
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          Container(
            height:200,
            width: MediaQuery.of(context).size.width,
            color: Colors.red,
          ),
          Container(
            height:200,
            width: MediaQuery.of(context).size.width,
            color: Colors.black,
          ),
          Container(
            height:200,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            ),
           ],
          ),
        ),
      ),
    );
  }
}

Answer 2

我认为你应该实现一个自定义的大小，或者只是限制你的webview容器的预期行为，并使其具有响应性，这样屏幕就不会崩溃，或者像旧设备那样。