Flutter 实战：正真意义上的无限循环轮播器

最新推荐文章于 2025-06-19 12:57:02 发布

转载最新推荐文章于 2025-06-19 12:57:02 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b5815055188251af6622e53

文章标签：

#移动开发

本文介绍了一种基于Flutter实现的轮播器组件，通过简单的代码示例展示了如何创建无限循环的图片轮播效果，并提供了核心代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

前言

最近感觉flutter的圈子异常的火爆，怀揣着一颗赤诚的学习之心，我也加入这个大家庭（大坑哈哈）

使用

废话不多说，先看下如何使用：

new MyPageComponent(datas, callback: RouterUtil.NavigatorPush(context, new CardView())),
复制代码

一行代码调用，datas是一个list数据源，callback是图片的点击事件。

大致的实现逻辑

List<PageComponentModel> imgs;
imgs = new List();
    imgs.add(widget.datas[widget.datas.length - 1]);
    imgs.addAll(widget.datas);
    imgs.add(widget.datas[0]);
复制代码

数据源是list里边放了个自定义的model暂时只放了图片的url和title。如上代码这边的实现是在数据源的头部把数据源的最后一个数据添加进去，在数据源的尾部把数据源的第一个数据添加进去，然后通过一些逻辑的处理实现了无限循环逻辑。

首先创建pageView

Widget _pageView(constraints, callback) =>
      new NotificationListener(
          onNotification: (ScrollNotification note) {
            if (note is ScrollEndNotification ||
                note is UserScrollNotification) { //判断动画是否结束，或者用户手动滚动
              _currentState = true;
            } else {
              _currentState = false;
            }
            setState(() {
              _currentPage = _pageController.page;
              _index = _currentPage.round();
              _isEndScroll = _currentState;
            });
          },
          child: new PageView.custom(
            physics: const PageScrollPhysics(
                parent: const BouncingScrollPhysics()),
            controller: _pageController,
            childrenDelegate: new SliverChildBuilderDelegate(
                  (context, index) =>
              new GestureDetector(child: new _ChildPage(
                imgs[index].imgPath,
                title: imgs[index].title,
                parallaxOffset: constraints.maxWidth / 2.0 *
                    (index - _currentPage),
              ),
                onTap: callback,),
              childCount: imgs.length,
            ),
            onPageChanged: (index) {
              if (index == imgs.length - 1) {
                new Future.delayed(
                    new Duration(milliseconds: 200)).then((lwh) {
                  _pageController.jumpToPage(1);
                });
              } else if (index == 0) {
                new Future.delayed(
                    new Duration(milliseconds: 200)).then((lwh) {
                  _pageController.jumpToPage(imgs.length - 2);
                });
              }
            },
          )
      );
复制代码

上边代码没什么好说的看一眼就明白，有一个地方需要注意的是 new Duration(milliseconds: 200)).then((lwh) { _pageController.jumpToPage(1);这句话这边添加了一个消息延迟处理跳转，由于_pageController.page获取到的是一个时时的位置double类型，然后在onPageChanged（index）是个int类型内部是通过四舍五入的，所以如果不加一个延迟的话动画会不那么平滑。

创建指示器

Widget _indicator() {
    List<Widget> radios = new List();
    for (int i = 1; i < imgs.length - 1; i++) {
      if (_index == 0) {
        _index = imgs.length - 2;
      } else if (_index == imgs.length - 1) {
        _index = 0;
      }
      IconData iconData = _index == i ? Icons.radio_button_checked : Icons
          .radio_button_unchecked;
      Icon icon = new Icon(iconData, color: Colors.grey[100], size: 8.0,);
      radios.add(icon);
    }
    return new Container(
      alignment: Alignment.bottomCenter,
      margin: const EdgeInsets.only(bottom: 10.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: radios,
      ),
    );
  }
}
复制代码

由于数据源的头尾都添加了一个数据，所以循环从下表1位置开始，创建个数为imgs的长度减去2，也就是datas的长度。

pageView子部件的简单实现

class _ChildPage extends StatelessWidget {
  _ChildPage(this.data, {
    Key key,
    this.parallaxOffset = 0.0,
    this.title,
  }) : super(key: key);

  final String title;
  final String data;
  final double parallaxOffset;

  @override
  Widget build(BuildContext context) =>
      new Center(
        child: new Center(
          child: new Stack(
            children: <Widget>[
              new FadeInImage.assetNetwork(
                imageScale: 0.0,
                placeholder: "assets/images/ic_error.png",
                image: data,
                fit: BoxFit.fill,),
              new Container(
                alignment: Alignment.bottomCenter,
                margin: const EdgeInsets.only(bottom: 20.0),
                child: new Transform(
                  transform: new Matrix4.translationValues(
                      parallaxOffset, 0.0, 0.0),
                  child: Text(
                    title, style: new TextStyle(color: Colors.grey[100]),),
                ),
              ),
            ],
          ),
        ),
      );
}
复制代码

就是一张图片加一个标题

组合部件

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new LayoutBuilder(
          builder: (context, constraints) =>
          new Stack(children: <Widget>[
            _pageView(constraints, widget.callback),
            _indicator(),
          ],
          )
      ),
    );
  }
复制代码

创建轮询

timer = new Timer.periodic(new Duration(seconds: 3), (timer) {
      if (_isEndScroll) {
        print('lwh$_index');
        if (_index == imgs.length - 1) {
          _index = 1;
          _pageController.jumpToPage(_index);
        } else if (_index == 0) {
          _index = imgs.length - 1;
          _pageController.jumpToPage(_index);
        }
        _pageController.animateToPage(_index + 1,
            duration: new Duration(milliseconds: 500), curve: Curves.linear);
      }
    });
复制代码