Flutter仿写抖音TikTok手势交互（二）

来看看本次实现的效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

Gif：user-gold-cdn.xitu.io/2019/4/25/1…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

Github地址：github.com/ditclear/ti…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

下载体验

交互分解

本次主要包含两个下拉的交互：下拉刷新和下拉返回。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

• 下拉刷新

Gif：user-gold-cdn.xitu.io/2019/4/25/1…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

随着手指的向下滑动，offsetY的改变，这里有两个变化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

1. 透明度
2. y轴方向的偏移

透明度这里可以采用Flutter提供的Opacity部件，这是专门用来进行透明度变化的，用法也很简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

Opacity(
  opacity: currentOpacity,
  child:childWidget
)  
复制代码

传入opacity即可，我们要做的也就是将opacity的值用offsetY表示出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

值得注意的是这里有两个透明度的变化:顶部导航栏和下拉刷新内容的文本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

而且二者不会同时出现，当下拉时，顶部导航栏逐渐变为透明，到一定距离时(可以认为是最大下拉距离的一半)就隐藏，下拉刷新内容的文本才会出现，而且其透明度逐渐变为不透明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

我们把下拉的最大滑动距离设为40，那么这个临界点就是20。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

由此可以得出顶部导航栏随着下拉距离透明度变化的公式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

opacity = 1 - offsetY / 20文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

因为offsetY最大可能为40，而opacity必须在0到1之间。因此最后得出的公式是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

opacity = max(0, 1 - offsetY / 20)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

具体实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

当下拉的时候，记录下偏移总量offsetY，控制其大于0并且不超过最大距离即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

onVerticalDragUpdate: (details) {
        final tempY = offsetY + details.delta.dy / 2;
        if (currentIndex == 0) {
          //最大下拉距离不超过40
          if (tempY > 0) {
            if (tempY < 40) {
              setState(() {
                offsetY = tempY;
              });
            } else if (offsetY != 40) {
              setState(() {
                setState(() {
                  offsetY = 40;
                });
              });
              // 当下拉到最大距离时，触发震动效果
              vibrate();
            }
          }
        } else {
          offsetY = 0;
        }
      }

复制代码

当下拉到最大距离时，可以使用vibrate来产生震动效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

当手指离开屏幕时，再进行一个动画，将OffsetY设置为0，并通过setState通知UI重新渲染。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

// 下拉结束
onVerticalDragEnd: (_) {
    if (offsetY != 0) {
       animateToTop();
     }
}

/// 滑动到顶部
///
/// [offsetY] to 0.0
void animateToTop() {
  animationControllerY =
      AnimationController(duration: Duration(milliseconds: offsetY.abs() * 1000 ~/ 40), vsync: this);
  final curve = CurvedAnimation(parent: animationControllerY, curve: Curves.easeOutCubic);
  animationY = Tween(begin: offsetY, end: 0.0).animate(curve)
    ..addListener(() {
      setState(() {
        offsetY = animationY.value;
      });
    });
  animationControllerY.forward();
}
复制代码

• 下拉返回

Gif:user-gold-cdn.xitu.io/2019/4/25/1…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

简单的讲就是下拉的时候，对整个页面进行一个Y轴方向的偏移，当超过一个指定的距离的时候，退出这个页面即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

// 滑动截止时
onPanEnd: (_) {
  if (offsetY > 100) {
    // 下拉距离超过100，即退出页面
    Navigator.pop(context);
  } else if (offsetY > 0) {
    // 下拉距离小于100，恢复原样
    animateToBottom(screenHeight);
  } else if (offsetY < 0) {
    // 上拉根据是否已经显示评论框 [isCommentShow]和offsetY来判断是展开还是收缩
    if (!isCommentShow && offsetY.abs() > screenHeight * 0.2) {
      if (offsetY.abs() > screenHeight * 0.2) {
        animateToTop(screenHeight);
      } else {
        animateToBottom(screenHeight);
      }
    } else {
      if (offsetY.abs() > screenHeight * 0.4) {
        animateToTop(screenHeight);
      } else {
        animateToBottom(screenHeight);
      }
    }
  }
},
复制代码

页面偏移的话，在最外层套一层Transform.translate，注意偏移量需要大于0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

Transform.translate(
  offset: Offset(0, max(0, offsetY)),
  child: childWidget
  ）
复制代码

当你完成了上诉的基本逻辑时，运行之后会发现跟预想的还是有些出入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

背景不透明，当时我认为是有一个黑色的背景，需要设置背景色的透明度，可是在ThemeData里的各种可疑的颜色都试过，发现并没有什么用，后来想到应该是PageRoute的原因。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

在我们调用Navigator进行push操作的时候，都需要传入一个PageRoute，比如说常用的MaterialPageRoute或者CupertinoPageRoute，在PageRoute里有一个opaque，不透明的意思，而且一直为true。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

@override
bool get opaque => true;
复制代码

为了解决上述问题，这里copy了一份MaterialPageRoute的源码然后将opaque改为false就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

/// copy 一份 MaterialPageRoute，修改opaque
class TransparentPage<T> extends PageRoute<T> {
  //...
  /// false 代表背景透明
  @override
  bool get opaque => false;
   
  //...  
}
复制代码

最后，在上一篇文章中有同学问如何在列表中进行Hero动画，在代码中也模拟了一下，保证Hero的tag相同即可，Flutter会在新旧路由切换的时候，对相同tag的Hero部件进行动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

/// detail_page.dart
child: Hero(
  tag: "detail_$currentIndex",
  child: GestureDetector(
      child:PageView(
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
          //..
         ),
      ),
    )
    
/// right_page.dart
child: Hero(
      tag: "detail_0",
      child: Image.asset(
             assets/detail.png",
             fit: BoxFit.fill,
       ),
   ),
复制代码

写在最后

有了手势交互的经验，完成上述的效果还是不难的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

稍微费点时间就是背景色的问题了，不过Flutter是开源的，而且注释和用例都写得非常详细，如果说Flutter框架不能满足你的需求，那么完全可以修改Flutter底层的源码来达到想要的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

到此，本篇的内容也结束了，最后还剩下一个手势冲突的处理，这个内容就放在下一篇吧，关注我获取最新文章哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html

Github地址：github.com/ditclear/ti…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11595.html