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 中最好地解释了对此的解决方法。

Flutter中的渐进式PageView的自定义滚动物理

1 个答案: