FlutterPageViewスワイプでより高速なアニメーションを作成する方法

Dec 16 2020

私は単純なPageViewを持っています:

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

私がやりたいのは、ユーザーがスワイプした後のページ変更アニメーションをより速くしたいということです。これは、ユーザーがスワイプして指を離すと、PageViewが次のページにスナップしたときに発生します。このスナップは現在非常に時間がかかり、悪いUXを提供します。ただし、スナップアニメーションの速度と期間を設定するオプションはありません。

リスナーを追加しようとしました:

_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アニメーションを上書きするのが遅いので、コールバックには興味がありません。

回答

6 JMooreLabs Dec 17 2020 at 04:55

csguyの答えは順調です。また、pskinkの功績もあります。Pag​​eViewウィジェットの遷移速度は、プログラムによるアプローチであっても、アニメーション曲線に基づいていません。

PageViewは、実際にはSpring Simulationを使用して、スワイプ使用するときにページ遷移を処理するため、「アニメーション速度」を変更するには、「物理」プロパティをオーバーライドする必要があります。

これは、カスタムScrollPhysicsクラスを使用して「アニメーション速度」を上げる簡単な方法です。

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(),)

そして、スプリングパラメータのいずれかを自由に調整してください!