У меня есть вид сетки, показывающий несколько изображений на одной странице. Во время загрузки я пытаюсь использовать loadingBuilder
в виджете Image
, чтобы показать CircularProgressIndicator
и процесс загрузки.
Я хочу, чтобы в каждом тайле сетки отображался отдельный индикатор прогресса, и не все крутятся сразу. Если я использую loadingBuilder
в Image.network(...)
, все работает так, как ожидается:
Тест с Image.network (...)
child: Image.network(boulderList[index].image, fit: BoxFit.cover,
loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(GLOBALS.difficultyMap[boulderList[index].difficulty]),
value: loadingProgress.expectedTotalBytes != null ?
loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
),
Тест с изображением (...)
Если я использую loadingBuilder
in Image(...)
it не показывает мне показатели прогресса. Это также загружает изображения одно за другим, но плитки вида сетки не показывают индикаторы прогресса. Вот код, который я пробовал:
child: Image(
fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(GLOBALS.difficultyMap[boulderList[index].difficulty]),
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
image: CachedNetworkImageProvider(
boulderList[index].image,
),
),
Так почему я не использую Image.network? Просто: я хочу кэшировать изображения; поэтому я хочу использовать CachedNetworkImageProvider
на изображении property
Я также постарался сделать его простым, используя только CachedNetworkImage
, как показано ниже. К сожалению, у меня все показатели прогресса вращаются одновременно, например:
CachedNetworkImage(
fit: BoxFit.cover,
placeholder: (context, url) => Center(
child: CircularProgressIndicator(),
),
imageUrl: boulderList[index].image,
),
Короткий вопрос: Как правильно использовать loadingBuilder
в классе Image
, не используя Image.network
Обновление Видимо, проблема в CachedNetworkImageProvider
, потому что, если я использую другой поставщик изображений в свойстве image:
, например NetworkImage
, отображаются индикаторы выполнения. Теперь возникает вопрос, почему Image loadingBuilder
по-разному работает с тем, какой провайдер используется в свойстве image: