Flutter网页视图展示插件flutter_webview_plugin_android_v2的使用

Flutter网页视图展示插件flutter_webview_plugin_android_v2的使用

一个允许Flutter与原生WebView进行通信的插件。

注意： WebView并未集成在小部件树中，而是在Flutter视图之上的原生视图。因此，你将无法看到可能与WebView占据的屏幕区域重叠的Snackbar、对话框或其他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，你可以自定义等待页面加载时显示的内容。

例如，以下代码将在页面加载前显示一个带有文本 “Waiting…” 的红色背景屏幕。

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

FlutterWebviewPlugin 提供了一个单例实例，该实例与唯一的WebView相关联，因此你可以在应用的任何地方控制WebView。

监听事件：

final flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.onUrlChanged.listen((String url) {

});

监听WebView中的滚动事件

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

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

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

隐藏WebView

final flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.launch(url, hidden: true);

关闭已启动的WebView

flutterWebviewPlugin.close();

在自定义矩形区域内显示WebView

final flutterWebviewPlugin = new FlutterWebviewPlugin();

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。

你可以通过测试是否可以访问不信任SSL证书的页面来验证其是否正常工作，例如通过 https://self-signed.badssl.com/ 进行测试。

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

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();

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin_android_v2.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _flutterWebviewPlugin = FlutterWebviewPlugin();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (_) => FutureBuilder<void>(
            future: _flutterWebviewPlugin.hide(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  _flutterWebviewPlugin.show();
                });
              }
              return WebviewScaffold(
                url: 'https://www.google.com',
                appBar: AppBar(
                  title: const Text('Plugin Example App'),
                ),
                withZoom: true,
                withLocalStorage: true,
                hidden: true,
                initialChild: Container(
                  color: Colors.lightBlueAccent,
                  child: const Center(
                    child: CircularProgressIndicator(color: Colors.white),
                  ),
                ),
              );
            }),
      },
    );
  }
}