Question

我想用多张图片制作幻灯片，但我的图片以json作为列表视图，我不知道如何在仅列表的幻灯片中制作

所以我如何在NetworkImage（）中通过列表而不只是一个图像来实现

class SlideShow extends StatefulWidget {
  _SlideShowState createState() => new _SlideShowState();
}

class _SlideShowState extends State<SlideShow>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;
  List<GallariesModel> _images = <GallariesModel>[];

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 18.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
          listenForGallaries();
        });
      });
    controller.forward();
  }

  void listenForGallaries() async {
    final Stream<GallariesModel> stream = await getGallaries();
    stream.listen(
        (GallariesModel galaries) => setState(() => _images.add(galaries)));
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    Widget carousel = new Carousel(
      boxFit: BoxFit.cover,
      images: [
        NetworkImage("www.imagelink.com/"+
            _images.first.file),
             NetworkImage("www.imagelink.com/"+
            _images.last.file),
      ],
      animationCurve: Curves.fastOutSlowIn,
      animationDuration: Duration(seconds: 1),
    );

    return new Container(
      margin: EdgeInsets.all(13.0),
      height: screenHeight / 3.5,
      child: new ClipRRect(
        borderRadius: BorderRadius.circular(5.0),
        child: new Stack(
          children: [
            carousel,
          ],
        ),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

现在我使用某种方式可以让我看到列表中的第一张图像和最后一张图像，

Answer 1

您可以使用地图功能将所有图像更改为列出网络图像：

images: _images.map((GallariesModel image) {
      return new NetworkImage(
       "www.imagelink.com/"+image.file));
      }).toList(),

Answer 2

一种完成@hoangquyy建议的更简单的方法是这样的：

_images.map((image) => NetworkImage('www.imagelink.com/${image.file}')).toList()

如何在Flutter中的NetworkImage（）中添加网络图像列表

2 个答案: