以递增顺序加载不确定数量的图像的最佳方式Flutter

Question

我正在写一本有章节的书。在网络中，章节有.jpg格式的页面。一章中的页数是不确定的，因为我创建了一个函数(下面的代码(来创建一个带有图像的章节。

我的实现问题：

1. 所有100个图像都试图同时加载，大多数时候初始页面都是稍后加载的(这会给读者带来困惑(。如何确保按列表中的顺序加载图像？(先是第一个映像，然后是第二个映像，再是第三个映像，依此类推。(。我知道要解决懒惰加载库的问题，但我不确定这种情况下的实现方式，以及哪一个更合适。

2. 由于一章中的页数是不确定的，下面的代码将所有创建的100个图像URL添加到列表中(这样，即使是直到100个图像的无效URL也会尝试加载(。我不想每次用户向下滚动时都调用无效的URL。

代码：

createChapter(int chapterNumber){
String imageUrl;
for(int i=1; i<100; i++){
imageUrl = 'https://www.someurl.com/chapter1/'+i+'.jpg';
print(imageUrl);
bookList.add(
CachedNetworkImage(
imageUrl: imageUrl,
fit: BoxFit.fitWidth,
));
}
}
=======================
ListView(
physics: BouncingScrollPhysics(),
children: bookList,
),

我知道上面的代码对我想要实现的目标没有足够的意义。我想知道这个场景的最佳实现。

Answer 1

ListView.builder允许您指定多个项和一个生成器函数。生成器函数被传递上下文和每个项索引，然后构建每个项。这通常用于构建长度未知(或无限(的列表。

下面是一个更具体的用例示例：

ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: numberOfPages,
itemBuilder: (context, index){
imageUrl = 'https://www.someurl.com/chapter1/'+index+'.jpg';
print(imageUrl);
return CachedNetworkImage(
imageUrl: imageUrl,
fit: BoxFit.fitWidth,
);
}
)

在本例中，您必须提前找到每个章节中的页数，并将其存储在numberOfPages变量中。