我使用PageView.builder显示大约50张图片,覆盖整个视口(viewportFraction: 1.0)。用户应该能够滚动缓慢的图像,通过滑动的速度和速度的快速。当看到所需的图像时,用户应该能够“持有”该图像,然后该图像就会切换到视口。我曾在其他应用程序中看到过这种行为,但我想不出如何用颤振来实现它。
页面快照: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)
}),
当滚动通过按住所需图像的手指停止时,它通常与两个相邻图像的部分保持在一起。
更新:我找到了一个解决方案。如果我用一个PageView.builder包装NotificationListener,我可以检测到ScrollEndNotification并从pageController.page.toInt()获取位置,保存它并执行setState。然后,在构建中,我可以对保存的位置执行pageController.animateToPage。
这是相当好的工作,用户体验需要一些习惯。
这应该是PageController或PageView上的一个选项,不需要任何编码。
发布于 2022-10-23 13:17:04
插件的使用
您要寻找的是一个旋转木马行为,已经有一些插件可用,例如滑块或一些本机颤振文档的滤光-旋转木马,它也有相同的行为。
基于您的方法(最佳选择)
您已经有了一个很好的想法,将pageSnapping
更改为false,以禁用PageView的内部物理。现在,我们可以轻松地扩展(并覆盖快照物理),也可以根据我们的需要配置velocityPerOverscroll
(逻辑像素每秒)。
PageView(
pageSnapping: false,
physics: const PageOverscrollPhysics(velocityPerOverscroll: 1000),
覆盖Snap-Phyics
class PageOverscrollPhysics extends ScrollPhysics {
///The logical pixels per second until a page is overscrolled.
///A satisfying value can be determined by experimentation.
///
///Example:
///If the user scroll velocity is 3500 pixel/second and [velocityPerOverscroll]=
///1000, then 3.5 pages will be overscrolled/skipped.
final double velocityPerOverscroll;
const PageOverscrollPhysics({
ScrollPhysics? parent,
this.velocityPerOverscroll = 1000,
}) : super(parent: parent);
@override
PageOverscrollPhysics applyTo(ScrollPhysics? ancestor) {
return PageOverscrollPhysics(
parent: buildParent(ancestor)!,
);
}
double _getTargetPixels(ScrollMetrics position, double velocity) {
double page = position.pixels / position.viewportDimension;
page += velocity / velocityPerOverscroll;
double pixels = page.roundToDouble() * position.viewportDimension;
return pixels;
}
@override
Simulation? createBallisticSimulation(
ScrollMetrics position, double velocity) {
// If we're out of range and not headed back in range, defer to the parent
// ballistics, which should put us back in range at a page boundary.
if ((velocity <= 0.0 && position.pixels <= position.minScrollExtent) ||
(velocity >= 0.0 && position.pixels >= position.maxScrollExtent)) {
return super.createBallisticSimulation(position, velocity);
}
final double target = _getTargetPixels(position, velocity);
if (target != position.pixels) {
return ScrollSpringSimulation(spring, position.pixels, target, velocity,
tolerance: tolerance);
}
return null;
}
@override
bool get allowImplicitScrolling => false;
}
虽然PageOverscrollPhysics看起来非常复杂,但本质上只是对PageScrollPhysics()
类的调整。
https://stackoverflow.com/questions/56282066
复制相似问题