简介
在Flutter中没有WebView组件，但是有官方提供的webview_flutter插件。
其实做的事情跟原生封装WebView组件类似。
组件引入
webview_flutter: ^3.0.4
基本组成
- WebView本身，是一个继承自StatefulWidget的有状态的Widget
WebView({
Key key,
this.onWebViewCreated, //WebView创建完成之后的回调
this.initialUrl, // 初始化 URL
this.javascriptMode = JavascriptMode.disabled, //JS执行模式，默认是不调用
this.javascriptChannels, // JS可以调用Flutter 的通道
this.navigationDelegate, // 路由委托，可以使用它执行拦截操作
this.gestureRecognizers, // 手势相关
this.onPageStarted, //开始加载页面回调
this.onPageFinished, // 页面加载完成的回调
this.onWebResourceError, //资源加载失败回调
this.debuggingEnabled = false,
this.gestureNavigationEnabled = false,
this.userAgent,
this.initialMediaPlaybackPolicy =
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
})
- 协助完成各种操作的Controller，封装了各种web操作方法。比如前进，后退，加载等等。
WebViewController._(
this._widget, // 对应的WebView组件
this._webViewPlatformController,
this._javascriptChannelRegistry,
)
封装成页面
与原生差不多，WebView组件封装到一个页面中，整个工程都可以通过调用这个页面来实现H5的加载。
参数可以通过构造参数的形式传入，也可以通过路由参数传入。
头部信息应该由封装的页面容器提供，H5页面只要提供需要显示的标题内容就可以了。
页面的内容，可以通过url加载，也可以直接加载html字符串。
class WebViewPage extends StatefulWidget {
final String? url; // 通过url加载
final String title; // 标题
final String? content; // 通过HTML 字符串加载
/// 协助完成各种操作的Controller
WebViewController _webViewController;
WebViewPage({this.url, this.content, this.title});
@override
_WebViewPage createState() => _WebViewPage();
}
class _WebViewPage extends State<WebViewPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppbar(),
body: _buildBody()
);
}
/// 其他内部方法
}
头部返回按钮重新定义
一种是网页意义的返回，就是网页上的后退，仍然再H5的范围之内
另外一种是原生容器的返回，就是退出这个webview容器页面
_buildAppbar() {
return AppBar(
elevation: 0,
backgroundColor: Color(0xccd0d7),
title: Text(widget.title, style: TextStyle(color: Colors.black),),
centerTitle: true,
leading: GestureDetector(
onTap: () {
widget._webViewController.canGoBack().then((value) {
if (value) {
widget._webViewController.goBack(); // 网页的返回
} else {
Get.back(); // 容器的退出
}
});
},
child: Icon(
Icons.arrow_back_ios_outlined,
size: 17,
),
),
);
}
加载页面
分为url和HTML字符串两种方式
_buildBody() {
return SafeArea(
child: WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
widget._webViewController = webViewController;
if (widget.content != null) {
widget._webViewController
.loadHtmlString(widget.content);
}
},
),
),
}
其他内容
与JS交互
加载过程指示
... ...
