[英]Scroll multiple pages in PageView easier
I am building a horizontally scrollable list in flutter using PageView, however, I would like to be able to scroll multiple pages at the same time.我正在使用 PageView 在 flutter 中构建一个可水平滚动的列表,但是,我希望能够同时滚动多个页面。 It is currently possible if I scroll really fast, but it is far from ideal.如果我滚动得非常快,目前是可能的,但这远非理想。 Another option is to set pageSnapping to false, but then it does not snap at all, which is not what I want.另一种选择是将 pageSnapping 设置为 false,但它根本不捕捉,这不是我想要的。
I am thinking that it might be possible to change pageSnapping from false to true if the scroll velocity is under a certain treshhold, but i don't know how I would get said velocity.我认为如果滚动速度低于某个阈值,可能可以将 pageSnapping 从 false 更改为 true,但我不知道如何获得所述速度。
The app i am building looks something like this .我正在构建的应用程序看起来像这样。
All help appreciated!所有帮助表示赞赏!
Interesting problem!有趣的问题!
To gain the velocity of a swipe you can use a GestureDetector, unfortunately when trying to use both a GestureDetector and PageView then the PageView steals the focus from the GestureDetector so they can not be used in unison.要获得滑动的速度,您可以使用 GestureDetector,不幸的是,当尝试同时使用 GestureDetector 和 PageView 时,PageView 会从 GestureDetector 窃取焦点,因此它们不能同时使用。
GestureDetector(
onPanEnd: (details) {
Velocity velocity = details.velocity;
print("onPanEnd - velocity: $velocity");
},
)
Another way however was to use DateTime in the PageView's onPageChanged to measure the change in time, instead of velocity.然而,另一种方法是在 PageView 的 onPageChanged 中使用 DateTime 来测量时间的变化,而不是速度。 However this is not ideal, the code I wrote is like a hack.然而这并不理想,我写的代码就像一个黑客。 It has a bug (or feature) that the first swipe after a standstill on a page will only move one page, however consecutive swipes will be able to move multiple pages.它有一个错误(或功能),即在页面静止后第一次滑动只会移动一页,但是连续滑动将能够移动多页。
bool pageSnapping = true;
List<int> intervals = [330, 800, 1200, 1600]; // Could probably be optimised better
DateTime t0;
Widget timeBasedPageView(){
return PageView(
onPageChanged: (item) {
// Obtain a measure of change in time.
DateTime t1 = t0 ?? DateTime.now();
t0 = DateTime.now();
int millisSincePageChange = t0.difference(t1).inMilliseconds;
print("Millis: $millisSincePageChange");
// Loop through the intervals, they only affect how much time is
// allocated before pageSnapping is enabled again.
for (int i = 1; i < intervals.length; i++) {
bool lwrBnd = millisSincePageChange > intervals[i - 1];
bool uprBnd = millisSincePageChange < intervals[i];
bool withinBounds = lwrBnd && uprBnd;
if (withinBounds) {
print("Index triggered: $i , lwr: $lwrBnd, upr: $uprBnd");
// The two setState calls ensures that pageSnapping will
// always return to being true.
setState(() {
pageSnapping = false;
});
// Allows some time for the fast pageChanges to proceed
// without being pageSnapped.
Future.delayed(Duration(milliseconds: i * 100)).then((val){
setState(() {
pageSnapping = true;
});
});
}
}
},
pageSnapping: pageSnapping,
children: widgets,
);
}
I hope this helps in some way.我希望这在某种程度上有所帮助。
Edit: another answer based upon Hannes' answer.编辑:另一个基于 Hannes 回答的回答。
class PageCarousel extends StatefulWidget {
@override
_PageCarouselState createState() => _PageCarouselState();
}
class _PageCarouselState extends State<PageCarousel> {
int _currentPage = 0;
PageController _pageController;
int timePrev; //Tid
double posPrev; //Position
List<Widget> widgets = List.generate(
10,
(item) =>
Container(
padding: EdgeInsets.all(8),
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Index $item"),
],
),
),
));
@override
void initState() {
super.initState();
_pageController = PageController(
viewportFraction: 0.75,
initialPage: 0,
);
}
int boundedPage(int newPage){
if(newPage < 0){
return 0;
}
if(newPage >= widgets.length){
return widgets.length - 1;
}
return newPage;
}
@override
Widget build(BuildContext context) {
return Container(
child: Listener(
onPointerDown: (pos){
posPrev = pos.position.dx;
timePrev = DateTime.now().millisecondsSinceEpoch;
print("Down");
print("Time: $timePrev");
},
onPointerUp: (pos){
int newTime = DateTime.now().millisecondsSinceEpoch;
int timeDx = newTime - timePrev;
double v = (posPrev - pos.position.dx) / (timeDx);
int newPage = _currentPage + (v * 1.3).round();
print("Velocity: $v");
print("New Page: $newPage, Old Page: $_currentPage");
if (v < 0 && newPage < _currentPage || v >= 0 && newPage > _currentPage) {
_currentPage = boundedPage(newPage);
}
_pageController.animateToPage(_currentPage,
duration: Duration(milliseconds: 800), curve: Curves.easeOutCubic);
},
child: PageView(
controller: _pageController,
physics: ClampingScrollPhysics(), //Will scroll to far with BouncingScrollPhysics
scrollDirection: Axis.horizontal,
children: widgets,
),
),
);
}
}
This should ensure a decent multi page navigation.这应该确保一个体面的多页面导航。
To anyone coming here in the future, i finally solved this using a Listener
insted of a GestureDetector
to calculate the code manually.对于将来来到这里的任何人,我最终使用GestureDetector
的Listener
GestureDetector
手动计算代码解决了这个问题。
Here is the relevant code:这是相关的代码:
class HomeWidget extends StatefulWidget {
@override
_HomeWidgetState createState() => _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
int _currentPage = 0;
PageController _pageController;
int t; //Tid
double p; //Position
@override
initState() {
super.initState();
_pageController = PageController(
viewportFraction: 0.75,
initialPage: 0,
);
}
@override
Widget build(BuildContext context) {
return Container(
child: Listener(
onPointerMove: (pos) { //Get pointer position when pointer moves
//If time since last scroll is undefined or over 100 milliseconds
if (t == null || DateTime.now().millisecondsSinceEpoch - t > 100) {
t = DateTime.now().millisecondsSinceEpoch;
p = pos.position.dx; //x position
} else {
//Calculate velocity
double v = (p - pos.position.dx) / (DateTime.now().millisecondsSinceEpoch - t);
if (v < -2 || v > 2) { //Don't run if velocity is to low
//Move to page based on velocity (increase velocity multiplier to scroll further)
_pageController.animateToPage(_currentPage + (v * 1.2).round(),
duration: Duration(milliseconds: 800), curve: Curves.easeOutCubic);
}
}
},
child: PageView(
controller: _pageController,
physics: ClampingScrollPhysics(), //Will scroll to far with BouncingScrollPhysics
scrollDirection: Axis.horizontal,
children: <Widget>[
//Pages
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.