Flutter 小技巧之实现一个精美的动画相册效果

今天的小技巧主要是「抄袭」一个充满设计感的相册控件，如下图所示是 gskinner 开源应用 wonderous 里一个相片集的实现效果，可以看到相册支持上下左右滑动，并带有高亮展示的动画效果，而且相册整体布局可以超出屏幕滚动，因为是开源的 App， 我们只需要「照搬」就可以实现一摸一样的效果，那么如果要实现这样的效果，你第一反应是用什么基础控件？

Flutter 小技巧之实现一个精美的动画相册效果 - 图1

因为需要支持上下左右自由滑动，可能大家第一反应会是 Table ，还是嵌套两个 ListView ？但是从上面的效果体验上看，控件滑动的过程并不是一个正常 Scroll 控件的线性效果，因为它并不是「跟随手指滑动」的状态。

既然是开源代码，我们通过源码可以发现它是用了 GridView 来实现，这也是这个效果里最有趣的点，一个 GridView 如何变成一个带有动画的 Photo Gallery 。

所以本篇的核心是分析 wonderous 里的 Photo Gallery 是如何实现的，并剥离出简单代码。

Photo Gallery

要实现上述的 Photo Gallery 效果，主要需要解决三个方面核心的要点：

  • 1、GridView 所在区域的上下左右要超出屏幕
  • 2、GridView 如何实现上下左右自由切换
  • 3、高亮展示选中 Item 的动画效果

首先是第一点的方案肯定是 OverflowBox ，因它支持解放 Child 的布局约束，允许 Child 溢出父布局，因为前面的 Photo Gallery 在水平方向设定是 5 个 Item，而 GridView 是默认是上下滑动，所以可以简单的设定一个 maxWidth 和 maxHeight 来作为 Child 超出屏幕后大小。

  1. OverflowBox(
  2.    maxWidth: _gridSize * imgSize.width + padding * (_gridSize - 1),
  3.    maxHeight: _gridSize * imgSize.height + padding * (_gridSize - 1),
  4.    alignment: Alignment.center,
  5.    child:

可以看到「超出屏幕」这个需求还是比较简单，接下里就是 「GridView 如何实现上下左右自由切换」这个问题。

小技巧 1 ：在合适场合使用 OverflowBox 可以溢出屏幕

默认情况下 GridView 肯定只支持一个方向滑动，所以干脆我们禁止 GridView 的滑动逻辑，让 GridView 只管布局，后面滑动逻辑通过自定义的 GestureDetector 来实现。

  1. GridView.count(
  2.   physics: NeverScrollableScrollPhysics(),

如下代码所示，我们通过封装 GestureDetector 来实现手势识别，这里核心的要点就是 _maybeTriggerSwipe 的实现，它的作用就是得到手势滑动的方向结果，对于滑动具体大于 threshold 的参数，通过「采样」将数据变成 -1、 0 、 1 这样的结果来代表方向：

  • Offset(1.0, 0.0) 是手指右滑
  • Offset(-1.0, 0.0) 是手指左滑
  • Offset(0.0, 1.0) 是手指下滑
  • Offset(0.0, -1.0) 是手指上滑
  1. class _EightWaySwipeDetectorState extends State<EightWaySwipeDetector> {
  2.   Offset _startPos = Offset.zero;
  3.   Offset _endPos = Offset.zero;
  4.   bool _isSwiping = false;
  6.   void _resetSwipe() {
  7.     _startPos = _endPos = Offset.zero;
  8.     _isSwiping = false;
  9.   }
  11.   ///这里主要是返回一个 -1 ～ 1 之间的数值，具体用于判断方向
  12.   /// Offset(1.0, 0.0)  是手指右滑
  13.   /// Offset(-1.0, 0.0) 是手指左滑
  14.   /// Offset(0.0, 1.0)  是手指下滑
  15.   /// Offset(0.0, -1.0) 是手指上滑
  16.   void _maybeTriggerSwipe() {
  17.     // Exit early if we're not currently swiping
  18.     if (_isSwiping == false) return;
  20.     /// 开始和结束位置计算出移动距离
  21.     // Get the distance of the swipe
  22.     Offset moveDelta = _endPos - _startPos;
  23.     final distance = moveDelta.distance;
  25.     /// 对比偏移量大小是否超过了 threshold ，不能小于 1
  26.     // Trigger swipe if threshold has been exceeded, if threshold is < 1, use 1 as a minimum value.
  27.     if (distance >= max(widget.threshold, 1)) {
  28.       // Normalize the dx/dy values between -1 and 1
  29.       moveDelta /= distance;
  30.       // Round the dx/dy values to snap them to -1, 0 or 1, creating an 8-way directional vector.
  31.       Offset dir = Offset(
  32.         moveDelta.dx.roundToDouble(),
  33.         moveDelta.dy.roundToDouble(),
  34.       );
  35.       widget.onSwipe?.call(dir);
  36.       _resetSwipe();
  37.     }
  38.   }
  40.   void _handleSwipeStart(d) {
  41.     _isSwiping = true;
  42.     _startPos = _endPos = d.localPosition;
  43.   }
  45.   void _handleSwipeUpdate(d) {
  46.     _endPos = d.localPosition;
  47.     _maybeTriggerSwipe();
  48.   }
  50.   void _handleSwipeEnd(d) {
  51.     _maybeTriggerSwipe();
  52.     _resetSwipe();
  53.   }
  55.   @override
  56.   Widget build(BuildContext context) {
  57.     return GestureDetector(
  58.         behavior: HitTestBehavior.translucent,
  59.         onPanStart: _handleSwipeStart,
  60.         onPanUpdate: _handleSwipeUpdate,
  61.         onPanCancel: _resetSwipe,
  62.         onPanEnd: _handleSwipeEnd,
  63.         child: widget.child);
  64.   }
  65. }

小技巧 2：Offset.distance 可以用来作为判断偏移量的大小。

知道了手势方向之后，我们就可以处理 GridView 应该如何滑动，这里我们需要先知道当然应该展示哪个 index 。

默认情况下我们需要展示的是最中间的 Item ，例如有 25 个 Item 的时候， index 应该在第 13 ，然后我们再根据方向来调整下一个 index 是哪个：

  • dy > 0 ，就是手指下滑，也就是页面要往上，那么 index 就需要 -1，反过来就是 + 1
  • dx > 0 ，就是手指右滑，也就是页面要往左，那么 index 就需要 -1，反过来就是 + 1
  1. // Index starts in the middle of the grid (eg, 25 items, index will start at 13)
  2. int _index = ((_gridSize * _gridSize) / 2).round();
  5.   /// Converts a swipe direction into a new index
  6.   void _handleSwipe(Offset dir) {
  7.     // Calculate new index, y swipes move by an entire row, x swipes move one index at a time
  8.     int newIndex = _index;
  10.     /// Offset(1.0, 0.0)  是手指右滑
  11.     /// Offset(-1.0, 0.0) 是手指左滑
  12.     /// Offset(0.0, 1.0)  是手指下滑
  13.     /// Offset(0.0, -1.0) 是手指上滑
  15.     /// dy > 0 ，就是手指下滑，也就是页面要往上，那么 index 就需要 -1，反过来就是 + 1
  16.     if (dir.dy != 0) newIndex += _gridSize * (dir.dy > 0 ? -1 : 1);
  18.     /// dx > 0 ，就是手指右滑，也就是页面要往左，那么 index 就需要 -1，反过来就是 + 1
  19.     if (dir.dx != 0) newIndex += (dir.dx > 0 ? -1 : 1);
  21.     ///这里判断下 index 是不是超出位置
  22.     // After calculating new index, exit early if we don't like it...
  23.     if (newIndex < 0 || newIndex > _imgCount - 1)
  24.       return; // keep the index in range
  25.     if (dir.dx < 0 && newIndex % _gridSize == 0)
  26.       return; // prevent right-swipe when at right side
  27.     if (dir.dx > 0 && newIndex % _gridSize == _gridSize - 1)
  28.       return; // prevent left-swipe when at left side
  29.     /// 响应
  30.     _lastSwipeDir = dir;
  31.     HapticFeedback.lightImpact();
  32.     _setIndex(newIndex);
  33.   }
  35.   void _setIndex(int value, {bool skipAnimation = false}) {
  36.     if (value < 0 || value >= _imgCount) return;
  37.     setState(() => _index = value);
  38.   }

通过手势方向，我们就可以得到下一个需要展示的 Item 的 index 是什么，然后就可以使用 Transform.translate 来移动 GridView 。

是的，在这个 Photo Gallery 里的滑动效果是通过 Transform.translate 实现，核心之一也就是根据方向计算其应该偏移的 Offset 位置：

  • 首先根据水平方向的数量 / 2 得到一个 halfCount
  • 计算出一个 Item 加上 Padding 大小的 paddedImageSize
  • 计算出默认中心位置的 top-left 的 originOffset
  • 计算出要移动的 index 所在的行和列位置 indexedOffset
  • 最后两者相减（因为 indexedOffset 里是负数），得到一个相对的偏移 Offset
  1. /// Determine the required offset to show the current selected index.
  2. /// index=0 is top-left, and the index=max is bottom-right.
  3. Offset _calculateCurrentOffset(double padding, Size size) {
  4.   /// 获取水平方向一半的大小，默认也就是 2.0，因为 floorToDouble
  5.   double halfCount = (_gridSize / 2).floorToDouble();
  7.   /// Item 大小加上 Padding，也就是每个 Item 的实际大小
  8.   Size paddedImageSize = Size(size.width + padding, size.height + padding);
  10.   /// 计算出开始位置的 top-left
  11.   // Get the starting offset that would show the top-left image (index 0)
  12.   final originOffset = Offset(
  13.       halfCount * paddedImageSize.width, halfCount * paddedImageSize.height);
  15.   /// 得到要移动的 index 所在的行和列位置
  16.   // Add the offset for the row/col
  17.   int col = _index % _gridSize;
  18.   int row = (_index / _gridSize).floor();
  20.   /// 负数计算出要移动的 index 的 top-left 位置，比如 index 比较小，那么这个 indexedOffset 就比中心点小，相减之后 Offset 就会是正数
  21.   /// 是不是有点懵逼？为什么正数 translate 会往 index 小的 方向移动？？
  22.   /// 因为你代入的不对，我们 translate 移动的是整个 GridView
  23.   /// 正数是向左向下移动，自然就把左边或者上面的 Item 显示出来
  24.   final indexedOffset =
  25.       Offset(-paddedImageSize.width * col, -paddedImageSize.height * row);
  27.   return originOffset + indexedOffset;
  28. }

具体点如下图所示，比如在 5 x 5 的 GridView 下：

  • 通过 halfCount 和 paddedImageSize 计算会得到黑色虚线的位置
  • 红色是要展示的 index 位置，也就是通过 col 和 row 计算出来的 indexedOffset 就是红色框的左上角，在上面代码里用过的是负数
  • 当 originOffset + indexedOffset ，其实就是得到两者之差的 currentOffset，比如这时候得到是一个 dx 为正数的 Offset ，整个 GridView 要向左移动一个 currentOffset ，自然就把红色框放到中间显示。

Flutter 小技巧之实现一个精美的动画相册效果 - 图2

更形象的可以看这个动画，核心就是整个 GridView 在发生了偏移，从把需要展示的 Item 移动到中心的位置，利用 Transform.translate 来实现类似滑动的效果，当然实现里还会用到 TweenAnimationBuilder 来实现动画过程，

Flutter 小技巧之实现一个精美的动画相册效果 - 图3

  1. TweenAnimationBuilder<Offset>(
  2.     tween: Tween(begin: gridOffset, end: gridOffset),
  3.     duration: offsetTweenDuration,
  4.     curve: Curves.easeOut,
  5.     builder: (_, value, child) =>
  6.         Transform.translate(offset: value, child: child),
  7.     child: GridView.count(
  8.       physics: NeverScrollableScrollPhysics(),

解决完移动，最后就是实现蒙层和高亮动画效果，这个的核心主要是通过 flutter_animate 包和 ClipPath 实现，如下代码所示：

  • 使用 Animate 并在上面添加一个具有透明度的黑色 Container
  • 利用 CustomEffect 添加自定义动画
  • 在动画里利用 ClipPath ，并通过自定义 CustomClipper 结合动画 value 实现 PathOperation.difference 的「挖空」效果

动画效果就是根据 Animate 的 value 得到的 cutoutSize ，默认是从 1 - 0.25 * x 开始，这里的 x 是滑动方向，最终表现就是从 0.75 到 1 的过程，所以动画会根据方向有一个从 0.75 到 1 的展开效果。

  1. @override
  2. Widget build(BuildContext context) {
  3.   return Stack(
  4.     children: [
  5.       child,
  6.       // 用 ClipPath 做一个动画抠图
  7.       Animate(
  8.         effects: [
  9.           CustomEffect(
  10.               builder: _buildAnimatedCutout,
  11.               curve: Curves.easeOut,
  12.               duration: duration)
  13.         ],
  14.         key: animationKey,
  15.         onComplete: (c) => c.reverse(),
  16.         // 用一个黑色的蒙层，这里的 child 会变成 effects 里 builder 里的 child
  17.         // 也就是黑色 Container 会在 _buildAnimatedCutout 作为 ClipPath 的 child
  18.         child: IgnorePointer(
  19.             child: Container(color: Colors.black.withOpacity(opacity))),
  20.       ),
  21.     ],
  22.   );
  23. }
  25. /// Scales from 1 --> (1 - scaleAmt) --> 1
  26. Widget _buildAnimatedCutout(BuildContext context, double anim, Widget child) {
  27.   // controls how much the center cutout will shrink when changing images
  28.   const scaleAmt = .25;
  29.   final size = Size(
  30.     cutoutSize.width * (1 - scaleAmt * anim * swipeDir.dx.abs()),
  31.     cutoutSize.height * (1 - scaleAmt * anim * swipeDir.dy.abs()),
  32.   );
  33.   return ClipPath(clipper: _CutoutClipper(size), child: child);
  34. }
  36. class _CutoutClipper extends CustomClipper<Path> {
  37.   _CutoutClipper(this.cutoutSize);
  39.   final Size cutoutSize;
  41.   @override
  42.   Path getClip(Size size) {
  43.     double padX = (size.width - cutoutSize.width) / 2;
  44.     double padY = (size.height - cutoutSize.height) / 2;
  46.     return Path.combine(
  47.       PathOperation.difference,
  48.       Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
  49.       Path()
  50.         ..addRRect(
  51.           RRect.fromLTRBR(
  52.             padX,
  53.             padY,
  54.             size.width - padX,
  55.             size.height - padY,
  56.             Radius.circular(6),
  57.           ),
  58.         )
  59.         ..close(),
  60.     );
  61.   }
  63.   @override
  64.   bool shouldReclip(_CutoutClipper oldClipper) =>
  65.       oldClipper.cutoutSize != cutoutSize;
  66. }

从这里可以看到，其实高亮的效果就是在黑色的蒙层上，利用 PathOperation.difference 「挖」出来一个空白的 Path 。

小技巧 3 ： PathOperation.difference 可以用在需要「镂空」 的场景上。

更直观的可以参考一下例子，就是对两个路径进行 difference 操作，，利用 Rect2 把 Rect1 中间给消除掉，得到一个中间 「镂空」的绘制 Path。

  1. class ShowPathDifference extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text('ShowPathDifference'),
  7.       ),
  8.       body: Stack(
  9.         alignment: Alignment.center,
  10.         children: [
  11.           Center(
  12.             child: Container(
  13.               width: 300,
  14.               height: 300,
  15.               decoration: BoxDecoration(
  16.                 image: DecorationImage(
  17.                   fit: BoxFit.cover,
  18.                   image: AssetImage("static/gsy_cat.png"),
  19.                 ),
  20.               ),
  21.             ),
  22.           ),
  23.           Center(
  24.             child: CustomPaint(
  25.               painter: ShowPathDifferencePainter(),
  26.             ),
  27.           ),
  28.         ],
  29.       ),
  30.     );
  31.   }
  32. }
  34. class ShowPathDifferencePainter extends CustomPainter {
  35.   @override
  36.   void paint(Canvas canvas, Size size) {
  37.     final paint = Paint();
  38.     paint.color = Colors.blue.withAlpha(160);
  39.     canvas.drawPath(
  40.       Path.combine(
  41.         PathOperation.difference,
  42.         Path()
  43.           ..addRRect(
  44.               RRect.fromLTRBR(-150, -150, 150, 150, Radius.circular(10))),
  45.         Path()
  46.           ..addOval(Rect.fromCircle(center: Offset(0, 0), radius: 100))
  47.           ..close(),
  48.       ),
  49.       paint,
  50.     );
  51.   }
  53.   @override
  54.   bool shouldRepaint(CustomPainter oldDelegate) => false;
  55. }

Flutter 小技巧之实现一个精美的动画相册效果 - 图4

最终效果如下图所依，这里是把 wonderous 里关键部分代码剥离出来后的效果，因为 wonderous 并没有把这部分代码封装为 package ，所以我把这部分代码剥离出来放在了后面，感兴趣的可以自己运行试试效果。

Flutter 小技巧之实现一个精美的动画相册效果 - 图5

源码

  1. import 'dart:math';
  3. import 'package:flutter/material.dart';
  4. import 'package:flutter/services.dart';
  5. import 'package:flutter_animate/flutter_animate.dart';
  7. /// 来自  https://github.com/gskinnerTeam/flutter-wonderous-app 上的一个 UI 效果
  8. class PhotoGalleryDemoPage extends StatefulWidget {
  9.   const PhotoGalleryDemoPage({Key? key}) : super(key: key);
  11.   @override
  12.   State<PhotoGalleryDemoPage> createState() => _PhotoGalleryDemoPageState();
  13. }
  15. class _PhotoGalleryDemoPageState extends State<PhotoGalleryDemoPage> {
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return PhotoGallery();
  19.   }
  20. }
  22. class PhotoGallery extends StatefulWidget {
  23.   const PhotoGallery({Key? key}) : super(key: key);
  25.   @override
  26.   State<PhotoGallery> createState() => _PhotoGalleryState();
  27. }
  29. class _PhotoGalleryState extends State<PhotoGallery> {
  30.   static const int _gridSize = 5;
  32.   late List<Color> colorList;
  34.   // Index starts in the middle of the grid (eg, 25 items, index will start at 13)
  35.   int _index = ((_gridSize * _gridSize) / 2).round();
  37.   Offset _lastSwipeDir = Offset.zero;
  39.   bool _skipNextOffsetTween = false;
  41.   ///根据屏幕尺寸，决定 Padding 的大小，通过 scale 缩放
  42.   _getPadding(Size size) {
  43.     double scale = 1;
  44.     final shortestSide = size.shortestSide;
  45.     const tabletXl = 1000;
  46.     const tabletLg = 800;
  47.     const tabletSm = 600;
  48.     const phoneLg = 400;
  49.     if (shortestSide > tabletXl) {
  50.       scale = 1.25;
  51.     } else if (shortestSide > tabletLg) {
  52.       scale = 1.15;
  53.     } else if (shortestSide > tabletSm) {
  54.       scale = 1;
  55.     } else if (shortestSide > phoneLg) {
  56.       scale = .9; // phone
  57.     } else {
  58.       scale = .85; // small phone
  59.     }
  60.     return 24 * scale;
  61.   }
  63.   int get _imgCount => pow(_gridSize, 2).round();
  65.   Widget _buildImage(int index, Size imgSize) {
  66.     /// Bind to collectibles.statesById because we might need to rebuild if a collectible is found.
  67.     return ClipRRect(
  68.       borderRadius: BorderRadius.circular(8),
  69.       child: Container(
  70.         width: imgSize.width,
  71.         height: imgSize.height,
  72.         color: colorList[index],
  73.       ),
  74.     );
  75.   }
  77.   /// Converts a swipe direction into a new index
  78.   void _handleSwipe(Offset dir) {
  79.     // Calculate new index, y swipes move by an entire row, x swipes move one index at a time
  80.     int newIndex = _index;
  82.     /// Offset(1.0, 0.0)  是手指右滑
  83.     /// Offset(-1.0, 0.0) 是手指左滑
  84.     /// Offset(0.0, 1.0)  是手指下滑
  85.     /// Offset(0.0, -1.0) 是手指上滑
  87.     /// dy > 0 ，就是手指下滑，也就是页面要往上，那么 index 就需要 -1，反过来就是 + 1
  88.     if (dir.dy != 0) newIndex += _gridSize * (dir.dy > 0 ? -1 : 1);
  90.     /// dx > 0 ，就是手指右滑，也就是页面要往左，那么 index 就需要 -1，反过来就是 + 1
  91.     if (dir.dx != 0) newIndex += (dir.dx > 0 ? -1 : 1);
  93.     ///这里判断下 index 是不是超出位置
  94.     // After calculating new index, exit early if we don't like it...
  95.     if (newIndex < 0 || newIndex > _imgCount - 1)
  96.       return; // keep the index in range
  97.     if (dir.dx < 0 && newIndex % _gridSize == 0)
  98.       return; // prevent right-swipe when at right side
  99.     if (dir.dx > 0 && newIndex % _gridSize == _gridSize - 1)
  100.       return; // prevent left-swipe when at left side
  101.     /// 响应
  102.     _lastSwipeDir = dir;
  103.     HapticFeedback.lightImpact();
  104.     _setIndex(newIndex);
  105.   }
  107.   void _setIndex(int value, {bool skipAnimation = false}) {
  108.     print("######## $value");
  109.     if (value < 0 || value >= _imgCount) return;
  110.     _skipNextOffsetTween = skipAnimation;
  111.     setState(() => _index = value);
  112.   }
  114.   /// Determine the required offset to show the current selected index.
  115.   /// index=0 is top-left, and the index=max is bottom-right.
  116.   Offset _calculateCurrentOffset(double padding, Size size) {
  117.     /// 获取水平方向一半的大小，默认也就是 2.0，因为 floorToDouble
  118.     double halfCount = (_gridSize / 2).floorToDouble();
  120.     /// Item 大小加上 Padding，也就是每个 Item 的实际大小
  121.     Size paddedImageSize = Size(size.width + padding, size.height + padding);
  123.     /// 计算出开始位置的 top-left
  124.     // Get the starting offset that would show the top-left image (index 0)
  125.     final originOffset = Offset(
  126.         halfCount * paddedImageSize.width, halfCount * paddedImageSize.height);
  128.     /// 得到要移动的 index 所在的行和列位置
  129.     // Add the offset for the row/col
  130.     int col = _index % _gridSize;
  131.     int row = (_index / _gridSize).floor();
  133.     /// 负数计算出要移动的 index 的 top-left 位置，比如 index 比较小，那么这个 indexedOffset 就比中心点小，相减之后 Offset 就会是正数
  134.     /// 是不是有点懵逼？为什么正数 translate 会往 index 小的 方向移动？？
  135.     /// 因为你代入的不对，我们 translate 移动的是整个 GridView
  136.     /// 正数是向左向下移动，自然就把左边或者上面的 Item 显示出来
  137.     final indexedOffset =
  138.         Offset(-paddedImageSize.width * col, -paddedImageSize.height * row);
  140.     return originOffset + indexedOffset;
  141.   }
  143.   @override
  144.   void initState() {
  145.     colorList = List.generate(
  146.         _imgCount,
  147.         (index) => Color((Random().nextDouble() * 0xFFFFFF).toInt())
  148.             .withOpacity(1));
  150.     super.initState();
  151.   }
  153.   @override
  154.   Widget build(BuildContext context) {
  155.     var mq = MediaQuery.of(context);
  156.     var width = mq.size.width;
  157.     var height = mq.size.height;
  158.     bool isLandscape = mq.orientation == Orientation.landscape;
  160.     ///根据横竖屏状态决定 Item 大小
  161.     Size imgSize = isLandscape
  162.         ? Size(width * .5, height * .66)
  163.         : Size(width * .66, height * .5);
  165.     var padding = _getPadding(mq.size);
  167.     final cutoutTweenDuration =
  168.         _skipNextOffsetTween ? Duration.zero : Duration(milliseconds: 600) * .5;
  170.     final offsetTweenDuration =
  171.         _skipNextOffsetTween ? Duration.zero : Duration(milliseconds: 600) * .4;
  173.     var gridOffset = _calculateCurrentOffset(padding, imgSize);
  174.     gridOffset += Offset(0, -mq.padding.top / 2);
  176.     //动画效果
  177.     return _AnimatedCutoutOverlay(
  178.       animationKey: ValueKey(_index),
  179.       cutoutSize: imgSize,
  180.       swipeDir: _lastSwipeDir,
  181.       duration: cutoutTweenDuration,
  182.       opacity: .7,
  183.       child: SafeArea(
  184.         bottom: false,
  185.         // Place content in overflow box, to allow it to flow outside the parent
  186.         child: OverflowBox(
  187.           maxWidth: _gridSize * imgSize.width + padding * (_gridSize - 1),
  188.           maxHeight: _gridSize * imgSize.height + padding * (_gridSize - 1),
  189.           alignment: Alignment.center,
  190.           // 手势获取方向上下左右
  191.           child: EightWaySwipeDetector(
  192.             onSwipe: _handleSwipe,
  193.             threshold: 30,
  194.             // A tween animation builder moves from image to image based on current offset
  195.             child: TweenAnimationBuilder<Offset>(
  196.                 tween: Tween(begin: gridOffset, end: gridOffset),
  197.                 duration: offsetTweenDuration,
  198.                 curve: Curves.easeOut,
  199.                 builder: (_, value, child) =>
  200.                     Transform.translate(offset: value, child: child),
  201.                 child: GridView.count(
  202.                   physics: NeverScrollableScrollPhysics(),
  203.                   crossAxisCount: _gridSize,
  204.                   childAspectRatio: imgSize.aspectRatio,
  205.                   mainAxisSpacing: padding,
  206.                   crossAxisSpacing: padding,
  207.                   children:
  208.                       List.generate(_imgCount, (i) => _buildImage(i, imgSize)),
  209.                 )),
  210.           ),
  211.         ),
  212.       ),
  213.     );
  214.   }
  215. }
  217. class EightWaySwipeDetector extends StatefulWidget {
  218.   const EightWaySwipeDetector(
  219.       {Key? key,
  220.       required this.child,
  221.       this.threshold = 50,
  222.       required this.onSwipe})
  223.       : super(key: key);
  224.   final Widget child;
  225.   final double threshold;
  226.   final void Function(Offset dir)? onSwipe;
  228.   @override
  229.   State<EightWaySwipeDetector> createState() => _EightWaySwipeDetectorState();
  230. }
  232. class _EightWaySwipeDetectorState extends State<EightWaySwipeDetector> {
  233.   Offset _startPos = Offset.zero;
  234.   Offset _endPos = Offset.zero;
  235.   bool _isSwiping = false;
  237.   void _resetSwipe() {
  238.     _startPos = _endPos = Offset.zero;
  239.     _isSwiping = false;
  240.   }
  242.   ///这里主要是返回一个 -1 ～ 1 之间的数值，具体用于判断方向
  243.   /// Offset(1.0, 0.0)  是手指右滑
  244.   /// Offset(-1.0, 0.0) 是手指左滑
  245.   /// Offset(0.0, 1.0)  是手指下滑
  246.   /// Offset(0.0, -1.0) 是手指上滑
  247.   void _maybeTriggerSwipe() {
  248.     // Exit early if we're not currently swiping
  249.     if (_isSwiping == false) return;
  251.     /// 开始和结束位置计算出移动距离
  252.     // Get the distance of the swipe
  253.     Offset moveDelta = _endPos - _startPos;
  254.     final distance = moveDelta.distance;
  256.     /// 对比偏移量大小是否超过了 threshold ，不能小于 1
  257.     // Trigger swipe if threshold has been exceeded, if threshold is < 1, use 1 as a minimum value.
  258.     if (distance >= max(widget.threshold, 1)) {
  259.       // Normalize the dx/dy values between -1 and 1
  260.       moveDelta /= distance;
  261.       // Round the dx/dy values to snap them to -1, 0 or 1, creating an 8-way directional vector.
  262.       Offset dir = Offset(
  263.         moveDelta.dx.roundToDouble(),
  264.         moveDelta.dy.roundToDouble(),
  265.       );
  266.       widget.onSwipe?.call(dir);
  267.       _resetSwipe();
  268.     }
  269.   }
  271.   void _handleSwipeStart(d) {
  272.     _isSwiping = true;
  273.     _startPos = _endPos = d.localPosition;
  274.   }
  276.   void _handleSwipeUpdate(d) {
  277.     _endPos = d.localPosition;
  278.     _maybeTriggerSwipe();
  279.   }
  281.   void _handleSwipeEnd(d) {
  282.     _maybeTriggerSwipe();
  283.     _resetSwipe();
  284.   }
  286.   @override
  287.   Widget build(BuildContext context) {
  288.     return GestureDetector(
  289.         behavior: HitTestBehavior.translucent,
  290.         onPanStart: _handleSwipeStart,
  291.         onPanUpdate: _handleSwipeUpdate,
  292.         onPanCancel: _resetSwipe,
  293.         onPanEnd: _handleSwipeEnd,
  294.         child: widget.child);
  295.   }
  296. }
  298. class _AnimatedCutoutOverlay extends StatelessWidget {
  299.   const _AnimatedCutoutOverlay(
  300.       {Key? key,
  301.       required this.child,
  302.       required this.cutoutSize,
  303.       required this.animationKey,
  304.       this.duration,
  305.       required this.swipeDir,
  306.       required this.opacity})
  307.       : super(key: key);
  308.   final Widget child;
  309.   final Size cutoutSize;
  310.   final Key animationKey;
  311.   final Offset swipeDir;
  312.   final Duration? duration;
  313.   final double opacity;
  315.   @override
  316.   Widget build(BuildContext context) {
  317.     return Stack(
  318.       children: [
  319.         child,
  320.         // 用 ClipPath 做一个动画抠图
  321.         Animate(
  322.           effects: [
  323.             CustomEffect(
  324.                 builder: _buildAnimatedCutout,
  325.                 curve: Curves.easeOut,
  326.                 duration: duration)
  327.           ],
  328.           key: animationKey,
  329.           onComplete: (c) => c.reverse(),
  330.           // 用一个黑色的蒙层，这里的 child 会变成 effects 里 builder 里的 child
  331.           // 也就是黑色 Container 会在 _buildAnimatedCutout 作为 ClipPath 的 child
  332.           child: IgnorePointer(
  333.               child: Container(color: Colors.black.withOpacity(opacity))),
  334.         ),
  335.       ],
  336.     );
  337.   }
  339.   /// Scales from 1 --> (1 - scaleAmt) --> 1
  340.   Widget _buildAnimatedCutout(BuildContext context, double anim, Widget child) {
  341.     // controls how much the center cutout will shrink when changing images
  342.     const scaleAmt = .25;
  343.     final size = Size(
  344.       cutoutSize.width * (1 - scaleAmt * anim * swipeDir.dx.abs()),
  345.       cutoutSize.height * (1 - scaleAmt * anim * swipeDir.dy.abs()),
  346.     );
  347.     print("### anim ${anim}   ");
  348.     return ClipPath(clipper: _CutoutClipper(size), child: child);
  349.   }
  350. }
  352. /// Creates an overlay with a hole in the middle of a certain size.
  353. class _CutoutClipper extends CustomClipper<Path> {
  354.   _CutoutClipper(this.cutoutSize);
  356.   final Size cutoutSize;
  358.   @override
  359.   Path getClip(Size size) {
  360.     double padX = (size.width - cutoutSize.width) / 2;
  361.     double padY = (size.height - cutoutSize.height) / 2;
  363.     return Path.combine(
  364.       PathOperation.difference,
  365.       Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
  366.       Path()
  367.         ..addRRect(
  368.           RRect.fromLTRBR(
  369.             padX,
  370.             padY,
  371.             size.width - padX,
  372.             size.height - padY,
  373.             Radius.circular(6),
  374.           ),
  375.         )
  376.         ..close(),
  377.     );
  378.   }
  380.   @override
  381.   bool shouldReclip(_CutoutClipper oldClipper) =>
  382.       oldClipper.cutoutSize != cutoutSize;
  383. }
  385. class ShowPathDifference extends StatelessWidget {
  386.   @override
  387.   Widget build(BuildContext context) {
  388.     return Scaffold(
  389.       appBar: AppBar(
  390.         title: Text('ShowPathDifference'),
  391.       ),
  392.       body: Stack(
  393.         alignment: Alignment.center,
  394.         children: [
  395.           Center(
  396.             child: Container(
  397.               width: 300,
  398.               height: 300,
  399.               decoration: BoxDecoration(
  400.                 image: DecorationImage(
  401.                   fit: BoxFit.cover,
  402.                   image: AssetImage("static/gsy_cat.png"),
  403.                 ),
  404.               ),
  405.             ),
  406.           ),
  407.           Center(
  408.             child: CustomPaint(
  409.               painter: ShowPathDifferencePainter(),
  410.             ),
  411.           ),
  412.         ],
  413.       ),
  414.     );
  415.   }
  416. }
  418. class ShowPathDifferencePainter extends CustomPainter {
  419.   @override
  420.   void paint(Canvas canvas, Size size) {
  421.     final paint = Paint();
  422.     paint.color = Colors.blue.withAlpha(160);
  423.     canvas.drawPath(
  424.       Path.combine(
  425.         PathOperation.difference,
  426.         Path()
  427.           ..addRRect(
  428.               RRect.fromLTRBR(-150, -150, 150, 150, Radius.circular(10))),
  429.         Path()
  430.           ..addOval(Rect.fromCircle(center: Offset(0, 0), radius: 100))
  431.           ..close(),
  432.       ),
  433.       paint,
  434.     );
  435.   }
  437.   @override
  438.   bool shouldRepaint(CustomPainter oldDelegate) => false;
  439. }