控制webview_flutter導航條返回鍵行爲

作爲一名web開發人員，也按耐不住來蹭一波flutter的熱度。項目中要求用flutter嵌套web，此處採用webview_flutter 插件【官方文檔】。插件的使用方法不做贅述。此處分享：如何控制內嵌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端控制路由。可以結合該屬性來實現