Flutter Page Zobacz, jak tworzyć szybsze animacje po przesunięciu

Dec 16 2020

Mam prosty widok strony:

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

Chciałbym, aby animacja zmiany strony po przesunięciu przez użytkownika była szybsza. Dzieje się tak, gdy użytkownik przesunie palcem i podniesie palec, a Widok strony przeskakuje do następnej strony. To przyciąganie zajmuje obecnie tyle czasu, że zapewnia zły UX. Nie ma jednak opcji ustawiania szybkości i czasu trwania animacji przyciągania.

Próbowałem dodać słuchacza:

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

Niestety nie mogłem znaleźć niczego, co mogłoby mi pomóc. Próbowałem wyprzedzić machnięcie i wykonać niestandardowe machnięcie, dzwoniąc

  _pageController.animateToPage(0, .. PARAMS);

aby to zadziałało, muszę wykryć, kiedy strona ma się zmienić, aby móc nadpisać animację animateToPagemetodą method. Czy mogę wykryć, kiedy strona ma się zmienić w widoku strony? Nie interesuje mnie onPageChangedoddzwanianie, ponieważ jest późno na nadpisanie animacji.

Odpowiedzi

6 JMooreLabs Dec 17 2020 at 04:55

Odpowiedź cs guy jest na dobrej drodze. Również zasługa pskink . Szybkość przejścia widżetu PageView nie jest oparta na krzywej animacji, mimo że podejście programistyczne jest.

PageView w rzeczywistości używa Spring Simulation do obsługi przejść między stronami podczas przesuwania , więc właściwość „physics” musi zostać nadpisana, aby zmienić „prędkość animacji”.

Oto prosty sposób na zwiększenie „szybkości animacji” przy użyciu niestandardowej klasy Scroll 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,
      );
}

Można go użyć w konstruktorze PageView w następujący sposób:

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

I nie krępuj się regulować dowolne parametry sprężyny!