Flutter PageView如何在滑动时制作更快的动画

问题描述

我有一个简单的PageView:

  PageView(控制器:_pageController，物理:PlatformScrollPhysics.getPlatformScrollPhysics()，孩子们: [文字(我是文字1")，文字(我是文字")，]，onPageChanged :(索引){打印(页面已更改$ index")；}，); 

我想做的是我希望在用户完成滑动后使页面更改动画更快.当用户滑动并抬起手指，PageView会跳至下一页时，会发生这种情况.目前，这种捕捉需要花费大量时间，并提供了糟糕的用户体验.但是，没有选项可以设置捕捉动画的速度和持续时间.

我尝试添加一个侦听器:

  _pageController.addListener((){_pageController.position//这个变量包含很多信息，但是我找不到我想要的东西打印("LISTENERRR $ {_ pageController.position}"))；}); 

可悲的是，我找不到任何可以帮助我的东西.我试图超越滑动并通过致电进行自定义滑动

  _pageController.animateToPage(0，.. PARAMS); 

要使其正常工作，我需要检测页面何时将要更改，以便可以使用 animateToPage 方法改写动画.我可以检测页面何时在PageView中更改吗?我对 onPageChanged 回调不感兴趣，因为现在覆盖动画已经太晚了.

解决方案

cs guy 的答案是正确的步入正轨.还应归功于 pskink .即使采用编程方式，PageView小部件的过渡速度也不是基于动画曲线的./p>

PageView在与滑动一起使用时实际上使用Spring Simulation来处理页面转换，因此物理"必须重写属性以更改动画速度".

这是增加动画速度"的简单方法.通过使用自定义Scroll Physics类.

  import'package:flutter/cupertino.dart';导入'package:flutter/physics.dart';CustomPageViewScrollPhysics类扩展了ScrollPhysics {const CustomPageViewScrollPhysics({ScrollPhysics parent}):超级(父母:父母);@overrideCustomPageViewScrollPhysics applyTo(ScrollPhysics祖先){返回CustomPageViewScrollPhysics(父级:buildParent(祖先));}@overrideSpringDescription获得spring =>const SpringDescription(质量:80，刚度:100，阻尼:1);} 

它可以像这样在PageView构造函数中使用:

  PageView(...物理:const CustomPageViewScrollPhysics()，) 

并随时调整任何弹簧参数！

I have a simple PageView:

PageView(
  controller: _pageController,
  physics: PlatformScrollPhysics.getPlatformScrollPhysics(),
  children: [
    Text("I am Text1"),
    Text("I am Text"),
  ],
  onPageChanged: (index) {
    print("page changed $index");
  },
);

What I would like to do is I want to make the page changing animation after a swipe is done by user faster. This happens when a user does a swipe and lifts off the finger, PageView snaps to the next page. This snapping currently takes around so much time, provides bad UX. However, there is no option to set the snapping animation speed and duration.

I have tried to add a listener:

_pageController.addListener(() {
      _pageController.position // this variable holds lots of information but yet I couldnt find what i looked for
      print("LISTENERRR ${_pageController.position}");
    });

Sadly, I couldnt find anything that can help me. I tried to overtake the swipe and make a custom swipe by calling

  _pageController.animateToPage(0, .. PARAMS);

for this to work, I need to detect when a page is about to change, so that I can overwrrite the animation with animateToPage method. Can I detect when a page is about to change in PageView? I am not interested in onPageChanged callback as it is late to overwrite the animation.

解决方案

cs guy's answer is right on track. Also credit to pskink.The PageView widget's transition speed isn't based on an animation curve even though the programmatic approach is.

PageView actually uses a Spring Simulation to handle the page transitions when used with swiping, so the "physics" property has to be overridden to change the "animation speed".

Here is a simple way to increase the "animation speed" by using custom Scroll Physics class.

import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 80,
        stiffness: 100,
        damping: 1,
      );
}

It can be used in the PageView constructor like this:

PageView(... physics: const CustomPageViewScrollPhysics(),)

And feel free to adjust any of the spring parameters!

这篇关于Flutter PageView如何在滑动时制作更快的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！