webview_flutter 回退、返回

2019-12-19  本文已影响0人  小柴2011

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,

);

}

上一篇下一篇

猜你喜欢

热点阅读