Flutter WebView 插件网页空白

Question

我正在使用 flutter Webview 插件，它工作正常，但今天我在显示仅包含 100% 宽度和高度的图像的网页时遇到问题。 因此，flutter Webview 显示一个空白页面。 当我将高度和宽度更改为特定 px（例如 320px 和 220px）时，只有 webview 插件显示图像，否则 100% 网页变为空白。

Answer 1

您可以尝试我的插件flutter_inappbrowser （编辑：它已重命名为flutter_inappwebview ）。

直接在InAppWebView小部件中加载 html 源代码的InAppWebView ，其中img的width和height为100% ：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("InAppWebView")
      ),
      body: Container(
          child: Column(children: <Widget>[
            Expanded(
              child: Container(
                child: InAppWebView(
                  initialData: InAppWebViewInitialData(
                    data: """
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <img src="https://via.placeholder.com/300" alt="placeholder">
    </body>
</html>
                  """
                  ),
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {

                  },
                  onLoadStop: (InAppWebViewController controller, String url) {

                  },
                ),
              ),
            ),
          ]))
    );
  }
}

Flutter WebView 插件网页空白

问题描述

1 个解决方案

解决方案1
0 2019-11-27 23:40:46

Flutter WebView 插件网页空白

问题描述

1 个解决方案

解决方案1 0 2019-11-27 23:40:46

解决方案1
0 2019-11-27 23:40:46