Android在 Flutter 中使用 WebView

Posted 不秃头de程序猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 中使用的。

以上是关于Android在 Flutter 中使用 WebView的主要内容,如果未能解决你的问题,请参考以下文章

在 Android 中集成 Flutter

Flutter-使用 Android XML 作为 Widget

如何使用 Android Studio 在 Flutter 中构建 .apk 和 .ipa?

Flutter:在 Android Studio 中打开 android 模块被禁用

在 Android Studio 中使用 Flutter 进行调试时如何“设置值...”

可以在 Android Studio 中使用 Flutter 开发 IOS 吗?