使用 Pageview.builder 在 Flutter 中分页

Question

我正在尝试实现分页，但我找不到任何示例说明我应该如何创建控制器侦听器函数 - 或者我应该把它放在哪里。请指教。如果我也应该添加更多信息，请告诉我。

目前，我的侦听器函数如下所示：

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

目前发生的情况是该函数只被调用一次，之后再也不会被调用。

Answer 1

我猜你正在尝试监听 pageController 以获取当前页面。如果是这种情况，您应该使用 its methods（animateToPage、jumpToPage、nextPage、previousPage）使用 PageController 触发事件，以便它可以唤起您的听众。

I assume my page transitions are handled by the PageView.builder

您可以在这样的文档中找到 PageView.builder 描述：

This constructor is appropriate for page views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

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

我上面包含的 link 有一个示例，您可以参考 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,
              child: Center(
                child: RaisedButton(
                  color: Colors.white,
                  onPressed: () {
                    if (_pageController.hasClients) {
                      _pageController.animateToPage(
                        0,
                        duration: const Duration(milliseconds: 400),
                          curve: Curves.easeInOut,
                      );
                    }
                  },
                  child: Text('Previous'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

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

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

它应该像这样工作：

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

使用 Pageview.builder 在 Flutter 中分页

Pagination in Flutter using Pageview.builder

dart

flutter

flutter-pageview