首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何滚动多页与颤振PageView分页?

如何滚动多页与颤振PageView分页?
EN

Stack Overflow用户
提问于 2019-05-23 19:50:00
回答 1查看 1.9K关注 0票数 6

我使用PageView.builder显示大约50张图片,覆盖整个视口(viewportFraction: 1.0)。用户应该能够滚动缓慢的图像,通过滑动的速度和速度的快速。当看到所需的图像时,用户应该能够“持有”该图像,然后该图像就会切换到视口。我曾在其他应用程序中看到过这种行为,但我想不出如何用颤振来实现它。

页面快照:true修复了所需的快照,但是不能用一次滑动就可以滚动几个图像。

代码语言:javascript
运行
复制
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上的一个选项,不需要任何编码。

EN

回答 1

Stack Overflow用户

发布于 2022-10-23 13:17:04

插件的使用

您要寻找的是一个旋转木马行为,已经有一些插件可用,例如滑块或一些本机颤振文档的滤光-旋转木马,它也有相同的行为。

基于您的方法(最佳选择)

您已经有了一个很好的想法,将pageSnapping更改为false,以禁用PageView的内部物理。现在,我们可以轻松地扩展(并覆盖快照物理),也可以根据我们的需要配置velocityPerOverscroll (逻辑像素每秒)。

代码语言:javascript
运行
复制
PageView(
   pageSnapping: false,
   physics: const PageOverscrollPhysics(velocityPerOverscroll: 1000),

覆盖Snap-Phyics

代码语言:javascript
运行
复制
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()类的调整。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56282066

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档