首页 > 解决方案 > 如何在浏览列表时使用速度

问题描述

所以目前我正在通过检查 endTouch 的位置(屏幕的左侧或右侧)来决定采用哪种方式捕捉,然后使用 150 毫秒的持续时间对动画进行硬编码。

我正在尝试使用滚动速度来决定当用户放手时在哪里捕捉。(想法是用户不应该一直滑动到中间以滑动到下一张或上一张卡片)。

在此处输入图像描述

这是我的AnimationController

finishScrollAnimation = AnimationController(
      duration: Duration(milliseconds: 150),
      vsync: this,
    )
    ..addListener(() {
      setState(() {
        scrollPercent = lerpDouble(finishScrollStart, finishScrollEnd, finishScrollAnimation.value);
      });
    })
    ;

这是_onHorizontalDragEnd方法

 void _onHorizontalDragEnd(DragEndDetails details) {
    final unitsPerSecondX = details.velocity.pixelsPerSecond.dx / context.size.width;
    final unitsPerSecond = Offset(unitsPerSecondX, 0.0);
    final unitVelocity = unitsPerSecond.distance;
    print(unitVelocity);

    final numCards = 3;
    finishScrollStart = scrollPercent;  // this is the endTouch
    finishScrollEnd = (scrollPercent * numCards).round() / numCards;  // this just calculating where to snap
    finishScrollAnimation.forward(from: 0.0);

    setState(() {
      startDrag = null;
      startDragScrollPercent = null;
    });
  }

这大致是重新创建My current output所需的所有代码。

我无法围绕它包装逻辑,因此非常感谢任何帮助

标签: flutterflutter-layoutflutter-animation

解决方案


推荐阅读