flutter PageView 无限轮播

简单封装PageView

///文章中的rpx为适配单位，不需要可以去掉

class ManageReviewsPage extends StatefulWidget {
//数据源 
  final List pageData;
  //重写child，
  final Widget ?child;
  //指示点颜色，
  final Color ? unselectedIndicatorColor;
  final Color ? selectedIndicatorColor;
  //回调，父widget可以拿到索引值，
  final ValueChanged<int> ? pageViewCallback;

  const ManageReviewsPage({
    super.key,
    required this.pageData,  this.child, this.unselectedIndicatorColor, this.selectedIndicatorColor, this.pageViewCallback,
  });

  @override
  State<ManageReviewsPage> createState() => _ManageReviewsPageState();
}

class _ManageReviewsPageState extends State<ManageReviewsPage> {
  PageController controller = PageController();
  late List pageData;
  int currPageValue = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pageData = widget.pageData;
    //0～1 展示效果不一样
    controller = PageController(viewportFraction: 1);
  }


  @override
  Widget build(BuildContext context) {

    List<Widget> pageList = [];
    for (var element in pageData) {
      Widget pageWidget = widget.child ?? Container(
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(24.rpx)),
        child: Image.network(
          element,
          width: 702.rpx,
          fit: BoxFit.fitWidth,
        ),
      );
      pageList.add(pageWidget);
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("manage"),
        centerTitle: true,
      ),
      body: ListView(
        shrinkWrap: true,
        children: [
          Container(
            margin: EdgeInsets.all(24.rpx),
            width: 702.rpx,
            height: 300.rpx,
            clipBehavior: Clip.antiAlias,
            decoration:
                BoxDecoration(borderRadius: BorderRadius.circular(24.rpx)),
            child: PageView.builder(
              controller: controller,
 ///重点，这里写大一点，这里的数据就是你能滑动的次数总和
              itemCount: 1000,
              //滑动触发的函数
              onPageChanged: (int index) {
                currPageValue =  index % (pageList.length);
                try {
                  widget.pageViewCallback!(currPageValue);
                } catch (_) {
                }

                setState(() {});
              },
              itemBuilder: (context, index) {
                return pageList[index % (pageList.length)];
              },
            ),
          ),
          //指示点UI
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 48.rpx * pageData.length,
                height: 24.rpx,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    itemCount: pageData.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        width: 24.rpx,
                        height: 24.rpx,
                        margin: EdgeInsets.symmetric(horizontal: 12.rpx),
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: currPageValue == index
                                ? widget.unselectedIndicatorColor ??const Color(0xff1A71FF)
                                : widget.selectedIndicatorColor ??const Color(0xffC8CCD7)),
                      );
                    }),
              ),
            ],
          )
        ],
      ),
    );
  }

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

}

简单使用

ManageReviewsPage(pageData: [
      "https://ts1.cn.mm.bing.net/th/id/R-C.61e10abb31be7153915f6550ad077542?rik=oukmhTAyezTNDw&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f12%2f22%2f289_093449_8ced3.jpg&ehk=mci1AffXHcwklYpn7cpFWSvZz3evIeDYflmll9wiy44%3d&risl=&pid=ImgRaw&r=0" ,
      "https://ts1.cn.mm.bing.net/th/id/R-C.61e10abb31be7153915f6550ad077542?rik=oukmhTAyezTNDw&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f12%2f22%2f289_093449_8ced3.jpg&ehk=mci1AffXHcwklYpn7cpFWSvZz3evIeDYflmll9wiy44%3d&risl=&pid=ImgRaw&r=0" ,
     "https://img.zcool.cn/community/01b2945b0663dda801218cf4617993.jpg@3000w_1l_0o_100sh.jpg",
     "https://img.zcool.cn/community/01b2945b0663dda801218cf4617993.jpg@3000w_1l_0o_100sh.jpg",

        ],
   
      ),