Последовательно загружайте список изображений. Трепетать

#android #flutter #pageviews

#Android #flutter #просмотры страниц

Вопрос:

Я создаю приложение для комиксов. Чтобы главы комиксов загружались быстрее. Я хочу, чтобы изображения загружались последовательно одно за другим. Когда загрузка изображения завершается, оно отображается непосредственно в режиме просмотра страницы. Я не знаю, как загружать изображения одно за другим и редактировать вид страницы, чтобы представить их.

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

1. использование streambuilder api.flutter.dev/flutter/widgets/StreamBuilder-class.html

2. Не могли бы вы подробнее рассказать. Как простой пример того, как установить это для изображений.

Ответ №1:

Чтобы ускорить загрузку изображения, вы можете попробовать использовать пакет cached_network_image, подобный этому:

 CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),
  

Он будет показывать заполнитель до тех пор, пока изображение не загрузится, чтобы пользователь мог видеть, сколько изображений существует, и ждать, пока оно загрузится, а errorWidget покажет, возникли ли проблемы с каким-либо изображением. Поэтому я предлагаю использовать его, это проще. Если вам не нужен какой-то сложный код, вы можете попробовать использовать, ScrollController поместив его в свой ListView.builder . Инициализируйте свой контроллер прокрутки в initState следующим образом :

      final _scrollController = ScrollController();
      @override
      void initState() {
        super.initState();
        _scrollController.addListener(() {
          if (_scrollController.position.pixels ==
              _scrollController.position.maxScrollExtent) {
// scroll has reach end, now load more images.
            loadMore();
          }
        });
      }
  

Вы не можете использовать setState inside initState , поэтому я создаю другой метод, чтобы вызвать его следующим образом:

   Future<void> loadMore() async {
    final response = await api.get("curated?per_page=50amp;page=$_currentPage");
    if (response.statusCode == 200) {
      var tempList = Pages.fromJson(response.data);
      setState(() {
        isLoading = false;
        wallpaper.addAll(tempList.photos);
      });
    }

    return null;
  }
  

Итак, я надеюсь, вы сможете понять, и да, это сложнее, поэтому, как я уже сказал, я предлагаю вам использовать CachedNetworkImage .

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

1. Спасибо, например, но я не могу использовать кэшированное сетевое изображение, потому что мои изображения имеют динамический URL.

2. Хорошо, тогда вы можете использовать контроллер прокрутки или создать кнопку для загрузки следующего изображения или чего-то еще

Ответ №2:

используйте StreamBuilder, он сделает всю работу за вас.

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

1. Не могли бы вы подробнее рассказать. Как простой пример того, как установить это для изображений. извините за поздний ответ

2. getImageFunction(){ …………. ………. } StreamBuilder( поток: getImageFunction, builder: …………….. ) Каждый раз, когда функция getImageFunction получает изображение из Интернета или откуда бы вы ни извлекали из stream builder, соответственно создается новый виджет. Если это то, что вы хотите,