Flutter 仿掘金微信图片滑动退出页面效果

最近思考了一下，把效果给实现了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

首先把你的页面用ExtendedImageSlidePage包一下

var page = ExtendedImageSlidePage(
  child: PicSwiper(
    index,
    listSourceRepository
        .map<PicSwiperItem>(
            (f) => PicSwiperItem(f.imageUrl, des: f.title))
        .toList(),
  ),
  //pageGestureAxis: PageGestureAxis.horizontal,
);
复制代码

ExtendedImageGesturePage的参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

下面是默认实现，你也可以根据你的喜好，来定义属于自己方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

Color defaultSlidePageBackgroundHandler(
    {Offset offset, Size pageSize, Color color, SlideAxis pageGestureAxis}) {
  double opacity = 0.0;
  if (pageGestureAxis == SlideAxis.both) {
    opacity = offset.distance /
        (Offset(pageSize.width, pageSize.height).distance / 2.0);
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    opacity = offset.dx.abs() / (pageSize.width / 2.0);
  } else if (pageGestureAxis == SlideAxis.vertical) {
    opacity = offset.dy.abs() / (pageSize.height / 2.0);
  }
  return color.withOpacity(min(1.0, max(1.0 - opacity, 0.0)));
}

bool defaultSlideEndHandler(
    {Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {
  if (pageGestureAxis == SlideAxis.both) {
    return offset.distance >
        Offset(pageSize.width, pageSize.height).distance / 3.5;
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    return offset.dx.abs() > pageSize.width / 3.5;
  } else if (pageGestureAxis == SlideAxis.vertical) {
    return offset.dy.abs() > pageSize.height / 3.5;
  }
  return true;
}

double defaultSlideScaleHandler(
    {Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {
  double scale = 0.0;
  if (pageGestureAxis == SlideAxis.both) {
    scale = offset.distance / Offset(pageSize.width, pageSize.height).distance;
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    scale = offset.dx.abs() / (pageSize.width / 2.0);
  } else if (pageGestureAxis == SlideAxis.vertical) {
    scale = offset.dy.abs() / (pageSize.height / 2.0);
  }
  return max(1.0 - scale, 0.8);
}
复制代码

确保你的页面是透明背景的

如果你设置 slideType =SlideType.onlyImage, 请确保的你页面是透明的，毕竟没法操控你页面上的颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

Push一个透明的页面

这里我把官方的MaterialPageRoute 和CupertinoPageRoute拷贝出来了， 改为TransparentMaterialPageRoute/TransparentCupertinoPageRoute，因为它们的opaque不能设置为false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

  Navigator.push(
    context,
    Platform.isAndroid
        ? TransparentMaterialPageRoute(builder: (_) => page)
        : TransparentCupertinoPageRoute(builder: (_) => page),
  );
复制代码

嗯应该还算使用简单吧？群里的小伙伴吐槽表情包太多，不让放，蓝瘦香菇。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

实现中的一些坑

1.手势跟缩放拖拽以及PageView之前的关系和冲突

开始我的思路是想在ExtendedImageSlidePage 注册手势监听事件，然后ExtendedImageGesture里面当条件满足(达到边界/无法拖拽)的时候通知 ExtendedImageSlidePage 开始滑动页面手势了，可以阻止ExtendedImageSlidePage的child的hittest。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

但是在实际中发现，在ExtendedImageGesture手势未完成之前（手指抬起）,ExtendedImageSlidePage 也是获取不到任何手势，而且IgnorePointer 也是不会生效的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

后面干脆直接把手势接收都放ExtendedImageGesture里面了，直接通知ExtendedImageSlidePage进行translate和scale文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

2.透明页面

TransparentMaterialPageRoute/TransparentCupertinoPageRoute 因为需要整个页面是透明的，所以重写了官方的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

但是在pop页面的时候还是有不满意的地方，比如ios上面有个从左到右Shadow，安卓上面整个页面也有Shadow。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

通过修改官方源码，去掉了这些效果，感兴趣的小伙伴可以查看extended_image_slide_page_route.dart（最近拉面批评代码上太多，差评，那个啥代码就不贴了 ）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html

缺陷

设置SlideType.onlyImage 因为没法操控页面上面的其他内容，所以只能靠改变背景色，暂时没想到更好的方法来给页面上的其他东西做动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13615.html