如何使用Flutter PageView捕捉页面并滚动多个页面?

时间:2019-05-23 19:50:01

标签: flutter-animation

我正在使用PageView.builder来显示大约50个图像,这些图像覆盖了整个视口(viewportFraction:1.0)。用户应该能够通过缓慢滑动来缓慢滚动图像,并通过快速滑动来快速滚动图像。当看到所需的图像时,用户应该能够“握住”图像,然后将其捕捉到视口。我已经在其他应用程序中看到过这种类型的行为,但无法弄清楚如何使用Flutter。

pageSnapping:true可修复所需的捕捉,但是一击就无法滚动到几张图像。

child: PageView.builder(
      pageSnapping: false,
      onPageChanged: (index) {print(index);} ,
      controller: pageController,
      scrollDirection: Axis.vertical,
      itemCount: dogList.length,
      itemBuilder: (context, index) {
           image = dogList[index];
           return SizedBox.expand(child: Image.file(image, fit:BoxFit.cover)                        
      }),

当通过按住手指在所需图像上停止滚动时,通常会停留在显示的两个相邻图像的一部分上。

更新:我找到了解决方案。如果我用NotificationListener包装PageView.builder,则可以检测ScrollEndNotification并从pageController.page.toInt()获取位置,保存并执行setState。然后,在构建中,我可以将pageController.animateToPage保存到保存的位置。

这相当有效,用户体验需要一些习惯。

这应该是PageController或PageView上的一个选项,不需要任何编码。

0 个答案:

没有答案