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

Question

我想创建一个进程 PageView定制 ScrollPhysics ，因此用户只能滚动到已完成的选项卡。请参阅下图以供引用，右上角是进度(绿色 = 可访问，红色 = 不可访问页面):



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

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

这是我现在的代码:

调用自:

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

Answer 1

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

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 末尾禁用滚动动画，最好在此 post 中解释了对此的解决方法。 .