时间戳

首页 > 解决方案 > Flutter 中用于进度 PageView 的自定义滚动物理

flutter - Flutter 中用于进度 PageView 的自定义滚动物理

问题描述

我想PageView用 custom创建一个进度ScrollPhysics，所以用户只能滚动到已完成的选项卡。请参阅下图以供参考，右上角是进度（绿色 = 可访问，红色 = 不可访问页面）：

1]

在屏幕截图中，我完成了第 1 页和第 2 页，我不想让用户滑动到现在正在发生的第 3 页。scroll_physics.dart我阅读了 iOS 和 Android 实现中的示例。但我还是被困住了。

我在这里尝试过，但它被窃听了。您可以阻止用户向右移动，但如果最后一个可访问的页面不像屏幕截图中那样完全可见，则滚动已被阻止，您无法进一步向右滚动。

这是我现在的代码：

调用自：

PageView(
          controller: PageController(
            initialPage: model.initallPage,
          ),
          children: pages,
          physics: model.currentPage >= model.lastAccessiblePage ? CustomScrollPhysics(CustomScrollStatus()..rightEnd = true) : ScrollPhysics(),
          onPageChanged: (value) {
            model.currentPage = value;
          },
        ),

自定义 ScrollPhysics：

class CustomScrollStatus {
  bool leftEnd = false;
  bool rightEnd = false;
  bool isGoingLeft = false;
  bool isGoingRight = false;
}

class CustomScrollPhysics extends ScrollPhysics {
  final CustomScrollStatus status;

  CustomScrollPhysics(
    this.status, {
    ScrollPhysics parent,
  }) : super(parent: parent);

  @override
  CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics(this.status, parent: buildParent(ancestor));
  }

  @override
  double applyPhysicsToUserOffset(ScrollMetrics position, double offset) {
    status.isGoingLeft = offset.sign < 0;
    return offset;
  }

  @override
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    if (value < position.pixels && position.pixels <= position.minScrollExtent) {
      print('underscroll');
      return value - position.pixels;
    }
    if (position.maxScrollExtent <= position.pixels && position.pixels < value) {
      print('overscroll');
      return value - position.pixels;
    }
    if (value < position.minScrollExtent && position.minScrollExtent < position.pixels) {
      print('hit top edge');
      return value - position.minScrollExtent;
    }
    if (position.pixels < position.maxScrollExtent && position.maxScrollExtent < value) {
      print('hit bottom edge');
      return value - position.maxScrollExtent;
    }

    if (status.leftEnd) print("leftEnd");
    if (status.rightEnd) print("rightEnd");
    if (status.isGoingLeft) print("isGoingLeft");
    if (status.isGoingRight) print("isGoingRight");

    // do something to block movement > accesssible page

    print('default');
    return 0.0;
  }
}

编辑：

我想到了一个完全不同的解决方案。动态更改 PageView 的子项。我仍然对覆盖“ScrollPhysics”解决方案感兴趣，因为在我看来它更干净。

children: pages

标签： flutteroverriding

解决方案

如果您正在使用PageView.builder，则可以返回 null 以指示其他页面不可访问。你可以在这里查看我的答案，这有点类似于这个问题。

PageView.builder(
  controller: pageController,
  onPageChanged: getCurrentPage,
  itemBuilder: (context, position) {
    // stop at 5
    if (position == 5) return null;

    // else, create a page
    return createPage(position + 1);
  },
),

至于在 PageView 结束时禁用滚动动画，解决方法最好在这篇文章中解释。

推荐阅读