Flutter仿抖音TikTok手势交互（一）

Gif：user-gold-cdn.xitu.io/2019/4/20/1…

Flutter提供了英雄动画来实现这样的过渡效果。 Hero指的是可以在轨道（页面）之间“飞行”的小部件。简单来说，英雄动画就是当路线改变时，有一个共享的widget可以在新旧路线之间进行切换。由于共享widget在新旧路由页面上，位置和外观可能不同，所以在路由切换时会有一个逐渐的过渡，从而产生英雄动画。

/// tiktok_page.dart
Widget build(BuildContext context) {
		return	Hero(
              tag: "detail",
              //child
            )
 )               
 
 /// detail_page.dart
 Widget build(BuildContext context) {
	return Hero(
      tag: "detail",
      // child
        )
  }
复制代码

确保标签一致。

• 详情页互动

Gif：user-gold-cdn.xitu.io/2019/4/20/1…

和首页的思路一样，只不过这里的手势是垂直的。

的布局也是GestureDetector加上Stack然后加上变换。

Hero(
      tag: "detail",
      child: GestureDetector(
        onVerticalDragUpdate: (details){
          // dy 不超过 -screenHeight * 0.6
          dy += details.delta.dy;
          if ((dy < 0 && dy.abs() > screenHeight * 0.6)) {
            dy = -screenHeight * 0.6;
          } else {
            setState(() {});
          }
        },
        child: Stack(
          children: <Widget>[
            Image.asset(
              "assets/detail.png",
              fit: BoxFit.fitWidth,
              width: screenWidth,
              height: screenHeight,
            ),
            Transform.translate(
              offset: Offset(0, dy + screenHeight),
              child: Container(
                  height: screenHeight * 0.6,
                  child: GestureDetector(
                    onTap: () {},
                    child: Image.asset(
                        "assets/comment.png",),
                  )
              ),
            ),
          ],
        ),
      ),
    );
复制代码

使用动画根据手指离开屏幕时的偏移量进行调整。

onVerticalDragEnd: (_){
          // 滑动截止时，根据 dy 判断是展开还是回缩
          if (dy < 0) {
            if (!isCommentShow && dy.abs() > screenHeight * 0.2) {
              if (dy.abs() > screenHeight * 0.2) {
                animateToTop(screenHeight);
              } else {
                animateToBottom(screenHeight);
              }
            } else {
              if (dy.abs() > screenHeight * 0.4) {
                animateToTop(screenHeight);
              } else {
                animateToBottom(screenHeight);
              }
            }
          }
        },
复制代码

写在最后

一般来说，这些交互依赖于手势的检测。与Android相比，Flutter有一切都是widget的理念，

Gesture Detector和Hero都是widget，并提供了很多回调函数。再加上数据驱动的UI和Flutter优秀的渲染机制，降低了开发者的石头交互难度。

Github地址：github.com/ditclear/ti…

作者：ditclear
链接：https://juejin.im/post/5cbadb71f265da037c7c7ce19fets：版权归作者所有。如需商业转载，请联系求作者授权。非商业转载请来源。