在颤振加载中加载更多列表，但用户界面没有改变

Posted 2023-02-19

【中文标题】在颤振加载中加载更多列表，但用户界面没有改变

【英文标题】：load more list in flutter loaded but the ui doesn't change

【发布时间】：2020-11-29 06:27:46

【问题描述】：

我正在尝试从 api 加载数据，并且我正在使用 bloc 模式进行状态管理，但是当我调用更多数据并将其添加到列表中时，ui 并没有改变。当我第二次调用 api 和将响应添加到列表中，我似乎是 ui 中的列表长度不会更改为加载指示器加载指示器保持旋转

事件是 FetchAllProjects，状态是 AllProjectsLoadedState

这里是屏幕用户界面

              Flexible(
              child: Container(
                child: BlocConsumer<AllProjectsBloc, AllProjectsState>(
                  builder: (context, state) 
                    if (state is AllProjectsLoadingState) 
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                     else if (state is AllProjectsLoadedState) 
                      return ListView.builder(
                        controller: _scrollController,
                        itemCount: state.hasReachedMax ? state.allProjectsData.length  : 
                        state.allProjectsData.length +1 ,
                        itemBuilder: (context, int i) 
                          return i >= 5 ? BottomLoader() : UnitCard(
                            price: state.allProjectsData[i].price,
                            date: state.allProjectsData[i].title.en,
                            image: state.allProjectsData[i].image,
                            bathroom: state.allProjectsData[i].bathroom,
                            bedroom: state.allProjectsData[i].bedroom,
                            area: state.allProjectsData[i].area,

                            function:()
                              Navigator.push(context, MaterialPageRoute(builder: 
                             (context)=>DetailedProperty()));
                            );
                        ,
                      );
                     else if (state is FilteredProjectsLoadedState) 
                      return Expanded(
                          child: ListView.builder(
                            itemCount: state.filteredProjectsData.length,
                            itemBuilder: (context, i) 
                              return UnitCard(
                                price: 50,
                                date: '20/5/2020',
                                bedroom: 3,
                                bathroom: 2,
                                area: 120,
                                image: 
                  
                  
             'https://www.propertyturkey.com/uploads/realestate/larg/buyukcekmece_villa_1_8.jpg',
                                function:()
                                  Navigator.push(context, MaterialPageRoute(builder: 
                     (context)=>DetailedProperty()));
                                 ,
                              );
                            ,
                          ));
                     else if (state is AllProjectsError) 
                      return ErrorView(
                          errorMessage: state.error.errorMessage,
                          retryAction: () 
                            BlocProvider.of<AllProjectsBloc>(context)
                                .add(state.failedEvent);
                          );
                    
                    return Container();
                  ,
                 
      

集团阶级

     class AllProjectsBloc extends Bloc<AllProjectsEvents, AllProjectsState> 
        List<Data> propertyList = List();

           AllProjectsBloc() : super(AllProjectsInitialState());

         bool _hasReachedMax(AllProjectsState state) =>
            state is AllProjectsLoadedState && state.hasReachedMax;

         @override
        Stream<AllProjectsState> mapEventToState(AllProjectsEvents event) async* 
           bool isUserConnected = await NetworkUtilities.isConnected();
            if (isUserConnected == false) 
                yield AllProjectsError(
              failedEvent: event, error: Constants.CONNECTION_TIMEOUT);
                return;
             
           if (event is FetchAllProjectsData && !_hasReachedMax(state)) 
               yield* _handleFetchingAllProject(event);
                      

                  if (event is FetchFilteredProjectsData) 
          yield* _handleFetchingFilteredProject(event);
            return;
          
            

         Stream<AllProjectsState> _handleFetchingAllProject(
       FetchAllProjectsData event) async* 
       if (state is AllProjectsInitialState) 
  yield AllProjectsLoadingState();
  ResponseViewModel<List<Data>> handleProjectsFetchingResponse =
      await Repository.getAllPropertiesData(1);

  propertyList = handleProjectsFetchingResponse.responseData;
  print(propertyList.length);
  if (handleProjectsFetchingResponse.isSuccess) 
    yield AllProjectsLoadedState(
      allProjectsData: propertyList,
      hasReachedMax: false,
    );
  

if (state is AllProjectsLoadedState) 
  ResponseViewModel<List<Data>> handleProjectsFetchingMoreResponse =
      await Repository.getAllPropertiesData(2);
  List<Data> tempList = handleProjectsFetchingMoreResponse.responseData;
  propertyList.addAll(tempList);

  if (handleProjectsFetchingMoreResponse.isSuccess) 
    yield AllProjectsLoadedState(
        allProjectsData: propertyList, hasReachedMax: true);
    print(propertyList.length);
  

return;
   

          Stream<AllProjectsState> _handleFetchingFilteredProject(
         FetchFilteredProjectsData event) async* 
        yield AllProjectsLoadingState();

ResponseViewModel<List<Data>> handleProjectsFetchingResponse =
    await Repository.getAllPropertiesData(1);
if (handleProjectsFetchingResponse.isSuccess) 
  propertyList = handleProjectsFetchingResponse.responseData;
  yield FilteredProjectsLoadedState(propertyList);
  return;
 else 
  yield AllProjectsError(
      failedEvent: event,
      error: handleProjectsFetchingResponse.errorViewModel);
  return;

事件类

     class AllProjectsEvents extends Equatable 


      class FetchAllProjectsData extends AllProjectsEvents 
     class FetchFilteredProjectsData extends AllProjectsEvents 

状态类

                     class AllProjectsLoadedState extends AllProjectsState 

                final  List<Data>  allProjectsData;
                 final bool hasReachedMax ;

             AllProjectsLoadedState(this.allProjectsData , this.hasReachedMax) : 
       super([allProjectsData , hasReachedMax]);

           AllProjectsLoadedState copyWith (List<Data> allProjectsData , bool hasReachedMax )
      return AllProjectsLoadedState(
        allProjectsData: allProjectsData ?? this.allProjectsData ,
        hasReachedMax:hasReachedMax ?? this.hasReachedMax
           );
    

    

【问题讨论】：

print(propertyList.length); 的输出是什么？

【参考方案1】：

问题是 bloc 消费者没有监听创建滚动事件的 bloc 实例。