Question

有没有办法在Flutter中使用 PageView 进行无限循环？例如，如果我的PageView有5页，则在刷到第5页后，我将能够以相同的方向再次滑动以进入第1页。

Answer 1

默认情况下，PageView无限颤动。除非您提供itemCount。

以下将从0到4无限地打印页面

final controller = new PageController(initialPage: 999);
 ...

new PageView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return new Center(
          child: new Text('${index % 5}'),
        );
      },
)

Answer 2

如果有预定义小部件的列表，则可以使用以下方法实现连续滚动：

return PageView.builder(
  itemBuilder: (context, index) {
    return _children[index % _children.length];
  },
  controller: pageController,
);

Answer 3

使用此库我找到了一个很好的解决方案 https://pub.dev/packages/infinity_page_view

只需导入lib并使用InfinityPageView而不是PageView

InfinityPageView(
  controller: infinityPageController,
  itemCount: colorList.length,
  itemBuilder: (context, index) {
    return Container(
      color: colorList[index];
    );
  },
)

Answer 4

<块引用>

你可以实现无限使用 PageView builder 滚动，不给 itemCount 赋值会有无限的页面，你只需要维护将在屏幕上绘制的页面索引。

PageView.builder(
  controller: _pageController,
  scrollDirection: Axis.horizontal,
  onPageChanged: (index) {
    setState(() {
      _currentIndex = index % _walkthroughSlides.length;
    });
  },
  itemBuilder: (context, index) {
    return _walkthroughSlides[index % _walkthroughSlides.length];
  },
)

Answer 5

上面提到的答案将占用更多的内存，可能是多余的，当您在第一个孩子上时，无法通过反向滚动进入最后一个孩子

import 'package:flutter/material.dart';
import 'dart:async';

class InfiniteScroll extends StatefulWidget{
  final List<Widget> children;
  InfiniteScroll({this.children});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _InfiniteScrollState();
  }
}

class _InfiniteScrollState extends State<InfiniteScroll>{
  List<Widget> children;
  ScrollController s;
  int _pos;

  @override
  void initState() {
    _pos=1;
    children = [widget.children[widget.children.length - 1]];
    for (int i = 0; i < widget.children.length; ++i) {
      children.add(widget.children[i]);
    }
    if (widget.children.length > 1) {
      children.add(children[1]);
    }
    s = PageController();
    super.initState();
     WidgetsBinding.instance
        .addPostFrameCallback((_){
          s.jumpTo(MediaQuery.of(context).size.width);
        });
 
  }
  


  @override
  Widget build(BuildContext context) {
    
    return PageView.builder(
      scrollDirection: Axis.horizontal,
      controller: s,
      onPageChanged: (int i) {
        setState(() {
          _pos=i+1;
        });
        if (i == children.length - 1) {
          Timer(Duration(milliseconds: 400), () {
            s.jumpTo(MediaQuery.of(context).size.width);
          });
          setState(() {
          _pos=1;
        });

        } else if (i == 0) {
          Timer(Duration(milliseconds: 400), () {
            s.jumpTo(MediaQuery.of(context).size.width * (children.length - 2));
          });
          setState(() {
            _pos=children.length-2;
          });
        }
        
      },
      itemBuilder: (BuildContext context, int index) {
        return children[index];
      },
      itemCount: children.length,
    );
  }
}

现在您可以将其用作

import 'package:flutter/material.dart';
import 'package:test1/Widgets/infinite_scroll.dart';


class CoursesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 
        Container(
          height: MediaQuery.of(context).size.height,
          child: 
              InfiniteScroll(
                children: <Widget>[
                  Container(
                    color: Colors.red,
                    child: Center(child: Text("1",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.black,
                    child: Center(child: Text("2",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.green,
                    child: Center(child: Text("3",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.blue,
                    child: Center(child: Text("4",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                ],
              )
        );
  }
}

有没有办法在Flutter中使用PageView进行无限循环？

5 个答案: