Question

使用StreamBuilder从Firebase获取图像网址列表之后

我从该程序包中将ListView.builder与TransitionToImage一起使用：

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

并列出了图片列表。

这是我的Streambuilder /构建器代码：

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加载图像？

Answer 1

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

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

一张一张地加载图像列表

1 个答案: