如何在Flutter中每5秒钟更改一次图像? [英] How to keep changing a Images every 5 seconds in Flutter?

问题描述

状态变量:

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;

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

I want the below function to change the position in the array every 5 seconds by incrementation bannerPosition so that a new image renders on the app

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))"不会有序地出现，并且会导致图像渲染问题.

The "Future.delayed(const Duration(seconds : 5))" does not occur in an orderly fashion when I execute this code and it results in image rendering issues.

推荐答案

我不知道您的意思是不会有序地发生".虽然只是看了一下，但我认为它会起作用，只是我似乎记得在循环中使用await有点奇怪.它可能会不断循环并为延迟的延迟创建越来越多的呼叫....

I don't know what you mean by 'does not occur in an orderly fashion'. While just looking at that I'd think it would work, except that I seem to remember there being something weird about using await in a loop. It might keep looping around and creating more and more calls to the delayed....

请使用计时器.这样，它就可以处理循环.我也建议您保存对计时器的引用，并在您状态的dispose()函数中停止它.

Instead, use a Timer. That way it handles the looping. I'd also advise saving a reference to the timer and stopping it in your state's dispose() function.

这是一个代码示例:

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'平面应使前一个图像保持不变，直到新图像完全加载为止.

Note that there still might be some inconsistency the first time it goes through the photos because it is just loading them as it goes. The 'gaplessPlayback' flat should make the previous image stick around until the new one is fully loaded.

这篇关于如何在Flutter中每5秒钟更改一次图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！