垂直可滚动页面视图中的垂直可滚动列表视图

Question

在此寻求帮助，乍看起来似乎很简单，但无法弄清楚...

基本上，我试图在垂直可滚动的pageView中创建一个具有垂直可滚动的listView的页面。例如，列表在页面2上，用户在页面1上，然后向下滚动到页面2。现在，他向下滚动直到列表的末尾，我希望他能够滚动到比页面更多的位置3。

有关如何实现此目标的任何建议？

Answer 1

对我有用的是，我们需要附加ListView的滚动控制器以侦听滚动位置。然后页面控制器将移至下一页或上一页。

PageController pageController;
ScrollController scrollController;

@override
void initState() {
  super.initState();

  pageController = PageController();
  scrollController = ScrollController();

  scrollController.addListener(() {
    // listView reaches the bottom
    if (scrollController.offset >= scrollController.position.maxScrollExtent - 100 &&
      !scrollController.position.outOfRange) {
      pageController.nextPage(duration: const Duration(seconds: 1), curve: ElasticOutCurve());
    }

    // listView reaches the top
    if (scrollController.offset <= scrollController.position.minScrollExtent &&
        !scrollController.position.outOfRange) {
      pageController.previousPage(duration: const Duration(seconds:1), curve: ElasticOutCurve());
    }
  });
}

不要忘记连接控制器

PageView(
  controller: pageController,
  ...


ListView(
  controller: scrollController,
  ...