Flutter Sayfası Kaydırmada nasıl daha hızlı animasyonlar yapılacağını görüntüleyin
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 animateToPage
yöntemle animasyonun üzerine yazabilirim . PageView'da bir sayfanın ne zaman değişmek üzere olduğunu tespit edebilir miyim? onPageChanged
Animasyonun üzerine yazmak için geç olduğu için geri aramayla ilgilenmiyorum .
Yanıtlar
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!