Flutter多WebView管理插件flutter_multiple_webview_plugin的使用

NOTICE

这个webview包允许你使用多个WebView实例。

继续Flutter之旅！

Flutter WebView 插件

允许Flutter与原生WebView通信的插件。

警告： WebView不集成在widget树中，它是在Flutter视图之上的原生视图。你将无法看到覆盖在WebView区域上的snackbars、对话框或其他Flutter小部件。

getSafeAcceptedType()函数仅适用于最低SDK为21。 eval()函数仅支持SDK为19或更高的版本来评估JavaScript。

开始使用

要开始使用Flutter，请查看我们的在线文档。

iOS

为了让插件正确工作，你需要向ios/Runner/Info.plist添加新键：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

NSAllowsArbitraryLoadsInWebContent适用于iOS 10及以上版本，而NSAllowsArbitraryLoads适用于iOS 9。

它如何工作

使用Flutter导航全屏启动WebView

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.google.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

可选参数hidden和initialChild可用，以便在页面加载时显示其他内容。 如果将hidden设置为true，它会显示一个默认的CircularProgressIndicator。如果你另外指定了一个Widget作为initialChild，你可以显示任何你喜欢的内容直到页面加载完成。

例如，以下代码将显示一个带有文本“等待…”的红色屏幕：

return new MaterialApp(
  title: 'Flutter WebView Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  routes: {
    '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
    '/widget': (_) => new WebviewScaffold(
      url: selectedUrl,
      appBar: new AppBar(
        title: const Text('Widget webview'),
      ),
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.redAccent,
        child: const Center(
          child: Text('Waiting.....'),
        ),
      ),
    ),
  },
);

FlutterMultipleWebviewPlugin提供了一个单例实例，链接到一个唯一的WebView， 这样你可以在应用程序的任何地方控制WebView

监听事件

final flutterWebviewPlugin = new FlutterMultipleWebviewPlugin();

flutterWebviewPlugin.onUrlChanged.listen((String url) {

});

监听WebView中的滚动事件

final flutterWebviewPlugin = new FlutterMultipleWebviewPlugin();
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) { // 最新的垂直滚动偏移值
  // 在这里比较垂直滚动的变化与旧值
});

flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) { // 最新的水平滚动偏移值
  // 在这里比较水平滚动的变化与旧值
});

注意：请注意iOS和Android之间的滚动距离略有不同。Android的滚动值差异通常比iOS设备大。

隐藏WebView

final flutterWebviewPlugin = new FlutterMultipleWebviewPlugin();

flutterWebviewPlugin.launch(url, hidden: true);

关闭已启动的WebView

flutterWebviewPlugin.close();

在自定义矩形内启动WebView

final flutterWebviewPlugin = new FlutterMultipleWebviewPlugin();

flutterWebviewPlugin.launch(url,
  fullScreen: false,
  rect: new Rect.fromLTWH(
    0.0,
    0.0,
    MediaQuery.of(context).size.width,
    300.0,
  ),
);

向WebView注入自定义代码

使用flutterWebviewPlugin.evalJavaScript(String code)。此函数必须在页面加载完成后运行（即监听onStateChanged事件，状态为finishLoad）。

如果你有大量的JavaScript要嵌入，可以使用资源文件。将资源文件添加到pubspec.yaml，然后像这样调用该函数：

Future<String> loadJS(String name) async {
  var givenJS = rootBundle.loadString('assets/$name.js');
  return givenJS.then((String js) {
    flutterWebViewPlugin.onStateChanged.listen((viewState) async {
      if (viewState.type == WebViewState.finishLoad) {
        flutterWebViewPlugin.evalJavascript(js);
      }
    });
  });
}

访问文件系统中的本地文件

在启动函数或WebView支架中将withLocalUrl选项设置为true以启用本地URL的支持。

注意，在iOS上，还需要将localUrlScope选项设置为目录路径。所有文件（或子文件夹中的文件）都将被允许访问。如果省略，则只有正在打开的本地文件将被允许访问，导致无法加载子资源。此选项在Android上被忽略。

忽略SSL错误

将ignoreSSLErrors选项设置为true以显示来自服务器的内容，这些服务器的证书通常不受WebView信任，如自签名证书。

警告： 不要在生产环境中使用此功能。

注意，在iOS上，你需要向ios/Runner/Info.plist添加新键：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

NSAllowsArbitraryLoadsInWebContent适用于iOS 10及以上版本，而NSAllowsArbitraryLoads适用于iOS 9。 否则，你仍然无法显示来自未受信任证书页面的内容。

你可以通过https://self-signed.badssl.com/测试你的SSL证书忽略是否有效。

WebView事件

• Stream<Null> onDestroy
• Stream<String> onUrlChanged
• Stream<WebViewStateChanged> onStateChanged
• Stream<double> onScrollXChanged
• Stream<double> onScrollYChanged
• Stream<String> onError

不要忘记释放WebView

flutterWebviewPlugin.dispose()

WebView函数

Future<Null> launch(String url, {
    Map<String, String> headers: null,
    Set<JavascriptChannel> javascriptChannels: null,
    bool withJavascript: true,
    bool clearCache: false,
    bool clearCookies: false,
    bool hidden: false,
    bool enableAppScheme: true,
    Rect rect: null,
    String userAgent: null,
    bool withZoom: false,
    bool displayZoomControls: false,
    bool withLocalStorage: true,
    bool withLocalUrl: true,
    String localUrlScope: null,
    bool withOverviewMode: false,
    bool scrollBar: true,
    bool supportMultipleWindows: false,
    bool appCacheEnabled: false,
    bool allowFileURLs: false,
    bool useWideViewPort: false,
    String invalidUrlRegex: null,
    bool geolocationEnabled: false,
    bool debuggingEnabled: false,
    bool ignoreSSLErrors: false,
    bool allowsInlineMediaPlayback: null,
    bool androidOverScrollNever = false,
});

Future<String> evalJavascript(String code);

Future<Map<String, dynamic>> getCookies();

Future<Null> cleanCookies();

Future<Null> resize(Rect rect);

Future<Null> show();

Future<Null> hide();

Future<Null> reloadUrl(String url);

Future<Null> close();

Future<Null> reload();

Future<Null> goBack();

Future<Null> goForward();

Future<Null> stopLoading();

Future<bool> canGoBack();

Future<bool> canGoForward();