控制webview_flutter导航条返回键行为

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

作为一名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创建结束
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值