Flutter模仿了掘金微信图中滑动输出页面的效果

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，请确保您的页面是透明的 是的，在你终究控制不了页面的颜色

按透明页面

我这里复制了官方的MaterialPageRoute和CupertinoPageRoute，改成TransparentMaterialPageRoute/TransparentCupertino❙因为他们的❀PageRoute无法设置❙嗯，应该很容易使用吧？群里的朋友抱怨表情太多，用不了，比如蓝色蘑菇。

实施过程中的一些陷阱

1.手势、缩放拖动和PageView之间的关系和冲突

我的想法是先在ExtendedImageSlidePage中注册手势监听事件，然后当满足ExtendedImageGesture中的条件（到达边界/无法拖动）时通知ExtendedImageSlidePage运行页面滚动手势这可能会阻止对 ExtendedImageSlidePage 子页面进行测试。

但是在实践中发现，在ExtendImageGesture（手指抬起）完成之前，ExtendedImageSlidePage无法接收到任何手势，也没有出现IgnorePointer

后来就简单直接设置手势接收了在扩展图像手势中。 ，直接通知ExtendImageSlidePage进行平移和缩放

2。透明页面

TransparentMaterialPageRoute/TransparentCupertinoPageRoute 由于必须整个页面透明，所以官方的已经被覆盖了。

但是打开页面还是有些不满意。例如，在 ios 上，阴影是从左到右，而在 android 上，阴影是在整个页面上。

这些效果已通过编辑官方源代码删除。有兴趣的朋友可以看看extend_image_slide_page_route.dart（最近代码被拉面诟病太多，差评，所以代码就不公布了）

缺陷

设置SlideType.onlyImage因为我不能控制页面上的其他内容我只能依靠改变背景颜色。为页面上的其他内容制作动画的更好方法

作者：Fa's Space
链接：https://juejin.im/post/5cf62ab0e51d45776031afb2