2019独角兽企业重金招聘Python工程师标准>>>
前言:
Flutter项目需要使用WebView来加载网页,在这里我使用的是flutter_inappbrowser插件在APP内部加载网页的。下面我简单总结一下在Flutter中如何使用WebView,主要包括WebView的实现,WebView的超链接用系统浏览器打开网页和WebView的超链接无法加载网页的异常处理。
实现的步骤:
1.在pubspec.yaml添加sdk
dependencies:
...
cupertino_icons: ^0.1.0
flutter_inappbrowser: ^1.1.1
url_launcher: ^4.0.1+1
2.WebView的实现
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
class CommonWebViewPageState extends State {
InAppWebViewController webView;
String url = url; //url的链接
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("标题”)),
body: new InAppWebView(
initialUrl: url,
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
),
);
}
}
3.WebView的超链接用系统浏览器打开网页
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
import 'package:url_launcher/url_launcher.dart';
class CommonWebViewPageState extends State {
InAppWebViewController webView;
String url = url; //url的链接
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("标题”)),
body: InAppWebView(
initialUrl: url,
initialOptions: {
"useShouldOverrideUrlLoading": true, //设置useShouldOverrideUrlLoading为true,否则无效
},
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
shouldOverrideUrlLoading: (InAppWebViewController controller, String url) {
if (url.contains("android_asset")) {
return false;//用webview打开
}
launch(url);
return true; //用浏览器打开
}
)
);
}
}
4.WebView的超链接无法加载网页的异常处理
4.1 在iOS 的info.plist中添加对HTTP的信任。(webview插件在iOS中无法加载HTTP请求,虽然Flutter可以加载HTTP请求,Flutter跟iOS的框架是有区别的,Flutter是独立于UIKit框架的)
NSAppTransportSecurity
NSAllowsArbitraryLoads
4.2 在Android的清单文件中设置networkSecurityConfig属性。(Android9.0之前的系统,使用过程中并未发生异常。 但是Android9.0之后,不支持HTTP,同样也得添加信任)
4.3 在Android的资源文件夹res/xml下面创建network_security_config.xml
5.总结
在Flutter上使用WebView来加载网页的功能已经实现啦,欢迎大家围观。如果有什么疑问的话,可以留言联系我哦!