используйте Flutter blo c для извлечения данных из Api в элементе Listview - PullRequest
Новая
       24

используйте Flutter blo c для извлечения данных из Api в элементе Listview

0 голосов
/ 23 апреля 2020

Я пытаюсь получить данные из двух разных API, где второй зависит от первого API следующим образом: первый API: он используется для получения идентификатора города по его имени, поэтому мне нужно написать название города и API вернет идентификатор города. Второй API: используется для получения изображения города по его идентификатору, поэтому мне нужно ввести идентификатор города, чтобы получить изображение города. Я использовал Flutter blo c в своем приложении для управления интерфейсами и их состояниями следующим образом: 

BlocBuilder<FirstApiBloc, CityState>(
    builder: (context, state) {
      if (state is CitiesIdsLoaded) {
        List<CityDetail> citiesList = state.citiesDetails;

        return ListView.builder(
          itemCount: citiesList.length,
          itemBuilder: (context, index) {
             BlocProvider.of<CityPhotoBloc>(context).add(LoadCityPhoto( 
            cityId: hotelsList[index].id.toString()));

            return Card(
              child: Container(
                padding: EdgeInsets.all(15),
                child:
        BlocBuilder<CityPhotoBloc, CityPhotoState>(
                      builder: (context, state) {
                        if (state is PhotoCityLoaded) {
                          return Image.network(state.photosUrl);
                        } else 
                        return Container();
                      },
                    ),

, как вы можете видеть из приведенного выше фрагмента, я использовал 

 BlocProvider.of<CityPhotoBloc>(context).add(LoadCityPhoto( 
            cityId: hotelsList[index].id.toString()));

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

1 Ответ

0 голосов
/ 23 апреля 2020

Вместо создания photosUrl String, содержащего URL-адрес одного города в вашем штате (в CityPhotoBloc), сделайте, как вы делали в FirstApiBloc, где вы определили список идентификаторов городов для хранения. в вашем штате, сделайте это здесь, а также определите список URL-адресов, называемых photosUrls, затем в вашем ListView вместо state.photosUrl вы будете использовать state.photosUrl[index] для получения URL-адреса.

Также попробуйте использовать BlocConsumer вместо BlocBuilder и посмотрите, сможете ли вы реализовать метод buildWhen, чтобы при необходимости создавать только виджеты в виде списка 

Edit:(more clarification):

От flutter.dev:

Для сравнения в конструктор ListView по умолчанию, который требует создания всех элементов одновременно, конструктор ListView.builder () создает элементы по мере их прокрутки на экране.

Это означает, что если вы напишите это, чтобы получить URL городской фотографии:

BlocProvider.of (контекст) .add (LoadCityPhoto (cityId: hotelsList [index] .id.toString ()));

и у вас есть миллионы городов, тогда не будет отправлено не миллион событий то есть это произошло бы с обычным ListView, тогда как с ListView.builder, как сказано в цитируемом тексте, будут создаваться дочерние элементы только по требованию, и поскольку событие вызывается в том же блоке c кода, в котором создается дочерний элемент тогда также событие будет запущено по требованию

Я надеюсь, что теперь все ясно

Подробнее о ListView.builder здесь

...