如何在 Flutter 中每 5 秒更改一次图像？

Question

状态变量：

var moviePhotos = [
"http://www.kiwithebeauty.com/wp-content/uploads/2017/11/BLACK-PANTHER-COLLAGE-KIWI-THE-BEAUTY-MOVIE-MARVEL-800x350.png",
"https://static-ssl.businessinsider.com/image/5a7085a97e7a35f10c8b479f-1000/blackpanthershuri.jpg",
"https://longreadsblog.files.wordpress.com/2018/02/black-panther.jpg?w=1680",
"https://uziiw38pmyg1ai60732c4011-wpengine.netdna-ssl.com/wp-content/dropzone/2018/02/black-panther.jpg",
"https://static2.srcdn.com/wp-content/uploads/2017/10/Black-Panther-Trailer-1.jpg?q=50&w=1000&h=500&fit=crop&dpr=1.5",
"https://cdn.guidingtech.com/imager/media/assets/BP-2_acdb3e4bb37d0e3bcc26c97591d3dd6b.jpg",
"https://cdn.guidingtech.com/imager/media/assets/BP-8_acdb3e4bb37d0e3bcc26c97591d3dd6b.jpg"
];
var bannerPosition = 0;

我希望以下函数通过递增 bannerPosition 每 5 秒更改一次数组中的位置，以便在应用程序上呈现新图像

testing() async {
    while(true){
        await new Future.delayed(const Duration(seconds : 5));
            if (bannerPosition < moviePhotos.length){
                print("Banner Position Pre");
                print(bannerPosition);
                setState(() {
                    bannerPosition = bannerPosition + 1;
                });
                print("Banner Position Post");
                print(bannerPosition);                      
            }                   
            else{
                setState(() {
                    bannerPosition = 0;
                });                     
            }       
        }

}

当我执行这段代码时，"Future.delayed(const Duration(seconds : 5))" 没有按顺序发生，导致图像渲染问题。

Answer 1

我不知道你所说的 'does not occur in an orderly fashion' 是什么意思。虽然只是看着它，但我认为它会起作用，除了我似乎记得在循环中使用 await 有一些奇怪的地方。它可能会不断循环并创建越来越多的延迟调用....

而是使用 Timer。这样它就可以处理循环。我还建议保存对计时器的引用并在您所在州的 dispose() 函数中停止它。

这是一个代码示例：

class ImageRotater extends StatefulWidget {
  List<String> photos;

  ImageRotater(this.photos);

  @override
  State<StatefulWidget> createState() => new ImageRotaterState();
}

class ImageRotaterState extends State<ImageRotater> {
  int _pos = 0;
  Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(new Duration(seconds: 5), () {
      setState(() {
        _pos = (_pos + 1) % widget.photos.length;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Image.network(
      widget.photos[_pos],
      gaplessPlayback: true,
    );
  }

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

请注意，第一次浏览照片时可能仍然存在一些不一致，因为它只是在加载时加载它们。 'gaplessPlayback' 标志应该使之前的图像一直存在，直到新图像完全加载。

Answer 2

改进 "rmtmckenzie" 答案，如果您想每 5 秒重复一次，则需要使用 Timer.periodic。见下文

  @override
  void initState() {
    _timer = Timer.periodic(Duration(seconds: 5), (Timer t) {
      setState(() {
        _pos = (_pos + 1) % widget.photos.length;
      });
    });
    super.initState();
  }

如何在 Flutter 中每 5 秒更改一次图像？

How to keep changing a Images every 5 seconds in Flutter?

asynchronous

flutter