颤动图像自动幻灯片/轮播，随机间隔给定

Question

我看到有一个用于颤振的图像轮播包。

Widget Carousel = new Container(
child: new Carousel(
  children: [
    new AssetImage('images/img1.jpg'),
    new AssetImage('images/img2.jpg'),
    new AssetImage('images/img3.jpg'),
  ].map((bgImg) => new Image(image: bgImg, width: 1500.0, height: 1500.0, fit: BoxFit.cover)).toList(),
  displayDuration: const Duration(seconds: 1),
),

);

我想知道是否有机会自动进行此操作并在数组中给出随机间隔。

谢谢你。

试过这个 - 这不是消耗太多吗？

Widget build(BuildContext context) {

SystemChrome.setEnabledSystemUIOverlays([]);

setNewImage() {
  List<int> duration = [5, 7, 3, 10];
  List<String> imageURLs = ["assets/logo.jpg", "assets/logo.png", "assets/side-logo.png", "assets/background.jpg"];

  (i == 4) ? i = 0 : i = i;

  int waitTime = duration[i];
  print("wait time: " + waitTime.toString() + " i: " + i.toString());

  Future.delayed(Duration(seconds: waitTime), () {

    setState(() {
      i++;
      int nextImg = (i+1 == 5) ? 0 : i;
      print("Setting: " + nextImg.toString());
      currentMainImage = imageURLs[nextImg];
    });
  });
}

setNewImageFunction() async {
  await setNewImage();
}

setNewImageFunction();

}

忽略 if 语句和列表构建......只是为了改变自己。

Answer 1

您使用哪个 Flutter 插件？使用carousel_slider，您应该能够使用 来配置轮播切换到下一页的时间CarouselController。

CarouselController _carouselController = CarouselController();

...

CarouselSlider(
  items: imageList,
  carouselController: _carouselController,
  options: CarouselOptions(
    autoPlay: false,
  ),
),

然后运行一个Future<void>更新轮播页面切换间隔的函数。

Future<void>randomizePageInterval(){
  var n = 0;
  var maxDelay = 5;
  while(n == itemList.length){
    /// Generate random interval
    Future.delayed(Duration(seconds: Random().nextInt(maxDelay)), () {
      /// Go to next page
      _carouselController.nextPage(duration: Duration(milliseconds: 300), 
        curve: Curves.linear);
    });
    
    n++;
  }
}