使用Pageview.builder在Flutter中进行分页

问题描述

我正在尝试实现分页，但是找不到任何有关如何创建控制器Listener函数或将其放置在何处的示例。请指教。让我知道是否也应该添加更多信息。

当前，我的侦听器功能如下：

(within initState)
    pagecontroller.addListener(() {
      print(pagecontroller.page);
      if (pagecontroller.page == _postslist.length-1) {
        fetchMore();
      }
    });

当前发生的情况是该函数仅被调用一次，随后再也不会被调用。

解决方法

我不知道这个问题是否仍然存在（自从你问起已经六个月了），但由于这个问题仍然没有标记为正确的答案，我会尝试。

如果我理解正确，您希望在到达 PageView 的最后一个项目后将更多项目加载到您的 PageView 中。为此，您的 initState 中不需要侦听器。您只需检查是否已到达 onPageChanged 中的最后一个项目，然后加载更多项目。

它应该是这样工作的：

PageView.builder(
                      controller: _pageController,itemCount: _items.length,onPageChanged: (i) {
                        
                        if (i == _items.length - 1) {
                         getMoreItems().then((value) {
                            setState(() {
                              _items= value;
                            });
                          });
                        }
                      },)

我猜您正在尝试监听pageController来获取currentPage。在这种情况下，您应该使用its methods（animateToPage，jumpToPage，nextPage，previousPage）使用PageController触发事件，以便它可以唤起您的侦听器。

我认为我的页面转换是由PageView.builder处理的

您可以在文档中找到PageView.builder描述，如下所示：

此构造函数适用于具有大量（或无限多个）子级的页面视图，因为仅针对那些实际可见的子级调用该构建器。

因此，在有大量页面的情况下，它支持您有效地构建屏幕。您仍然需要自己处理页面之间的导航。

我上面包含的链接提供了一个示例，您可以参考PageController的用法。为了方便起见，这里将其包括在内：

class MyPageView extends StatefulWidget {
  MyPageView({
    Key key
  }): super(key: key);

  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State < MyPageView > {
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          controller: _pageController,children: [
            Container(
              color: Colors.red,child: Center(
                child: RaisedButton(
                  color: Colors.white,onPressed: () {
                    if (_pageController.hasClients) {
                      _pageController.animateToPage(
                        1,duration: const Duration(milliseconds: 400),curve: Curves.easeInOut,);
                    }
                  },child: Text('Next'),),Container(
              color: Colors.blue,onPressed: () {
                    if (_pageController.hasClients) {
                      _pageController.animateToPage(
                        0,child: Text('Previous'),],);
  }
}

dart flutter-pageview