Flutter Sayfası Kaydırmada nasıl daha hızlı animasyonlar yapılacağını görüntüleyin

Dec 16 2020

Basit bir PageView var:

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

Yapmak istediğim şey, kullanıcı tarafından hızlıca kaydırıldıktan sonra sayfa değiştirme animasyonunu daha hızlı yapmak istiyorum. Bu, bir kullanıcı kaydırma yaptığında ve parmağını kaldırdığında meydana gelir, PageView sonraki sayfaya geçer. Bu yakalama şu anda çok fazla zaman alıyor ve kötü UX sağlıyor. Ancak, yaslama animasyonu hızını ve süresini ayarlama seçeneği yoktur.

Bir dinleyici eklemeye çalıştım:

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

Ne yazık ki bana yardımcı olabilecek hiçbir şey bulamadım. Kaydırmayı geçmeye ve arayarak özel bir kaydırma yapmaya çalıştım

  _pageController.animateToPage(0, .. PARAMS);

bunun işe yaraması için, bir sayfanın ne zaman değişmek üzere olduğunu tespit etmem gerekiyor, böylece animateToPageyöntemle animasyonun üzerine yazabilirim . PageView'da bir sayfanın ne zaman değişmek üzere olduğunu tespit edebilir miyim? onPageChangedAnimasyonun üzerine yazmak için geç olduğu için geri aramayla ilgilenmiyorum .

Yanıtlar

6 JMooreLabs Dec 17 2020 at 04:55

cs adamın cevabı doğru yolda. Ayrıca pskink'e de atıfta bulunun . PageView widget'ının geçiş hızı, programlı yaklaşım olsa bile bir animasyon eğrisine dayalı değildir.

PageView, kaydırma ile kullanıldığında sayfa geçişlerini işlemek için aslında bir Yay Simülasyonu kullanır , bu nedenle "animasyon hızını" değiştirmek için "fizik" özelliğinin geçersiz kılınması gerekir.

Özel Scroll Physics sınıfını kullanarak "animasyon hızını" artırmanın basit bir yolu.

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 yapıcısında şu şekilde kullanılabilir:

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

Ve yay parametrelerinden herhangi birini ayarlamaktan çekinmeyin!