Flutter 使用pageview无缝隙自动轮播教程-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter 使用pageview无缝隙自动轮播教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

导入要使用的轮播图片

 List<String> imagesa = [
    "assets/images/car_qidian.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg",
    "assets/images/car_bg.jpg"
  ];

声明变量

late PageController _controller;
Timer? _timer,


  //背景图动画
  void startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_controller.hasClients) {     
        if (_controller.page!.round() >= imagesa.length - 1) {      
          _controller.jumpToPage(0);
        } else {
          _controller.nextPage(
            duration: const Duration(seconds: 1),
            curve: Curves.linear,
          );
        }
      }

    });
  }

  void pauseTimer() {
    _timer?.cancel();
  }

  void restartTimer() {
    _timer?.cancel();
    startTimer();
  }

  // 背景使用
  void _onPageChanged() {
    int newIndex = _controller.page!.round() % imagesa.length;
    if (newIndex != _currentPage) {
      setState(() {
        _currentPage = newIndex;
      });
    }
  }

然后在initState里面初始化一下

@override
  void initState() {
    super.initState();
    startTimer(); 
}

在dispose里面去掉

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

最后在你需要的地方加入下面代码就行了文章来源地址https://www.toymoban.com/news/detail-733079.html

//背景图
                SizedBox(
                  height: 750.h,
                  child: PageView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    controller: _controller,
                    itemBuilder: (context, index) {
                      final imageIndex = index % imagesa.length;
                      return Image.asset(
                        imagesa[imageIndex],
                        width: double.infinity,
                        height: 750.h,
                        fit: BoxFit.fitHeight,
                        gaplessPlayback: true,
                      );
                    },
                  ),
                ),

到了这里，关于Flutter 使用pageview无缝隙自动轮播教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！