控制webview_flutter导航条返回键行为

﹏ヽ暗。殇╰゛Y 2022-01-29 10:25 486阅读 0赞

作为一名web开发人员，也按耐不住来蹭一波`flutter`的热度。项目中要求用flutter嵌套web，此处采用`webview_flutter` 插件【[官方文档][Link 1]】。插件的使用方法不做赘述。此处分享：如何控制内嵌web的返回键行为，**返回web上一路由** or **退出webview** ?

**1. 自制导航条**

由于`webview_flutter`没有封装导航条，首先我们需要自制一个带有返回箭头的导航条。

return new Scaffold(
      appBar: new AppBar(
        title: Text("可惜不是我的猪亚敏"),
        leading: new IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => {},
        ),
      ),
      body: new WebView(...);

**2. 配置webview属性**

配置需要加载的webview属性。想要控制路由行为，最重要的一步就将定义的私有量`_controller`指向`webViewController`。后面通过`_controller`控制路由行为

body: new WebView(
    	onWebViewCreated: (WebViewController webViewController) {
    		_controller = webViewController;
    	},	// webview创建结束的回调。此处回调中将_controller指向webview
    	initialUrl: "192.168.94.132:10001",	// 加载的URL链接
    	javascriptMode: JavascriptMode.unrestricted, // 是否允许js执行
    	javascriptChannels: [
    		_alertJavascriptChannel(context),
    	].toSet(), // JS和Flutter通信的渠道
    ),

**3. 设置导航条箭头点击事件**

点击导航栏返回按钮，是返回web上一路由还是退出webview，主要用到`WebViewController`的`canGoBack`与`goBack`函数。  
可以理解为 `canGoBack` ？`goBack` ：`exit`

leading: new IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        _controller.canGoBack().then((value) {
          if (value) {
            _controller.goBack();
          } else {
            return Navigator.pop(context);
          }
        });
      },
    ),

**4. 扩展**  
上面有写到`javascriptChannels` ，该属性用于配置JS和Flutter通信渠道。如果想在web端控制路由。可以结合该属性来实现

[Link 1]: https://pub.flutter-io.cn/packages/webview_flutter