Flutter pageview：查找第一页和最后一页并滑动方向答案

【问题标题】：Flutter pageview : Find first and last page and swipe directionsFlutter pageview：查找第一页和最后一页并滑动方向
【发布时间】：2019-08-09 03:44:21
【问题描述】：

我正在使用 Flutter 开发一个图书应用程序。我正在使用每一章的页面浏览量来显示书页。问题是当用户在最后一页向左滑动时，我应该从数据库中加载下一章以及章节标题。反之亦然，在上一章的第一页上向右滑动。那么如何在第一页或最后一页找到该用户并向左或向右滑动呢？

【问题讨论】：

看看RefreshIndicator如何检测边界过度滚动（甚至直接使用它？）
而且，您检查过RefreshIndicator 来源吗？如果是这样，您是否注意到它是如何检测过度滚动的？
RefreshIndicator 使用 NotificationListener。我在页面视图中使用 SingleChildScrollView。因此，在任何方向上，如果我使用 NotificationListener.，我都会收到没有方向信息的通知
然后尝试其他通知

标签： android dart flutter

【解决方案1】：

您可以通过将onPageChanged 方法index 与您的collection.length 进行比较来检查它是否是第一页的最后一页，如下所示：

PageView(
  onPageChanged: (index) {
    if (index + 1 == myCollection.length) {
      loadNextChapter();
    } else if (index == 0) {
      loadPreviousChapter();
    }
  },
);

编辑 1：

使用 GestureDetector：

PageView mPageView = PageView(
  onPageChanged: (index) {
    if (index + 1 == myCollection.length) {
      hasReachedEnd = true;
    } else if (index == 0) {
      hasReachedFirst = true
    } else {
      hasReachedFirst = false
      hasReachedEnd = false
    }
  },
);

GestureDetector mGestureDetector = GestureDetector(
  child: mPageView
  onHorizontalDragEnd: (dragEndDetails) {
    if (dragEndDetails.primaryVelocity < 0 && hasReachedStart) {
      loadPreviousChapter(); //if you want to go to the next page once fetched you can do so by adding .then()
    } else if (dragEndDetails.primaryVelocity > 0 && hasReachedEnd) {
      loadNextChapter();
    }
  }
);

每当我们向左或向右滚动时，我们都会检查我们正在滑动的方向以及我们是在项目列表的末尾还是开头。

每当我们滚动到新页面时，我们都会检查我们是在项目的末尾还是开头。

结合这些会给你想要的效果。

【讨论】：

谢谢。但是当 index 为 0 时如何知道用户向左或向右滑动呢？
您真的要在用户尝试滚动但内容不存在后加载下一页吗？使用上面的答案，您将在用户到达最后一页时加载下一部分页面，从而实现无缝滚动体验。 onPageChanged 在初始状态下不会触发，所以你不会在启动时加载上一章。您从哪个方向滑动（除非我误解了您的问题）无关紧要。当用户在任何方向到达终点时，您总是希望加载下一组页面。
如果用户在最后一页向左滑动？而不是去下一章？
如果我为浏览量添加 GestureDetector，则 GestureDetector 仅调用第一页。如果我为 pageview 中的每个页面添加 GestureDetector，则调用 GestureDetector 但 pageview 不滚动。
GestureDetector 没有为我接收到任何水平拖动事件。只有onHorizontalDragCancel 和onHorizontalDragDown 正在触发。

【解决方案2】：

我使用 OverscrollIndicatorNotification 解决了这个问题。有章节和子章节。

    return new Container(
    child: NotificationListener<OverscrollIndicatorNotification>(
        onNotification: ((notification) {
          print(notification.toString());
          if (notification is OverscrollIndicatorNotification) {
            if (notification.depth == 0 ||_listOfCat.indexOf(_category)==0) {
              int index = _listOfSubCat.indexOf(_subCategory);
              if (notification.leading) {
                if (index != 0) {
                  setSubCatId(_listOfSubCat[index - 1]);
                } else {
                  index = _listOfCat.indexOf(_category);
                  if (index != 0) {
                    setCatId(_listOfCat[index - 1]);
                  }
                }
              } else {
                if (index != _listOfSubCat.length - 1) {
                  setSubCatId(_listOfSubCat[index + 1]);
                } else {
                  index = _listOfCat.indexOf(_category);
                  if (index != _listOfCat.length - 1) {
                    setCatId(_listOfCat[index + 1]);
                  }
                }
              }
            }
          }
          return true;
        }),
        child: _pageView=PageView(
          ....
        )
    ));

【讨论】：

您能否在代码中添加一些 cmets 来解释每一行是什么和/或删除您的自定义逻辑以及类别和子类别。这会帮助其他人。
对于我的用例 - 这是比 GestureDetector 和 PageView 与 NeverScrollableScrollPhysics 组合更好的解决方案，因为这种组合也改变了滚动的感觉。使用您的解决方案，我可以轻松检测第一页和最后一页的滚动尝试并保持原始感觉！
最后我决定使用OverscrollNotification 而不是OverscrollIndicatorNotification，因为我可以在<OverscrollNotification>.overscroll 中获得过度滚动的数量。所以我只能对显着量的过度滚动做出反应，而忽略最终用户的意外拖动事件。