webview_flutter 回退、返回
flutter APP嵌入js商城,该商城无返回按钮。webview使用官方webview_flutter。根据网页端路由判断是否可以返回,添加子定义导航栏实现返回功能,类似在微信中打开网页的回退栏。
主要代码:
WebView(
initialUrl:this.path,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController controller) {
_controller = controller;
},
onPageFinished: (String url) {
_controller.canGoBack().then((value) {
setState(() {
canGoBack = value;//设置状态,在其他地方使用,例如导航栏自定义返回按钮
});
});
}
)
下边是我自定的导航栏,根据canGoBack(这个状态可以自由控制,不一定等于_controller.canGoBack()的状态)判断是否可以显示,和返回。
Widget navWidget() {
return canGoBack ==true
?Container(
height:canGoBack ==true ?46 :0,
color: Colors.white,
child:Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
CupertinoButton(
padding: EdgeInsets.zero,
child: (canGoBack ==true)
?Image(
image:AssetImage('assets/images/back.png'),
)
:Container(),
onPressed: () {
_controller.canGoBack().then((value) {
if (value) {
_controller.goBack();
}else {
//不可返回
}
});
}),
],
),
)
:Container(
height:0,
);
}