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的主要内容,如果未能解决你的问题,请参考以下文章
Flutter-使用 Android XML 作为 Widget
如何使用 Android Studio 在 Flutter 中构建 .apk 和 .ipa?
Flutter:在 Android Studio 中打开 android 模块被禁用