Flutter|右滑返回上一页

需求背景是仿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看看如何自定义实现。