Flatter PageView, wie Sie schnellere Animationen beim Wischen erstellen

Dec 16 2020

Ich habe eine einfache Seitenansicht:

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

Was ich tun möchte, ist, dass ich die Animation zum Ändern der Seite machen möchte, nachdem ein Wischen vom Benutzer schneller ausgeführt wurde. Dies geschieht, wenn ein Benutzer wischt und den Finger abhebt. PageView springt zur nächsten Seite. Dieses Einrasten nimmt derzeit so viel Zeit in Anspruch, liefert schlechtes UX. Es gibt jedoch keine Option zum Festlegen der Geschwindigkeit und Dauer der Schnappanimation.

Ich habe versucht, einen Listener hinzuzufügen:

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

Leider konnte ich nichts finden, was mir helfen könnte. Ich habe versucht, den Schlag zu überholen und einen benutzerdefinierten Schlag durch Aufrufen zu erstellen

  _pageController.animateToPage(0, .. PARAMS);

Damit dies funktioniert, muss ich erkennen, wann sich eine Seite ändern wird, damit ich die Animation mit der animateToPageMethode überschreiben kann . Kann ich erkennen, wann sich eine Seite in PageView ändern wird? Ich bin nicht an einem onPageChangedRückruf interessiert, da es spät ist, die Animation zu überschreiben.

Antworten

6 JMooreLabs Dec 17 2020 at 04:55

Die Antwort von cs guy ist genau richtig. Dies gilt auch für pskink. Die Übergangsgeschwindigkeit des PageView-Widgets basiert nicht auf einer Animationskurve, obwohl der programmatische Ansatz dies ist.

PageView verwendet tatsächlich eine Federsimulation, um die Seitenübergänge beim Wischen zu verarbeiten. Daher muss die Eigenschaft "Physik" überschrieben werden, um die "Animationsgeschwindigkeit" zu ändern.

Hier ist eine einfache Möglichkeit, die "Animationsgeschwindigkeit" mithilfe einer benutzerdefinierten Scroll-Physik-Klasse zu erhöhen.

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

Es kann im PageView-Konstruktor folgendermaßen verwendet werden:

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

Und Sie können jederzeit einen der Federparameter einstellen!