控制webview_flutter导航条返回键行为

最新推荐文章于 2025-03-18 15:02:18 发布

原创

最新推荐文章于 2025-03-18 15:02:18 发布 · 4.6k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了在flutter项目中使用webview_flutter插件时，如何自定义导航条并控制内嵌web页面的返回键行为。通过设置webview属性和监听导航条返回按钮的点击事件，实现了点击返回箭头时，选择返回web上一路由或退出webview的功能。此外，还提到了用以实现JS与Flutter通信的JavaScriptChannel，可用于在web端控制路由。

作为一名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.13

标签