Question

我正在尝试从两个不同的API获取数据，其中第二个依赖于第一个API，如下所示：第一个API：用于通过名称获取城市ID，因此我必须编写城市名称，API才会返回城市ID。第二个API：用于通过其ID获取城市图像，因此我必须输入城市ID才能获取城市图像。我在应用程序中使用Flutter bloc来管理界面及其状态，如下所示：

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时，我应该怎么做才能获取列表视图中每个元素的图像。

Answer 1

与将photosUrl定义为保存您所在州（在String中的单个城市的网址的CityPhotoBloc一样，要像在定义的FirstApiBloc中一样一个要保存在您所在州的城市ID的列表，因此请在此处进行操作，并定义一个称为photosUrls的URL列表，然后在ListView中而不是使用state.photosUrl来使用state.photosUrl[index]来获取URL。

还尝试使用BlocConsumer而不是BlocBuilder，看看是否可以实现buildWhen方法以仅在必要时在列表视图中构建窗口小部件

Edit:(more clarification):

来自flutter.dev：

与默认的ListView构造函数相反，后者需要一次创建所有项目，ListView.builder（）构造函数创建滚动到屏幕上的项目。

这意味着，如果您编写此代码以获取城市照片的网址：

BlocProvider.of（context）.add（LoadCityPhoto（ cityId：hotelsList [index] .id.toString（）））;

您有数百万个城市，那么不会同时发送数百万个事件，这与正常的ListView会发生，而如引用的文字所述，ListView.builder只会产生子事件根据需要，并且由于该事件是在创建子代的同一代码块中触发的，因此该事件也会按需触发

我希望现在已经清楚

详细了解ListView.builder here

使用Flutter bloc从Listview元素中的Api获取数据

1 个答案: