Flutter 实现任意tab切换效果

处理和响应触摸效果

我们可以用GestureDetector实现这个效果

GestureDetector(
  ///手势触摸移动开始,这里我们可以记录开始的触摸点,用来判断移动比例和动画的初始点
  onHorizontalDragStart: onStart,
  ///手势触摸移动中,这里生成tab的切换效果,具体效果可以用户自定义,效果代码都在delegate类里.
  onHorizontalDragUpdate: onUpdate,
  ///手势触摸结束,这里判断是切换到下一张卡片还是滑动失败,回滚当前tab
  onHorizontalDragEnd: onEnd,
  child: child,
);

触摸开始

///记录触摸初始点
onStart(DragStartDetails details) {
  dragStart = details.globalPosition;
  ...
}

触摸移动中

onUpdate(DragUpdateDetails details) {
  if (dragStart != null) {
    ///滑动方向,向左或向右
    SlideDirection slideDirection;
    ///滑动进度.[0, 1]
    double slidePercent = 0.0;
    ///当前触摸的点
    final newPosition = details.globalPosition;

    ///拖动距离,如果大于零是向右拖动,如果小于零是向左拖动.
    ///当前点的x轴位置减去触摸起始点的x轴位置
    final dx = newPosition.dx - dragStart.dx;
    slidePercent = (dx / FULL_TRANSITION_PX).abs().clamp(0.0, 1.0).toDouble();
    if (dx > 0) {
      slideDirection = SlideDirection.leftToRight;
    } else if (dx < 0) {
      slideDirection = SlideDirection.rightToLeft;
    } else {
      slideDirection = SlideDirection.none;
      slidePercent = 0;
    }
   ...
  }
}

动画处理

我们在触摸手势结束后开始动画处理,动画分为两个,一个是滑动成功的动画切换到下一个tab,一个是滑动失败(比如滑动距离很小,不需要跳转到下一个页面).这里的value是触摸手势的滑动比例和Animation的value,它们两个的值是相同的,这样可以有连贯的动画效果.

onAnimatedStart({SlideUpdate slideUpdate}) {
  Duration duration;
  ///判断是否成功, 滑动的值 是否大于我们设置的滑动成功的比例,我们这里设置的是0.5.
  _isSlideSuccess = value >= slideSuccessProportion;
  ///成功
  if (_isSlideSuccess) {
    final slideRemaining = 1.0 - value;
    ///计算tab切换的时间
    duration = Duration(
        milliseconds: (slideRemaining / PERCENT_PER_MILLISECOND).round());
    _animationController.duration = duration;
    ///动画向前运行到1,动画结束后切换当前tab为下一页tab
    _animationController.forward(from: value).whenComplete(() =>
        animationCompleted());
  } else {
    ///失败,回退当当前tab
    duration =
        Duration(milliseconds: (value / PERCENT_PER_MILLISECOND).round());
    _animationController.duration = duration;
    ///将动画值回退到0.
    _animationController.reverse(from: value);
  }
}

效果自定义

这里用了AnyTabDelegate抽象类,我们可以继承这个抽象类来实现任意效果.这样做最大的好处就是分离ui和逻辑的处理.

abstract class AnyTabDelegate {
  ///tab列表
  List<Widget> tabs;

  AnyTabDelegate({@required this.tabs});

  int get length => tabs.length;

  ///逻辑处理后调用的build
  Widget build(
    BuildContext context,
    ///当前tab页
    int activeIndex,
    ///下一页
    int nextPageIndex,
    ///动画值,它的value就是手势触摸的值和动画执行的值.
    Animation animation,
    ///触摸的初始点,用于动画的初始点
    Offset startingOffset,
  );
}

这里我们来看一下CircularAnyTabDelegate的实现,这里我们用了ClipOval来剪裁下一页要显示的tab,如果传入的percentage是0则完全不显示,是1这完全显示.

class CircularAnyTabDelegate extends AnyTabDelegate {
  CircularAnyTabDelegate({@required List<Widget> tabs})
      : assert(tabs != null && tabs.length > 0),
        super(tabs: tabs);

  @override
  Widget build(BuildContext context, int activeIndex, int nextPageIndex,
      Animation animation, Offset startingOffset) {
    return Stack(
      children: [
        tabs[activeIndex],
        ClipOval(
          clipper: CircularClipper(
            percentage: animation.value,
            offset: startingOffset,
          ),
          child: tabs[nextPageIndex],
        )
      ],
    );
  }
}

再往下看一下CircularClipper的代码.

class CircularClipper extends CustomClipper<Rect> {
  ///百分比, 0-> 1,1 => 全部显示
  final double percentage;
  ///初始点
  final Offset offset;

  const CircularClipper({this.percentage = 0, this.offset = Offset.zero});

  @override
  Rect getClip(Size size) {
  	///计算触摸初始点到边缘四个角的最大距离,也就是我们剪裁圆的半径
    double maxValue = maxLength(size, offset) * percentage;
    return Rect.fromLTRB(-maxValue + offset.dx, -maxValue + offset.dy, maxValue + offset.dx, maxValue + offset.dy);
  }

  @override
  bool shouldReclip(CircularClipper oldClipper) {
    return percentage != oldClipper.percentage || offset != oldClipper.offset;
  }

  ///     |
  ///   1 |  2
  /// ---------
  ///   3 |  4
  ///     |
  /// 计算矩形内点到边缘的最大距离,这里我们把矩形分成四块,
  /// 点在那一块,最大的距离就是这个点到对角矩形最远那个点的距离
  double maxLength(Size size, Offset offset) {
    double centerX = size.width / 2;
    double centerY = size.height / 2;
    if (offset.dx < centerX && offset.dy < centerY) {
      ///1
      return getEdge(size.width - offset.dx, size.height - offset.dy);
    } else if (offset.dx > centerX && offset.dy < centerY) {
      ///2
      return getEdge(offset.dx, size.height - offset.dy);
    } else if (offset.dx < centerX && offset.dy > centerY) {
      ///3
      return getEdge(size.width - offset.dx, offset.dy);
    } else {
      ///4
      return getEdge(offset.dx, offset.dy);
    }
  }

  double getEdge(double width, double height) {
    return sqrt(pow(width, 2) + pow(height, 2));
  }
}

实现的效果如下:

代码地址

Demo地址

这里触摸的逻辑处理参考的是阿里的flutter-go tab的实现.