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,
);
}
网友评论