以一个接一个的顺序加载图像列表答案

【问题标题】：Loading a list of images in one-by-one sequence以一个接一个的顺序加载图像列表
【发布时间】：2019-06-10 15:04:29
【问题描述】：

使用 StreamBuilder 从 firebase 获取图片 url 列表后

我使用了 ListView.builder 和这个包中的 TransitionToImage：

https://pub.dartlang.org/packages/flutter_advanced_networkimage

并制作了一张图片列表。

这是我的 Streambuilder / builder 代码：

builder: (_, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (!snapshot.hasData) return const Text('loading...');
        var doc = snapshot.data;
        List<String> pages = List.from(doc['pages']);
        return ListView.builder(
            itemCount: pages.length,
            itemBuilder: (context, index) {
              return TransitionToImage(
                AdvancedNetworkImage("a url", timeoutDuration: Duration(minutes: 1)),
                placeholder: CircularProgressIndicator(),
                duration: Duration(milliseconds: 300),
              );
            });
      },

ListView.builder 一次以随机顺序加载所有图像，这对我或用户来说看起来不太自然。

有没有办法让 ListView.builder 在上一个索引中的图像加载后加载图像？

【问题讨论】：

标签： flutter

【解决方案1】：

我会使用precacheImage 逐一加载pages 中的图像，并在到达时替换pages 中的URL，以便显示真实图像而不是占位符。

for(final page in pages) {
  await precacheImage(page.downloadUrl, context);
  page.displayUrl = page.downloadUrl;
  setState(() => pages = pages.toList();
}

【讨论】：