Page FlutterVoyez comment créer des animations plus rapides lors d'un balayage

Dec 16 2020

J'ai une vue de page simple:

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

Ce que je voudrais faire, c'est que je souhaite rendre l'animation de changement de page plus rapide après un balayage par l'utilisateur. Cela se produit lorsqu'un utilisateur fait un balayage et soulève le doigt, PageView passe à la page suivante. Cette capture prend actuellement beaucoup de temps, fournit une mauvaise UX. Cependant, il n'y a pas d'option pour définir la vitesse et la durée de l'animation de capture.

J'ai essayé d'ajouter un auditeur:

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

Malheureusement, je n'ai rien trouvé qui puisse m'aider. J'ai essayé de dépasser le balayage et de faire un balayage personnalisé en appelant

  _pageController.animateToPage(0, .. PARAMS);

pour que cela fonctionne, je dois détecter quand une page est sur le point de changer, afin de pouvoir écraser l'animation avec la animateToPageméthode. Puis-je détecter lorsqu'une page est sur le point de changer dans PageView? Je ne suis pas intéressé par le onPageChangedrappel car il est tard pour écraser l'animation.

Réponses

6 JMooreLabs Dec 17 2020 at 04:55

La réponse de cs guy est sur la bonne voie. Merci également à pskink . La vitesse de transition du widget PageView n'est pas basée sur une courbe d'animation, même si l'approche programmatique l'est.

PageView utilise en fait une simulation de printemps pour gérer les transitions de page lorsqu'il est utilisé avec le balayage , de sorte que la propriété «physique» doit être remplacée pour modifier la «vitesse d'animation».

Voici un moyen simple d'augmenter la "vitesse d'animation" en utilisant la classe Scroll Physics personnalisée.

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

Il peut être utilisé dans le constructeur PageView comme ceci:

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

Et n'hésitez pas à ajuster l'un des paramètres du ressort!