Правильное использование imageBuilder в классе Image (не в Image.network) - PullRequest
0 голосов
/ 04 апреля 2020

У меня есть вид сетки, показывающий несколько изображений на одной странице. Во время загрузки я пытаюсь использовать loadingBuilder в виджете Image, чтобы показать CircularProgressIndicator и процесс загрузки.

Я хочу, чтобы в каждом тайле сетки отображался отдельный индикатор прогресса, и не все крутятся сразу. Если я использую loadingBuilder в Image.network(...), все работает так, как ожидается:

Тест с Image.network (...)

enter image description here

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, как показано ниже. К сожалению, у меня все показатели прогресса вращаются одновременно, например:

enter image description here

CachedNetworkImage(
  fit: BoxFit.cover,
  placeholder: (context, url) => Center(
    child: CircularProgressIndicator(),
  ),
  imageUrl: boulderList[index].image,
),

Короткий вопрос: Как правильно использовать loadingBuilder в классе Image, не используя Image.network

Обновление Видимо, проблема в CachedNetworkImageProvider, потому что, если я использую другой поставщик изображений в свойстве image:, например NetworkImage, отображаются индикаторы выполнения. Теперь возникает вопрос, почему Image loadingBuilder по-разному работает с тем, какой провайдер используется в свойстве image:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...