【Android】在 Flutter 中使用 WebView

前言

考虑一种情况，您希望在您的应用程序上显示您网站上已有的一些内容。该内容可以是一些用户协议页面或一些支付页面或其他东西。因此，您可以通过编写整个页面的逻辑来构建整个页面，然后在您的应用程序中使用它。您可以做的第二件事就是在您的应用程序中显示您网站的内容，然后您就可以开始了。最好的部分是，您无需使用某些浏览器应用程序即可打开该网页。这样，您最终将节省在应用程序中为该页面编写代码的时间。

甚至许多应用程序都在使用此功能。例如，每当您在任何应用程序上执行一些支付操作时，您会注意到一件事，在支付过程中，将加载一个网页，您将在那里进行支付。这样做的好处是我们不需要为移动应用程序再次编写支付代码。由于您正在处理金钱，因此最好显示已经测试过的网页并进行交易，而不是再次编写代码。

因此，为了在您的应用程序中显示某些网页，您可以使用webview_flutter由 Flutter 团队构建的一个名为的插件。在这篇博客中，我们将学习如何使用这个插件来显示一个网页。

该webview_flutter插件提供了一个WebView小部件。在 iOS 上，WebView小部件由 a 支持，WKWebView而在 Android 上，WebView小部件由WebView. 所以，让我们学习如何使用它。

设置项目

创建一个新的 Flutter 项目。名称：flutter_webview_example
以下是项目结构。因此，您可以通过创建所需的文件夹（src）和文件（main.dart、app.dart、webview_container.dart）来设置项目。

添加依赖

要使用webview_flutter，您需要添加它的依赖项。因此，在您的pubspec.yaml文件中，添加以下依赖项：

dependencies:
  webview_flutter: ^0.3.20

注意：添加依赖项时，请提供适当的缩进，否则最终会出错。

现在，通过保存文件（如果您使用的是 VS Code）或按下pub get选项（在 Android Studio 中）安装依赖项来安装依赖项。此外，您可以使用 Flutter 从命令行安装软件包：

$ flutter pub get

iOS 的附加设置

要WebView在 iOS 上使用，请打开Info.plist 文件并在文件的元素中添加以下内容：

<dict>
    ...
    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>
    ...

现在，我们完成了依赖部分。让我们继续编码部分。

编码部分

打开main.dart文件并添加以下代码：

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/app.dart';

void main() => runApp(App());

现在，创建一个名为的新文件夹src，并在此文件夹下创建两个文件app.dart，即webview_container.dart. 该app.dart文件将用于向该文件提供要加载的 URL 和 AppBar 的标题webview_container.dart。该webview_container.dart文件负责添加WebView以在应用程序中显示所需的 URL。

以下是该app.dart文件的代码：

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/webview_container.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewContainer('https://blog.mindorks.com', 'MindOrks'),
    );
  }
}

在这里，我们返回一个MaterialApp并向WebViewContainer类提供 URL 和标题。该webview_container.dart文件的代码是：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  final url;
  final title;
  WebViewContainer(this.url, this.title);
  @override
  createState() => _WebViewContainerState(this.url, this.title);
}

class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  var _title;
  final _key = UniqueKey();
  _WebViewContainerState(this._url, this._title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: Column(
        children: [
          Expanded(
            child: WebView(
              key: _key,
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: _url,
            ),
          ),
        ],
      ),
    );
  }
}

在上面的代码中，您可以看到我们正在使用WebView小部件，并且在该小部件内部，我们正在使用initialUrl打开所需的 URL。您还可以javascriptMode使用上面使用的参数在 WebView 中启用或禁用 JavaScript。默认情况下，WebView 中的 JavaScript 被禁用。

除此之外，您可以WebView在WebViewController. WebViewController只要WebView完全构建，就会返回 。因此，通过使用此控制器，您可以执行各种操作，例如加载其他 URL 或获取当前 URL、将 URL 添加到收藏夹等。以下是一个示例 WebViewController：

WebViewController _controller;
WebView(
  initialUrl: 'https://blog.mindorks.com',
  onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
  },
);
//...After some operations:
_controller.loadUrl('https://mindorks.com');

这都是关于WebViews在 Flutter 中使用的。