flutter轮播图

这篇博客介绍了如何在Flutter中利用PageView、Timer和PageController来创建一个自动轮播的图片展示功能,包括启动、停止轮播的方法,并展示了如何添加页数指示器。代码已封装好,可以直接应用于项目中。
摘要由CSDN通过智能技术生成

代码已经封装好,直接用即可

  int _total = 5;
  //当前显示的页数
  int _current = 1;
  //计时器
  Timer _timer;

  //轮播控制器
  PageController _pageController;
  final List<String> imageList = [ImagePath.card1,ImagePath.card2,ImagePath.card3,ImagePath.card4,ImagePath.card5]; //图片
  ///轮播的时间
  final Duration loopDuration = const Duration(seconds: 3);

  @override
  void initState() {
    super.initState();
    //轮播图个数
    _total = imageList.length;
    //轮播控制器
    _pageController = new PageController(initialPage: 5000);
  }

  @override
  void dispose(){
    _timer.cancel();
    super.dispose();
  }

  //定义开始轮播的方法
  void startLoopFunction() {
    //定时器
    _timer = Timer.periodic(loopDuration, (timer) {
      //滑动到下一页
      _pageController.nextPage(
        curve: Curves.linear,
        duration: Duration(
          milliseconds: 200,
        ),
      );
    });
  }

  //定义停止轮播的方法
  void stopLoopFunction() {
    if (_timer.isActive) {
      _timer.cancel();
    }
  }

  Stack buildStack() {
    return Stack(
      children: [
        //第一层 轮播
        Positioned.fill(
          child: PageView.builder(
            //控制器
            controller: _pageController,
            //总页数
            itemCount: 10000,
            //滑动时回调 value 当前显示的页面
            onPageChanged: (value) {
              // setState(() {
              //   _current = value % imageList.length + 1;
              // });
              _current = value % imageList.length + 1;
              print(_current);
            },
            itemBuilder: (BuildContext context, int index) {
              String image = imageList[index % imageList.length];
              return Image.asset(
                image,
                fit: BoxFit.fill,
              );
            },
          ),
        ),
        //第二层 指示器
        Positioned(
          right: 14,
          bottom: 14,
          child: buildContainer(),
        ),
      ],
    );
  }

  Container buildContainer() {
    return Container(
      alignment: Alignment.center,
      width: 50,
      height: 24,
      decoration: BoxDecoration(
          color: Colors.grey[200].withOpacity(0.5),
          //设置圆角
          borderRadius: BorderRadius.all(Radius.circular(12))),
      child: Text(
        "$_current/$_total",
        textAlign: TextAlign.center,
      ),
    );
  }

  Container shuffingFigure(){
    //轮播 图
    return Container(
      color: Colors.white,
      height: 100,
      width: 100,
      child: GestureDetector(
        //手指按下的回调
        onTapDown: (TapDownDetails details) {
          // LogUtils.e("手指按下,停止轮播");
          stopLoopFunction();
        },
        //手指抬起的回调
        onTap: () {
          // LogUtils.e("手指抬起,开始轮播");
          startLoopFunction();
        },
        //手指按下后滑动移出的回调
        onTapCancel: () {
          // LogUtils.e("手指移出,开始轮播");
          startLoopFunction();
        },
        child: buildStack(),
      ),
    );
  }

把shuffingFigure这个容器镶嵌到你的页面上即可

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值