extended_image 相关文章

• Flutter 什么功能都有的Image
• Flutter 可以缩放拖拽的图片
• Flutter 仿掘金微信图片滑动退出页面效果

这个需求在做extended_image的时候就有上帝客户提过了，一直都没有时间去考虑实现。最近思考了一下，把效果给实现了。

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

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

ExtendedImageGesturePage的参数

下面是默认实现，你也可以根据你的喜好，来定义属于自己方式

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, 请确保的你页面是透明的，毕竟没法操控你页面上的颜色

Push一个透明的页面

这里我把官方的MaterialPageRoute 和CupertinoPageRoute拷贝出来了， 改为TransparentMaterialPageRoute/TransparentCupertinoPageRoute，因为它们的opaque不能设置为false

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

嗯应该还算使用简单吧？群里的小伙伴吐槽表情包太多，不让放，蓝瘦香菇。

实现中的一些坑

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

开始我的思路是想在ExtendedImageSlidePage 注册手势监听事件，然后ExtendedImageGesture里面当条件满足(达到边界/无法拖拽)的时候通知 ExtendedImageSlidePage 开始滑动页面手势了，可以阻止ExtendedImageSlidePage的child的hittest。

但是在实际中发现，在ExtendedImageGesture手势未完成之前（手指抬起）,ExtendedImageSlidePage 也是获取不到任何手势，而且IgnorePointer 也是不会生效的

后面干脆直接把手势接收都放ExtendedImageGesture里面了，直接通知ExtendedImageSlidePage进行translate和scale

2.透明页面

TransparentMaterialPageRoute/TransparentCupertinoPageRoute 因为需要整个页面是透明的，所以重写了官方的。

但是在pop页面的时候还是有不满意的地方，比如ios上面有个从左到右Shadow，安卓上面整个页面也有Shadow。

通过修改官方源码，去掉了这些效果，感兴趣的小伙伴可以查看extended_image_slide_page_route.dart（最近拉面批评代码上太多，差评，那个啥代码就不贴了 ）

缺陷

设置SlideType.onlyImage 因为没法操控页面上面的其他内容，所以只能靠改变背景色，暂时没想到更好的方法来给页面上的其他东西做动画

关于extended_image的readme

最近重新整理了一下readme，因为大家老是吐槽不容易看，希望新的readme能帮助大家更好地使用这个组件，感谢财经龙大佬百忙当中帮忙格式readme，懒惰的程序猿，readme都要大佬帮忙弄，羞愧。。。

最后放上 extended_image，如果你有什么不明白或者对这个方案有什么改进的地方，请告诉我，欢迎加入Flutter Candies，一起生产可爱的Flutter 小糖果(QQ群:181398081)

最最后放上Flutter Candies全家桶，真香。