时间戳

首页 > 解决方案 > 以一个接一个的顺序加载图像列表

flutter - 以一个接一个的顺序加载图像列表

问题描述

使用 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

解决方案

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

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

推荐阅读