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;

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

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;
                });                     
            }       
        }

}

＆＃34; Future.delayed（const Duration（seconds：5））＆＃34;当我执行此代码时，它不会以有序的方式发生，并且会导致图像渲染问题。

Answer 1

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

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

Answer 2

我不知道你的意思是＆＃39;不是以有序的方式发生的。虽然只是看着我认为它会起作用，除了我似乎记得在循环中使用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(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();
  }
}

请注意，第一次拍摄照片时可能会出现一些不一致的情况，因为它只是在照片中加载它们。＆＃39; gaplessPlayback＆＃39; flat应该使前一个图像保持不变，直到新的图像完全加载。

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

2 个答案: