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

html5 • • 问答

我有一个简单的页面视图：

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

我想做的是我想让用户更快地完成滑动后的页面更改动画。当用户滑动手指并抬起手指时，就会发生这种情况，PageView 会对齐到下一页。这种捕捉目前需要很多时间，提供糟糕的用户体验。但是，没有设置捕捉动画速度和持续时间的选项。

我试图添加一个监听器：

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

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

  _pageController.animateToPage(0, .. PARAMS);

为此，我需要检测页面何时即将更改，以便我可以使用animateToPage方法覆盖动画。我可以检测页面何时在 PageView 中更改吗？我对onPageChanged回调不感兴趣，因为覆盖动画已经晚了。

回答

cs guy的答案是正确的。也归功于pskink。即使编程方法是，PageView 小部件的过渡速度也不是基于动画曲线。

当与 swiping 一起使用时，PageView 实际上使用 Spring Simulation 来处理页面转换，因此必须覆盖“physics”属性以更改“动画速度”。

这是通过使用自定义滚动物理类来提高“动画速度”的简单方法。

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,
      );
}

它可以在 PageView 构造函数中使用，如下所示：

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

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

以上是FlutterPageView如何在滑动时制作更快的动画的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>