Flutter中的WebView是什么?
Flutter是一个开源应用程序开发环境,“ webview”是一个打包在手机应用程序中的程序,用于创建所谓的混合应用程序。
利用网页视图允许Flutter app 被开发利用为网络的进步,如HTML,JavaScript中,CSS,等等。但同时又像本机应用程序一样可以放置在应用程序商店中。此后,允许Flutter WebViews Developer使用众所周知的技术。
让我们通过一个例子来了解Flutter WebView。
我们将创建一个简单的Flutter Webview应用程序,在该应用程序中将有一个基本的主屏幕,其中包含一个用于打开URL的按钮。请按照以下步骤操作:
- 收集实现Webview所需的所有必需软件包。
- 导入以前收集的所有必要软件包。
- 要加载Web视图,请实施所需的路由。
- 实施路线后,添加导航。
- 最后,清除并刷新缓存。
请记住以下几点:
- Flutter没有随附默认小部件。但是,您可以在库的帮助下完成此操作。
- 为此,您必须导入分配给webview的包才能在应用程序中使用它。
- 您将从pubspec.yaml文件中获取软件包。添加flutter webview插件,然后单击get程序包。系统将为您导入所有必需的软件包。
以下是简单的flutter Webview应用程序的代码:
创建一个新的Flutter项目
与往常一样,我们将首先建立一个新项目(通过命令行方式)并添加插件:
# New Flutter project
$ flutter create my_webview_project
# Open this up inside of VS Code
$ cd my_webview_project && code .
添加WebView插件
接下来,我们需要webview_flutter
在我们的插件中添加插件pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.14+1
然后,我们需要将适当的值添加到Info.plist
,以选择嵌入的视图预览:
<key>io.flutter.embedded_views_preview</key>
<true/>
这就是所有必要的插件准备工作,我们现在可以在iOS或Android模拟器中打开应用程序。
给我们的项目创建一个Scaffold
现在,我们可以更新main.dart
以包含HomePage
我们稍后将创建的窗口小部件:
import 'package:flutter/material.dart';
import 'package:my_webview_project/home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter WebView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage());
}
}
该HomePage
小部件将仅包含一个FlatButton
带有onPressed
事件的:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {},
),
),
);
}
}
使用WebView插件
让我们创建一个StatelessWidget
命名MyWebView
,我们可以使用一个用户导航到该页面时,我们要显示WebView
的数据:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebView extends StatelessWidget {
final String title;
final String selectedUrl;
final Completer<WebViewController> _controller =
Completer<WebViewController>();
MyWebView({
@required this.title,
@required this.selectedUrl,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: WebView(
initialUrl: selectedUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
));
}
}
如果我们想要导航用户https://www.intoan.com
,我们可以因此使用Navigator.push
与selectedUrl
等于https://www.intoan.com
。让我们FlatButton
在以下内容中更新我们的内容HomePage
:
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => MyWebView(
title: "剩者为王",
selectedUrl: "https://www.intoan.com",
)));
},
),
我们终于得到它了!这是我们WebView
显示剩者为王的主页