如何在Flutter中创建无限PageView

时间:2019-11-26 10:26:45

标签: flutter flutter-pageview

如何在PageView中创建受支持的Flutter圆形滚动?这意味着当我站在0页面上时,我可以向左滚动到最后一页。

已更新:我回答了这个问题,并更新了要点。

2 个答案:

答案 0 :(得分:0)

我所做的就是将页面控制器的initialPage设置为10000 * pageCount,在页面视图本身中,我有itemBuilder: (context, index) => pages[index % pageCount],itemCount: null。它不是真正的无限,但是大多数用户不会向后滚动10000页,因此适用于我的用例。据我所知,没有一种优雅的方法可以使它真正无限。您可能会设置一个侦听器,以便每当controller.page变为0时,都将其设置回10000 * pageCount或类似的值。

答案 1 :(得分:0)

我在这里找到了解决方案。我创建了一个带有2个条的CustomScrollView。一个向前走,一个向后走。但是,我必须计算清单是否短。

typedef Widget Builder(BuildContext buildContext, int index);

class InfiniteScrollView extends StatefulWidget {
  final Key center = UniqueKey();
  final Builder builder;
  final int childCount;

  InfiniteScrollView(
      {Key key, @required this.builder, @required this.childCount})
      : super(key: key);

  @override
  _InfiniteScrollViewState createState() => _InfiniteScrollViewState();
}

class _InfiniteScrollViewState extends State<InfiniteScrollView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomScrollView(
        center: widget.center,
        scrollDirection: Axis.horizontal,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) => widget.builder(
                  context, widget.childCount - index % widget.childCount - 1),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(widget.builder),
            key: widget.center,
          )
        ],
      ),
    );
  }
}

已更新:我编写了一个支持无限TabBar的新小部件。

https://gist.github.com/MrNinja/6f6a5fc73803bdfaf2a493a35c258fee