Page FlutterVoyez comment créer des animations plus rapides lors d'un balayage
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 animateToPage
méthode. Puis-je détecter lorsqu'une page est sur le point de changer dans PageView? Je ne suis pas intéressé par le onPageChanged
rappel car il est tard pour écraser l'animation.
Réponses
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!