Блог

Главная - Вопросы по программированию - Изменение размера сетевого изображения после загрузки в

Изменение размера сетевого изображения после загрузки в

#flutter #dart #flutter-layout #flutter-image #flutter-layoutbuilder

#изменение размера изображения #dart #изменение макета #flutter-layoutbuilder

Вопрос:

Вот видео моей проблемы https://www.youtube.com/watch?v=wskX_bZNExw

Если вы заметили, после загрузки сетевого изображения его размер изменяется (обычно удаляется пустое пространство).

   Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null amp;amp; thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return Container(
        width: double.maxFinite,
        child: FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: image.url.toString(),
        ),
      );
    }
    return Container();
  }

Как я могу заставить изображение занимать минимальное пространство с момента его появления на экране, а не после того, как оно успеет изменить размер?

Спасибо.

Ответ №1:

Вы можете установить height для окружения Container фиксированное значение и работать с fit: BoxFit.fitheight ним в своем FadeInImage .

Комментарии:

1. Привет, да, установка высоты определенно исправит эту проблему. Однако некоторые изображения будут полностью искажены с точки зрения соотношения сторон. Есть идеи по сохранению нормальной высоты изображения?

2. Что ж, Boxfit позаботится о том, чтобы у вас было видно полное изображение. Я не думаю, что одновременно будет возможен КАК исходный размер изображения, так и изменение размера.

Ответ №2:

 Widget _buildPostThumbnail(List<SubmissionPreview> thumbnails) {
    if (thumbnails != null amp;amp; thumbnails.isNotEmpty) {
      var image = thumbnails.first.resolutions.last;
      return FadeInImage.memoryNetwork(
        fadeInDuration: Duration(milliseconds: 200),
        placeholder: kTransparentImage,
        image: image.url.toString(),
        width: double.maxFinite,
        fit: BoxFit.fitWidth,
        height: (image.height.toDouble() / image.width.toDouble()) * MediaQuery.of(context).size.width,
      );
    }
    return Container();
  }

Я понял это, вы хотите разделить высоту на ширину, а затем умножить ее на ширину вашего контейнера (в этом случае я хочу, чтобы края фотографии совпадали с телефоном).