仅记录学习
首先安装插件
flutter pub add webview_flutter
定义一个实例
final controller = WebViewController();
实例化WebViewController
在initState中
double progressCircle = 0.0;
void initState() {
super.initState();
controller
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(NavigationDelegate(
onProgress: (int progress) {
setState(() {
progressCircle = progress / 100.0; //计算网页加载进度
});
},
onPageStarted: (String url) {},
onPageFinished: (String url) {},
onWebResourceError: (WebResourceError error) {},
onNavigationRequest: (NavigationRequest request) {
return NavigationDecision.navigate;
}))
..loadRequest(Uri.parse('https://pub-web.flutter-io.cn/packages/webview_flutter'));
}
代码解释:
setJavaScriptMode
: 用于设置WebView中JavaScript的模式
有两种模式:disabled
: 禁用JavaScript,WebView中的JavaScript代码不会被执行;unrestricted
: 启用JavaScript,WebView中的JavaScript代码可以自由执行;
setBackgroundColor
: 设置页面背景颜色setNavigationDelegate
: 用于设置导航委托,例如. 这里我们想要一个网页加载进度条,我们可以使用onProgress
: 来计算好加载的进度(当然还有其他作用)onPageStarted
: 开始加载新页面时被调用onPageFinished
: 加载完成页面后被调用onWebResourceError
: 加载资源时发生错误时被调用onNavigationRequest
: 是导航代理的一个回调方法(个人理解:根据要加载的网页的url,在此可进行某些判断,并做出响应)NavigationDecision.prevent
: 阻止导航继续进行NavigationDecision.navigate
: 允许导航继续进行,并在WebView中打开链接startsWith
: 用于检查一个字符串是否以指定的前缀开头endWith
: 用于检查一个字符串是否以指定的后缀结尾
loadRequest
: 要加载的网页链接
在Widget中使用插件,使用WebViewWidget
(这里的controller是上面定义的那个实例)
WebViewWidget(
controller: controller,
)
实现加载的进度条,代码如下:
这里面的progressCircle,就是上面代码中计算进度那里的数据
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'测试',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.blue,
leading: IconButton(
icon: const Icon(
Icons.close,
color: Colors.white,
),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Column(
children: [
Expanded(
child: WebViewWidget(
controller: controller,
),
)
],
));
}
运行结果: