如何在不使用生成器的情况下延迟某些时间自动滚动PageView？ [英] How to automatically scroll a PageView with some delay that is made without using a builder?

问题描述

我制作了一个PageView，用作图像轮播。
如何在Flutter延迟后让它在页面之间自动无限滚动？

I've made a PageView that acts as an image carousel. How do I let it scroll automatically between its pages infinitely after some delay in Flutter?

                new PageView(
                    children: List<Widget> {
                        new Container(
                            decoration: BoxDecoration(
                                image: DecorationImage(image: new AssetImage(images[0]), 
                                fit: BoxFit.cover
                                )
                            )
                        ),
                        new Container(
                            decoration: BoxDecoration(
                                image: DecorationImage(image: new AssetImage(images[1]), 
                                fit: BoxFit.cover
                                )
                            )
                        ),
                        new Container(
                            decoration: BoxDecoration(
                                image: DecorationImage(image: new AssetImage(images[2]), 
                                fit: BoxFit.cover
                                )
                            )
                        )
                    }
                )

推荐答案

您需要添加 PageController 到 PageView 。然后，在 initState（）上，可以启动 Timer.periodic（），您只需在页面之间跳转即可。像这样：

You need to add a PageController to your PageView. Then on initState() you can start a Timer.periodic() where you just jump from page to page. Like this:

int _currentPage = 0;
PageController _pageController = PageController(
  initialPage: 0,
);

@override
void initState() {
  super.initState();
  Timer.periodic(Duration(seconds: 5), (Timer timer) {
    if (_currentPage < 2) {
      _currentPage++;
    } else {
      _currentPage = 0;
    }

    _pageController.animateToPage(
      _currentPage,
      duration: Duration(milliseconds: 350),
      curve: Curves.easeIn,
    );
  });
}

@override
Widget build(BuildContext context) {
  return PageView(
    controller: _pageController,
    children: [
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[0]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[1]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage(images[2]), 
            fit: BoxFit.cover,
          ),
        ),
      ),
    ],
  );
}

通过以下方式导入'dart：异步 用于使用 Timer 。

By the way you need to import 'dart:async' for using Timer.

这篇关于如何在不使用生成器的情况下延迟某些时间自动滚动PageView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！