需求背景是仿iOS全局页面向右滑动可以返回上一页，若用户处于PageView，则在滑动到首个Tab后继续向右滑动也能返回上一页。
普通页面
CupertinoPageRoute
其实Flutter有提供一套仿iOS风格组件的Cupertino库，其中CupertinoPageRoute就是想要的左右滑动路由切换效果，在屏幕左侧边缘可以拖动页面从而返回到上一页。
代码改动量也很小，在路由管理器中统一修改下路由方式。
/// 原写法，均不支持右滑返回
return PageRouteBuilder(
settings: settings,
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return page;
},
);
/// 现写法，iPhone&aPhone都支持右滑返回（如果是MaterialPageRoute仅iPhone支持右滑返回）
return CupertinoPageRoute(
settings: settings,
builder: (BuildContext context) {
return page;
},
);
CupertinoPageRoute失效
在自测时发现有个很普通的页面无法右滑返回，那这要先了解下CupertinoPageRoute不支持哪些情况，通过源码可知，当页面处于首屏、设置WillPopScope不支持手势返回、属于全屏对话框、正在做入栈动画、正在做出栈动画、路由正在被用户操作这几类时，无法pop。
static bool _isPopGestureEnabled<T>(PageRoute<T> route) {
// If there's nothing to go back to, then obviously we don't support
// the back gesture.
if (route.isFirst)
return false;
// If the route wouldn't actually pop if we popped it, then the gesture
// would be really confusing (or would skip internal routes), so disallow it.
if (route.willHandlePopInternally)
return false;
// If attempts to dismiss this route might be vetoed such as in a page
// with forms, then do not allow the user to dismiss the route with a swipe.
if (route.hasScopedWillPopCallback)
return false;
// Fullscreen dialogs aren't dismissible by back swipe.
if (route.fullscreenDialog)
return false;
// If we're in an animation already, we cannot be manually swiped.
if (route.animation!.status != AnimationStatus.completed)
return false;
// If we're being popped into, we also cannot be swiped until the pop above
// it completes. This translates to our secondary animation being
// dismissed.
if (route.secondaryAnimation!.status != AnimationStatus.dismissed)
return false;
// If we're in a gesture already, we cannot start another.
if (isPopGestureInProgress(route))
return false;
// Looks like a back gesture would be welcome!
return true;
}
检查页面确实有设置WillPopScope，确认是代码迁移问题去掉即可。
含PageView页面
当页面中有PageView时，在PageView范围内手势被自己消费了，左右滑动只会切换页面无法返回到上一页，所以要单独适配下，这里有两种思路。
设置左间距
很好理解，让PageView非撑满全屏的，留个边距方便拖动页面，和普通页面操作手法是一样的。
但这个解决办法要求内容本身有边距，如果内容是撑满全屏情况下，又想做到产品希望的从第一个tab页继续右滑返回上一页，可以通过监听PageView的滑动状态来实现。
监听到达边界后pop
这里使用NotificationListener监听PageView一旦滑动到边界就主动pop页面，同时还要修改它的physics为ClampingScrollPhysics因为iOS默认不会回调OverscrollNotification。相关知识可以看这篇Flutter小白初探事件处理文章里有非常相似的例子。
class SwipeLeftReturnWidget extends StatelessWidget {
final Widget child;
bool _isOverscroll = false;
SwipeLeftReturnWidget(this.child);
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (notification) {
switch (notification.runtimeType) {
case ScrollUpdateNotification:
_isOverscroll = false;
break;
case ScrollEndNotification:
if (_isOverscroll) {
// 返回上一页
Navigator.of(context).pop();
}
break;
case OverscrollNotification:
if (notification.depth == 0 &&
notification.metrics.extentBefore <= 0) {
// 处于第一个tab且继续右滑
_isOverscroll = true;
}
break;
default:
break;
}
return false;
},
child: child,
);
}
}
总结
利用系统组件可以很快地实现从边缘拖动页面返回上一页；而在多Tab页面，通过监听Pager实现在第一个Tab页面内继续右滑直接返回上一页。这两种操作行为从触发时机、触发范围、页面是否跟手这几个方面都有所区别，存在于同个应用可能会让用户感到奇怪，所以最好是能做到“在整个页面内右滑后页面都可以跟手返回”，目前还没有实现到这一步，后续可以继续深入下CupertinoPageRoute看看如何自定义实现。
