在 SingleChildScrollView 内颤动 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 容器的预期行为对其进行限制，并使其具有响应性，这样屏幕就不会在旧设备中出现任何崩溃或类似情况。

Answer 2

还有另一个插件可以完全满足您的需求

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